Skip to content
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

fix: a11y issues for attention component #123

Merged
merged 5 commits into from
Oct 11, 2023

Conversation

felicia-haggqvist
Copy link
Contributor

Fixes a11y issues raised in WARP-320 :

  • Add role and aria-label to each attention example in Attention.stories.tsx
  • Add aria-expanded + aria-controls to popover example to indicate when popover is visible and not.
  • Add aria-describedby, tabIndex to Attention component + add onFocus hook to tooltip example to make tooltip visible on focus. User is now able to tab in order to make the tooltip visible, as well as press ESC to close the tooltip:
Skärmavbild 2023-10-11 kl  14 46 01

@felicia-haggqvist felicia-haggqvist requested a review from a team October 11, 2023 13:02
@felicia-haggqvist felicia-haggqvist self-assigned this Oct 11, 2023
zIndex: 1,
// border alignment is off by a fraction of a pixel, this fixes it
[`margin${arrowDirectionClassname(arrowDirection)}`]: '-0.5px',
[`margin${arrowDirectionClassname(arrowDirection)}`]: "-0.5px",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we change the prettier config or something?

Copy link
Contributor Author

@felicia-haggqvist felicia-haggqvist Oct 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be from my prettier-extension! Do we have a prettier config? I have the "Prettier - Code formatter" installed

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see one. But we should probably have one in all our repo's. I'll make a task :)

@felicia-haggqvist felicia-haggqvist merged commit 0588564 into next Oct 11, 2023
2 checks passed
@felicia-haggqvist felicia-haggqvist deleted the fix/a11y-fixes-for-attention branch October 11, 2023 13:28
github-actions bot pushed a commit that referenced this pull request Oct 11, 2023
## [1.1.1-next.4](v1.1.1-next.3...v1.1.1-next.4) (2023-10-11)

### Bug Fixes

* a11y issues for attention component ([#123](#123)) ([0588564](0588564))
Copy link
Contributor

@BalbinaK BalbinaK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great stuff!

ariaLabel?: string;

/**
* Sets the aria-role attribute for the Attention component
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should probably be role attribute :)

Copy link
Contributor Author

@felicia-haggqvist felicia-haggqvist Oct 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops! I can create a mini-pr to fix that: https://github.com/warp-ds/react/pull/125/files

github-actions bot pushed a commit that referenced this pull request Oct 23, 2023
## [1.1.1](v1.1.0...v1.1.1) (2023-10-23)

### Bug Fixes

* a11y fixes for button link and link as buttons ([#132](#132)) ([47c6bd7](47c6bd7))
* a11y issues for attention component ([#123](#123)) ([0588564](0588564))
* add leading slash to crowdin path ([#98](#98)) ([472d456](472d456))
* add source locale to lingui config ([#103](#103)) ([aaf3dc0](aaf3dc0))
* anchor text alignment & icon translations ([#134](#134)) ([d682586](d682586))
* ay11 fixes for the Modal component and affected stories ([#128](#128)) ([a1fdf92](a1fdf92))
* **breadcrumbs.js:**  Remove double Aria Label ([90d56a8](90d56a8))
* **breadcrumbs:** fixed double arialabel and removed area hidden from the seperators ([02f4eb2](02f4eb2))
* connect helptext to text area ([#131](#131)) ([a7a7643](a7a7643))
* improve destination config for crowdin ([#112](#112)) ([7bd543a](7bd543a))
* only sync locales on next branch for now ([#99](#99)) ([f068199](f068199))
* replace inline svgs with warp icons ([#95](#95)) ([17f5b05](17f5b05))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants