* Add padding to badges
The current badges are very tightly padded, and because the top and bottom padding are the same, and aligned to the baseline, this makes badges with descenders (e.g. the "g" in "Danger") look uncomfortably close to the bottom. Adding more ample padding masks this a bit.
An alternative would be to have separate top and bottom padding, with the bottom one slightly larger than the top - but conversely, that then makes badges that contain no text with descenders, and particularly badges that contain all uppercase characters, look too bottom-heavy.
Also adding some left/right extra padding, as currently the pill badges look uncomfortably tight on the sides due to the rounding.
* 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
* 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>
"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
* Docs: rename form checks page to "Checks / radios"
it's not immediately obvious that "checks" includes information about both checkboxes and radio buttons. while "checks / radios" is also still not perfect (as honestly even I didn't quite grok that "checks" meant checkboxes), it should make it slightly more obvious nonetheless
* Move color utility callouts to start of page
Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes.
* Change heading level
otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading
* Add two new toasts examples
- Adds a new custom content example that removes the toast header and adds a custom close icon
- Adds docs for how to create your own color schemes
- Adds example of additional buttons
* Update toasts examples
- Remove span and place aria on SVG element
- Add .border-0 to color scheme example for crisper edges
* Update toasts.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- point to WCAG 2.1 rather than 2.0
- soften/expand the language around color contrast, since the situation has definitely improved in v5 but we still can't guarantee all possible permutations of colors/opacities/etc
- minor language/stylistic tweaks
- add further resources
* Docs: fix old/broken example capture and typo
* Make example less broken-looking
don't want to give impression that now it's ok to just sprinkle `role="button"` around. this at least makes the `span` keyboard-focusable, similar to at least the start of a custom control
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
