-
Notifications
You must be signed in to change notification settings - Fork 185
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
[LUNA-1331] [BpkCheckbox] Add ARIA label prop #3544
base: main
Are you sure you want to change the base?
Conversation
Visit https://backpack.github.io/storybook-prs/3544 to see this build running in a browser. |
Visit https://backpack.github.io/storybook-prs/3544 to see this build running in a browser. |
Visit https://backpack.github.io/storybook-prs/3544 to see this build running in a browser. |
Visit https://backpack.github.io/storybook-prs/3544 to see this build running in a browser. |
|
||
it('should render using label as aria-label if no ariaLabel prop provided', async () => { | ||
render(<BpkCheckbox name="checkbox" label="Prefer directs" />); | ||
const label = screen.getByLabelText('Prefer directs'); | ||
expect(label).toBeInTheDocument(); | ||
}); | ||
|
||
it('should render using ariaLabel prop as aria-label if prop provided', async () => { | ||
render(<BpkCheckbox name="checkbox" label="Prefer directs" ariaLabel="aria label test string"/>); | ||
const ariaLabel = screen.getByLabelText('aria label test string'); | ||
expect(ariaLabel).toBeInTheDocument(); | ||
}); |
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.
I'd maybe add another test that should render using ariaLabel when both aria-label and label are provided [completely optional to add]
Will come back round to this as we recently had a similar query from Luna and aria label wasn't necessarily the best way to do this. Will dig out the conversation |
Remember to include the following changes:
[KOA-123][BpkButton] Updating the colour
README.md
(If you have created a new component)README.md