Add missing <main> element to documentation #22364
Conversation
… new var in _variables.scss named $dropdown-item-padding-y keeping the fixed value 3px
… new var in _variables.scss named $dropdown-item-padding-y keeping the fixed value 3px
This reverts commit ec75282.
This reverts commit 59e7ddd.
…create a new var in _variables.scss named $dropdown-item-padding-y keeping the fixed value 3px" This reverts commit 6077120.
…nt mixin""" This reverts commit 03d7ad4.
| @@ -12,9 +12,9 @@ | |||
|
|
|||
| {% include nav-home.html %} | |||
|
|
|||
| <div id="content"> | |||
| <main id="content" role="main"> | |||
There was a problem hiding this comment.
role="main" is not required here since we are using the <main> element
There was a problem hiding this comment.
I always double the main element with the aria role for IE11 who doesn't take care about this element
There was a problem hiding this comment.
agree, it's unnecessary normally, but notoriously IE11 needs this extra role to make it work (as in, expose it correctly to AT). as it doesn't do any harm, this PR looks fine to me as is
There was a problem hiding this comment.
Just a question about that but it seems main tag isn't supported by IE10 (https://caniuse.com/#feat=html5semantic).
What's the lower release of IE we support in our documentation ?
There was a problem hiding this comment.
Yes main tag doesn't fit well on IE10, need to add a css
main { display:block; }
Bootstrap compatibility is IE1à and upper ( https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#desktop-browsers)
So maybe need to add a fix in the core _reboot.scss for all HTML5 semantic default display?
article, aside, footer, header, hgroup, main, nav, section {
display: block;
}
There was a problem hiding this comment.
ah, in v3 we had html5shiv take care of that, forgot we don't have that in v4 anymore.
i think it'd make sense to add the default block styling to reboot. i'll take care of that before merging this, assuming @mdo is ok with it
docs/_layouts/docs.html
Outdated
| @@ -19,7 +19,7 @@ | |||
| </div> | |||
| </div> | |||
|
|
|||
| <div class="container"> | |||
| <main class="container" role="main"> | |||
|
Would suggest "Squash and merge" as there are quite a few extraneous commits in this PR |
| @@ -29,7 +29,7 @@ <h1 class="bd-title" id="content">{{ page.title }}</h1> | |||
| {{ content }} | |||
There was a problem hiding this comment.
wondering if this may not be the more appropriate location for <main> (depends if we count the side navigation as content or not). if so, i'd suggest keeping the <div class="col-12..."> and wrapping its contents in a <main role="main">, rather than replacing the <div> altogether
There was a problem hiding this comment.
@Lausselloic you ok to make those change to this PR? need a hand?
There was a problem hiding this comment.
sorry haven't seen your comment. Yes I will do it
There was a problem hiding this comment.
great stuff. will double-check it all works and merge. thanks :)
patrickhlauke
changed the title
For accessibility improvement and beacause HTML5, I propose to add a main tag for the global docs content