v5 documentation new look and feel (meta bug)

[patrickhlauke]

seems #28450 introduced a large number of changes not only to forms, but to the actual look and feel of the v5 version of getbootstrap.com

a few initial problems/issues noted with that (please feel free to add more):

• contrast in the top navigation bar for the links/icons falls below 4.5:1
• left-hand navigation scrolling is borked when the nav and page get long (you have to scroll all the way to the end of the content before the left-hand navigation scrolls
• once the navigation has expand/collapse disclosure widgets, they lack a role="button" and aria-expanded="true"/aria-expanded="false"
• hover-specific styles for the top nav, breadcrumbs, left-hand navigation, which are not applied on :focus ... so they're all niceties and styles that only work for mouse users, not keyboard users; need doubling up of :hover and :focus styles
• some changes were introduced to _tables.scss which don't make sense: https://github.com/twbs/bootstrap/pull/28450/files#diff-82ee1ffb694a87db828fe22dcd868aed
• left-hand navigation also blows up in IE11 - will be fixed in Doc tweaks #29029
• Move any inline script code to application.js
• The docs no longer have their toggler so there's no way to navigate the docs on mobile
• Use our collapse plugin in the sidebar
• Add transition in the sidebar arrow transform
• Maybe we should move forms under components since they are components themselves
• IE11 shrinks the search field

[patrickhlauke]

Screenshot of the v5 left-hand navigation in IE11

[XhmikosR]

@MartijnCuppens has made a list too #28450 (comment)

We should consolidate the issues.

Also I have a PR with some fixes for things I noticed #29029

[XhmikosR]

Updated TODO

[mdo]

In response to the new todos added:

Add transition in the sidebar arrow tranform

I don't want them transitioning, they should immediately click. Same for using our collapse plugin if that's why folks want—there should be no transition here.

Maybe we should move forms under components since they are components themselves

Negative, forms have so much content and behaviors. I moved them to their own section on purpose.

[XhmikosR]

For the transitions I don't mind. But we are reinventing the wheel here, because that's exactly why the collapse plugin exists.

As for the forms, IMO the current hierarchy just doesn't make sense. Forms are components themselves. It's just that they have their own components too which is OK.

[ffoodd]

Since:

1. Collapse plugin is used in sidebar, and the arrow is transitionned
2. There is a consensus around Forms being outside components;
3. IE11 is not targetted anymore
4. aria-expanded is used where appropriate in navigation

I think this one could be closed. Anyone?

[XhmikosR]

Agreed, @patrickhlauke feel free to reopen if we missed something.

[patrickhlauke]

LGTM (noting though that in IE11 the docs nav is now completely inoperable - but i guess that's clearly signals the "not supporting IE11" angle)

[XhmikosR]

That's due to JS errors on IE, so yeah.