You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Explore updating FormLabel InlineError component to enable more flexibility for overriding the default props (eg. remove role attribute) and accepting additional attributes like 'tabindex'.
To enable focus for keyboard users of the FormLabel error message, we have a use case for InlineError to include tabindex="-1" attribute and the removal of role attribute.
Removal of role="alert" is needed here since focus to this container will cause screen readers to announce it already.
Example:
<label class="ds-c-label ds-u-margin-bottom--3">
<h2 class="ds-text-heading--xl ds-u-margin-bottom--1">
Select all that apply to your household
</h2>
<span class="ds-c-field__error-message" id="ds-c-field__error-message_1" tabindex="-1">
Choose at least one option to continue. If none of these options apply, select “None of these changes apply to me or anyone in my household.”
</span>
</label>
Type: InternalThis item relates to internal tooling/maintenance
1 participant
Converted from issue
This discussion was converted from issue #1123 on May 09, 2022 16:08.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Explore updating FormLabel InlineError component to enable more flexibility for overriding the default props (eg. remove role attribute) and accepting additional attributes like 'tabindex'.
To enable focus for keyboard users of the FormLabel error message, we have a use case for InlineError to include
tabindex="-1"
attribute and the removal of role attribute.Removal of role="alert" is needed here since focus to this container will cause screen readers to announce it already.
Beta Was this translation helpful? Give feedback.
All reactions