v6: Docs - feedback / bugs

[coliff]

• General: Sidebar - I think the left nav sidebar is very long and would benefit from having the sections collapsible by default, like Bootstrap 5.1 docs used to be (https://getbootstrap.com/docs/5.1/getting-started/introduction/). Or perhaps a filter at the top? Because the components are divided into sections and there is an increase in pages it can sometimes take a short while to find the page you're after.
  UPDATE: mdo is looking into redesigning the navbar

• General: Info section at top of Pages: have a new light gray background section for info and links but it's not clear which are links and which aren't. Thinking about it, overall it might make sense for these to be individual buttons or badges instead. Perhaps consider using the external link (diagonal arrow coming our of a square) for external links? I personally think it makes more sense to have the 'View & Edit this page on GitHub' at the bottom of the article too as many other docs sites do.

• Search - Site Search is super useful as there is an increase in pages, would be good to make the search input bigger on larger screens to increase the tap/click area. The border could do with a bit more contrast too probably...

• Homepage - maybe remove the 'without jQuery' part from the JavaScript section header. It was relevant for v5, but not so much now as it's been so long since jQuery was used in Bootstrap. Also the 'Comprehensive set of plugins' needs updating or add a 'plus many more' at the bottom.

Guides

• Migration - https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/guides/migration/
  Updating manually from v5 with so many breaking changes would be quite an arduous task! Would be great to have some sort of AI-assisted help for this. A SKILLS.MD or something? I think adding a 'Using AI with Bootstrap' section could be helpful. I was looking at Web Awesome's recently and they have a page for Agent Skills and a page for LLMs.
  UPDATE: There is a draft PR to add a migration SKILL (I've tested it and it's a good start!)

Content

• Images - https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/content/images/
  The Navbar example has a horizontal grip to resize the example. Could be helpful to add it to the responsive image example too to see it resize.
  Bug? The SVGs have titles so they appear as tooltips on hover, maybe the titles can be removed since they have aria-labels anyway. (this issue is present in v5 docs too).

Layout

• Grid - The CSS-Tricks Flexbox guide is linked to both in the gray bar and as an info alert. I guess one of them can be removed.

Forms

• Form Controls - BUG: Date & Time section appears twice. Date & Time inputs need d-block class I think so the icons are right aligned.

Components

• Avatars https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/components/avatar/#status-with-sizes -For the avatar status indicators I think the online/offline/busy and away need to indicate to assistive technologies the status. I checked Google Chat's web UI, Slacks and Discords and they either have the text in a span with their equivalent of the visually-hidden class or an aria-label with role="presentation", though I think role="status" could be better.

• Menu - minor thing, but for completeness sake maybe the icons example should have a paste option and Cut should come above Copy.

Overall

• Overall the Docs site looks awesome.. I love the idea of making the docs template itself a separate open-source project for others to use... kind of like what Astro did with Starlight. I understand the core teams resources are limited and it'd add a support burden on top (and a level of complexity if it was a separate repo) so might not be feasible though.

[coliff]

I can't get used to the components be split up in to sections/groups. Despite looking at the v6 docs everyday for the past few weeks I can never remember which group to scroll to. It's not always obvious what group a component would belong to. I think I'd prefer it if they were just altogether alphabetically, like this...