-
Notifications
You must be signed in to change notification settings - Fork 363
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
added: [M3-6989] - aria-describedby
to TextField with helper text
#11351
base: develop
Are you sure you want to change the base?
added: [M3-6989] - aria-describedby
to TextField with helper text
#11351
Conversation
@@ -113,7 +113,8 @@ interface InputToolTipProps { | |||
tooltipWidth?: number; | |||
} | |||
|
|||
interface TextFieldPropsOverrides extends StandardTextFieldProps { | |||
interface TextFieldPropsOverrides | |||
extends Omit<StandardTextFieldProps, 'label'> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This helps TS in general not having to compare overridden types. While in this case this is just a string and this likely has no impact, it's just good practice.
(label | ||
? convertToKebabCase(label) | ||
: // label could still be an empty string | ||
fallbackId); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
always making sure we have an ID
aria-describedby
to TextField with helper textaria-describedby
to TextField with helper text
aria-describedby
to TextField with helper textaria-describedby
to TextField with helper text
Coverage Report: ✅ |
Cloud Manager UI test results🔺 1 failing test on test run #6 ↗︎
Details
TroubleshootingUse this command to re-run the failing tests: yarn cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts" |
Description 📝
Tiny PR to add better accessibility to the
Textfield
via itshelperText
prop.On screen, it is trivial for a user to see a helper test associated with a field, but this is not necessarily true for someone using a screen reader, since the helper text is a plain paragraph floating under the input, and isn't associated with its relevant interactive element.
Changes 🔄
Preview 📷
How to test 🧪
Prerequisites
Verification steps
Textfield
&HelperText
relationshipAs an Author, before moving this PR from Draft to Open, I confirmed ✅