Skip to content

Docs: forms accessibility cleanup#31114

Merged
patrickhlauke merged 9 commits into
mainfrom
v5-docs-forms
Jul 11, 2020
Merged

Docs: forms accessibility cleanup#31114
patrickhlauke merged 9 commits into
mainfrom
v5-docs-forms

Conversation

@patrickhlauke

Copy link
Copy Markdown
Member
  • expands on what's needed for "faked" controls inside a disabled <fieldset>
  • centralises the accessibility advice about always providing an accessible name, and mentions some of the possible variants; includes strong suggestion not to rely on placeholder and invisible labels as beyond AT users it can be bad for other user groups
  • updated warning about validation, which (due to Validation feedback/tooltips lack association with their form control #28414), is actually worse than the (now improved) browser default validation; expanded the example for server-side to explicitly tie error messages to form fields using aria-describedby

this should at least partially be backported (manually, since v4 doesn't have the overview page)

@XhmikosR

XhmikosR commented Jul 3, 2020

Copy link
Copy Markdown
Member

@patrickhlauke this needs a rebase :)

@patrickhlauke

Copy link
Copy Markdown
Member Author

rebased @XhmikosR

Comment thread site/content/docs/5.0/forms/validation.md
@XhmikosR

XhmikosR commented Jul 3, 2020

Copy link
Copy Markdown
Member

@patrickhlauke this needs another rebase. Do note that for v4 these will need to be manually backported so please rethink if they need to be backported and if so make a PR against the v4-dev branch or push to my v4-dev-xmr branch.

@patrickhlauke patrickhlauke requested a review from a team as a code owner July 3, 2020 18:48
@patrickhlauke

Copy link
Copy Markdown
Member Author

ok so after being told to do a rebase, i tried...and have no idea why now all of a sudden i get all those other extraneous commits in here. sigh.

@XhmikosR

XhmikosR commented Jul 3, 2020

Copy link
Copy Markdown
Member

Yeah, that's not a rebase :P A rebase should have only your patches.

Anyway, I'll try to fix it tomorrow myself.

include further advice/information on how to disable faked buttons for keyboard/AT users
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.
- 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.
@patrickhlauke

Copy link
Copy Markdown
Member Author

i think for some reason my local env didn't have the latest main, and was refusing to grab it. had to drop it and refetch it. odd. anyway, i THINK i got it more correctly this time around, let's see...

@patrickhlauke

Copy link
Copy Markdown
Member Author

manual v4 partial backport here #31234

@XhmikosR XhmikosR left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I'd like a review from @mdo and we squash and merge

@XhmikosR XhmikosR removed the request for review from a team July 6, 2020 15:28
patrickhlauke and others added 4 commits July 6, 2020 18:44
- 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
@mdo

mdo commented Jul 11, 2020

Copy link
Copy Markdown
Member

@patrickhlauke Gave this a read through and made some edits. Let me know if anything looks off, then we can merge. Thanks!

@patrickhlauke

Copy link
Copy Markdown
Member Author

yup, all looking good @mdo, thanks. merging.

@patrickhlauke patrickhlauke merged commit eeb73e0 into main Jul 11, 2020
@patrickhlauke patrickhlauke deleted the v5-docs-forms branch July 11, 2020 20:38
olsza pushed a commit to olsza/bootstrap that referenced this pull request Oct 3, 2020
* 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 twbs#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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants