Moves from 1.25em to 1em to better support custom font-size-base values. Most common would probably be .875rem (14px) and current sizing garbles that into 1.09-ish, thus causing the rendering issues in #31269.
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
* sr-only -> visually-hidden cleanup
It seems the old screen-readers.md file was left behind, and forgot to rename the mixin
* Fix broken mixins for visually-hidden
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341
This rule suppresses this new behavior and reverts back to the old way.
See https://drafts.csswg.org/css-scroll-anchoring/
* Clarify screen reader changes
* Add some docs and reboot notes to migration guide
* Add mention of docs renaming of screen reader helper page
* Mention null vars from navs PR at #31035
* Update migration.md
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* feat(buttons): easier disabled state customization
* docs(migration): mention new arguments for disabled state in button-variant()
* Update migration.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Expand on disabled fieldsets and faked buttons
include further advice/information on how to disable faked buttons for keyboard/AT users
* Centralise accessible name advice in forms overview
seems odd to only mention (separately) label, aria-label etc in input-group and layout. the advice is just as pertinent in other sections like select. checks only skims over this.
moving this, in expanded form, into the overview section itself. adding a specific cross-reference (just because they are easily left with no accname at all) in the checks page.
* Change warning about accessibility, modify server-side example
- paradoxically, due to our current problems with validation (see #28414) and the fact that browsers seem to have improved in this area for the most part, it's now actually better to use browser-native validation
- added explicit `id` and `aria-describedby` association to at least the server-side form error messages, to show how it should be done properly, and expanded the prose for that explaining this.
* Replace `.sr-only` with `.visually-hidden` in new addition
* Copy edits for clarity in parenthetical
* Copy and formatting tweaks
- Wordsmithing here and there
- Turns some hyphens into em dashes
- Turns a long running comma separated list into an unordered list
- Rearranges some copy just a bit
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Replaces #30498 by adding four new null default variables for .nav-link. Doesn't carry over font-style from the original PR though since that's rarely used, at least by default Bootstrap. Nullifies all values from that PR, too, since we count on some basic inheritance here and don't need color by default.
* clear timeout before showing the toast
* Add unit test
* Remove the check for timeout
* Check for clearTimeout to have been called
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
"screen readers" is quite reductive, as there are other assistive technologies. content hidden this way is even announced by things like Alexa/Siri etc, so it's not so much just "screen readers".
in the long run, we may even consider changing the actual classnames (maybe `.visually-hidden` / `.visually-hidden-focusable`, though admittedly that's a bit verbose).
also includes a tiny tweak to layout.md to generalise the note about using `.sr-only`
* Keep checks/radio toggle buttons on topic
- give examples of the pure toggle checks and radios, without the button group class. show that these work fine without `.btn-group`, but still cross-reference it
- move the explanation from "Checkbox toggle buttons" directly to "Toggle buttons", as the mention of using button classes applies equally to the subsequent "Radio toggle buttons" and "Outlined styles" subsections.
* Expand button group description
as it's not just single line, but vertical as well
* Expand button group examples
- add more colour ... `.btn-secondary` is just dull and uninspiring
- new section to showcase "Checkbox and radio button groups"
- add a mixed styles example
- add an example of vertical radio button group
* Rename `sr-only`/`sr-only-focusable`
To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Docs: improve/expand button documentation
- since we're not doing the disabled cursor thing anymore anyway, remove confusing/unnecessary mention for link-based disabled buttons
- make the disabled toggle example using a link actually follow the preceding advice of also having `tabindex="-1"` and `aria-disabled="true"`
- tweak the link functionality callout to also still mention `aria-disabled` to reinforce the idea
- tweak toggle state description (not just `<button>`s, but also links etc...so just remove mention of `<button>` there; also reinforce accessibility aspect once more)
- add a new callout that cross-references checkbox-based toggles, and what the similarity/difference between them is
- add a matching cross-reference callout to the checkbox-based toggle buttons page
* Update link to now renamed checks-radios.md
Mark Otto
Patrick H. Lauke
dependabot[bot]
Rohit Sharma
Gaël Poupard
XhmikosR
Mark Otto
Laim
Gaël Poupard
Florian Lacreuse
Mark Otto
Florian Lacreuse
Stephanie Brown
Martijn Cuppens