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

Add tabIndex prop to React Icon component #849

Merged
merged 8 commits into from
Oct 7, 2022

Conversation

broccolinisoup
Copy link
Member

@broccolinisoup broccolinisoup commented Oct 4, 2022

👋🏼 This PR adds a new prop focusable to the Icon React component. It is a feedback came from the accessibility review. Please see the comment Add focusable="false" to SVG icons here

I don't have much knowledge around svg icons so please let me know if this is a good way of doing it or any other feedback, I would appreciate 🙏🏼

@broccolinisoup broccolinisoup requested a review from a team as a code owner October 4, 2022 21:20
@changeset-bot
Copy link

changeset-bot bot commented Oct 4, 2022

🦋 Changeset detected

Latest commit: 2898981

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/octicons Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@broccolinisoup broccolinisoup changed the title Add focusable prop to svg icons Add focusable prop to React Icon component Oct 4, 2022
@broccolinisoup broccolinisoup temporarily deployed to github-pages October 4, 2022 21:23 Inactive
@broccolinisoup broccolinisoup temporarily deployed to github-pages October 4, 2022 22:38 Inactive
@broccolinisoup

This comment was marked as resolved.

@broccolinisoup
Copy link
Member Author

@joshblack Also, do you have any recommendation on how to fix the failing snapshots here? I mentioned the issue above.

@joshblack
Copy link
Member

@broccolinisoup definitely! I think you can do:

# From the top-level
yarn
yarn build

cd lib/octicons_react
yarn
yarn jest -u

To update the snapshots. Sorry I missed this earlier!

@broccolinisoup

This comment was marked as resolved.

@broccolinisoup broccolinisoup temporarily deployed to github-pages October 6, 2022 11:14 Inactive
@broccolinisoup

This comment was marked as resolved.

@@ -66,6 +66,23 @@ export default () => (
)
```

### `focusable`

You can add the `focusable` attribute to the SVG element via the `focusable` prop, which can be either `true`, `false`, or `auto`.
Copy link
Member Author

Choose a reason for hiding this comment

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

@ericwbailey I would appreciate if you could please review the docs here 🙏🏼 Feel free to suggest changes, if there is anything doesn't make sense. Thank you!!

lib/octicons_react/src/createIconComponent.js Outdated Show resolved Hide resolved
lib/octicons_react/src/index.d.ts Outdated Show resolved Hide resolved
docs/content/packages/react.mdx Outdated Show resolved Hide resolved
docs/content/packages/react.mdx Outdated Show resolved Hide resolved
@broccolinisoup broccolinisoup changed the title Add focusable prop to React Icon component Add tabIndex prop to React Icon component Oct 7, 2022
@broccolinisoup broccolinisoup temporarily deployed to github-pages October 7, 2022 05:27 Inactive
@broccolinisoup
Copy link
Member Author

broccolinisoup commented Oct 7, 2022

👋🏼 @joshblack!

Thank you so much for your review! The intent of this PR was for making sure the SVG items that have aria-hidden= true, don't receive any focus by some assistive technology (here is Eric’s feedback about it) and because aria-hidden was dependent on aria-label, this is why I made the focusable attribute dependant to aria-label as well. Having said that, my solution was not inclusive enough I think in a way that I was solving the half of the problem, which is making sure SVG items don’t get focus when they have aria-hidden=true, however, the solution doesn’t help if an SVG item needs to be focused. I know it is kind of out of the “scope” of the case I am working on but while I am already here why not implementing that as well! And your comments make so much sense! I have implemented it and pushed my commit. Please let me know if there is anything I am missing. I appreciate your review so much 🙏🏼

@broccolinisoup broccolinisoup temporarily deployed to github-pages October 7, 2022 05:33 Inactive
@broccolinisoup broccolinisoup temporarily deployed to github-pages October 7, 2022 05:49 Inactive
docs/content/packages/react.mdx Outdated Show resolved Hide resolved
Copy link
Member

@joshblack joshblack left a comment

Choose a reason for hiding this comment

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

🥳

@joshblack
Copy link
Member

Looks great @broccolinisoup! Thanks so much for taking this on 🙏

@broccolinisoup
Copy link
Member Author

Looks great @broccolinisoup! Thanks so much for taking this on 🙏

Thanks for your review @joshblack!

@broccolinisoup broccolinisoup temporarily deployed to github-pages October 7, 2022 20:29 Inactive
@broccolinisoup
Copy link
Member Author

Seeking a review from @primer/octicons-reviewers 👀 🙏🏼

Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

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

Looks great! Nice work, @broccolinisoup.

docs/content/packages/react.mdx Outdated Show resolved Hide resolved
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.

4 participants