Validation feedback/tooltips lack association with their form control #28414
Comments
|
Interesting to note that this is actually a regression from Bootstrap 3 🤔 https://getbootstrap.com/docs/3.4/css/#forms-help-text
|
|
sure. lots of moving parts to bootstrap, so things often fall between the cracks on large refactors/reworkings. |
|
this issue is complicated by the fact that, despite |
patrickhlauke
changed the title
|
@mdo i think at this stage we probably can't rely on pure CSS to have both the "just hang off the |
|
alternatively i guess we could cram all the extra logic into that example JS snippet we provide, but that feels very dirty, expecting users to manually copy/paste some custom JS in to provide actual core functionality that should be handled directly by BS silently? |
|
xref #28995 for a first very naive approach |
|
dropping this here for reference as well https://developer.paciellogroup.com/blog/2015/05/short-note-on-aria-labelledby-and-aria-describedby/ |
- 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.
- 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.
* 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>
|
#31677 aims to address this in our form validation pages. Slating for alpha 3! |
* 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>
|
@patrickhlauke @mdo: is this still valid for v5? |
|
sorry, late reply to say yes, it's still a problem we need to tackle... |
the feedback and tooltip containers need to be programmatically associated with their respective form controls, e.g. using
aria-describedby="...", e.g.to
The text was updated successfully, but these errors were encountered: