fix(InfoTip): Remove aria-live and implement focus mgmt #3215
Conversation
|
View your CI Pipeline Execution ↗ for commit ef78c2c ☁️ Nx Cloud last updated this comment at |
dreamwasp
changed the title
aresnik11
left a comment
aresnik11
left a comment
There was a problem hiding this comment.
Looking really good!! Just a couple of smaller storybook asks
| it('automatically labels InfoTip button by the field label when label is a string', () => { | ||
| const { view } = renderWithInfotip({ infotip: { info } }); | ||
|
|
||
| view.getByRole('button', { name: new RegExp(label) }); |
There was a problem hiding this comment.
why do we need new RegExp here
| fields: [ | ||
| { | ||
| label: 'Email address', | ||
| name: 'email', | ||
| size: 9, | ||
| type: 'email', | ||
| infotip: { | ||
| info: 'We will never share your email with third parties.', | ||
| }, | ||
| }, | ||
| ], |
There was a problem hiding this comment.
can this be floating? or change the alignment
| ## InfoTip | ||
|
|
||
| Any field can include an `infotip` prop to provide additional context to users. | ||
|
|
||
| ### Automatic labelling | ||
|
|
||
| InfoTip buttons are automatically labelled by string field labels for accessibility. | ||
|
|
||
| <Canvas of={FieldsStories.InfoTipAutoLabelling} /> | ||
|
|
||
| ### ReactNode labels | ||
|
|
||
| For ReactNode labels, you have three options: | ||
|
|
||
| - `labelledByFieldLabel: true` - opt into automatic labelling by the field label | ||
| - `ariaLabel` - provide a custom accessible name | ||
| - `ariaLabelledby` - reference another element on the page, such as a section heading | ||
|
|
||
| <Canvas of={FieldsStories.InfoTipWithReactNodeLabel} /> |
There was a problem hiding this comment.
can this go with the other infotip info? thats currently under layout. i trust your judgement on whether to move that to here or move this to there
| I am some helpful yet concise text that needs more explanation | ||
| </Text> | ||
| <InfoTip | ||
| {...args} |
There was a problem hiding this comment.
this is getting the ariaLabel="More information" prop from args
| > | ||
| <ConnectedFormGroup | ||
| field={{ component: ConnectedInput, type: 'email' }} | ||
| infotip={{ info: 'We will never share your email with third parties.' }} |
There was a problem hiding this comment.
can this be floating? or change the alignment
| </Text> | ||
| <ConnectedFormGroup | ||
| field={{ component: ConnectedInput }} | ||
| infotip={{ |
There was a problem hiding this comment.
i would also prob change the alignment on these so you dont have to scroll to see them open
|
📬 Published Alpha Packages: |
|
🚀 Styleguide deploy preview ready! Preview URL: https://6942c569af64336c285395ba--gamut-preview.netlify.app |
Overview
Adds props to InfoTip for customizing the button's
aria-labelandaria-labelledbyattribute. Also adds automatic focus management - when you open an InfoTip, focus moves to the content container. This removed aria-live since it's no longer needed.PR Checklist
Testing Instructions
Auto-focus + keyboard nav (verify tab order makes sense!):
Floating without links:
Defaultstory withplacement: "floating"Floating with links:
WithLinksOrButtonsstoryInline without links:
Defaultstory (default inline placement)Inline with links:
GridForm + ConnectedForm
Screen reader check:
Finish and do a celebratory dance 🎉
PR Links and Envs