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.

Sign up for GitHub

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

Jump to bottom

Add tabIndex prop to React Icon component #849

Merged
merged 8 commits into from
Oct 7, 2022
Merged

Add tabIndex prop to React Icon component #849

merged 8 commits into from
Oct 7, 2022

Conversation

broccolinisoup
Copy link
Member

@broccolinisoup broccolinisoup commented Oct 4, 2022 •
edited
Loading

👋🏼 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 •
edited
Loading

🦋 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.

Sign in to view
@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.

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

This comment was marked as resolved.

Sign in to view
broccolinisoup
broccolinisoup commented Oct 6, 2022
View reviewed changes
docs/content/packages/react.mdx Outdated
@@ -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!!

joshblack
joshblack reviewed Oct 6, 2022
View reviewed changes
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 •
edited
Loading

👋🏼 @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
ericwbailey
ericwbailey approved these changes Oct 7, 2022
View reviewed changes
docs/content/packages/react.mdx Outdated Show resolved Hide resolved
joshblack
joshblack approved these changes Oct 7, 2022
View reviewed changes
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 👀 🙏🏼

colebemis
colebemis approved these changes Oct 7, 2022
View reviewed changes
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
@colebemis colebemis merged commit f6c8d2b into main Oct 7, 2022
@colebemis colebemis deleted the broccolinisoup/icon-svg-focusable branch October 7, 2022 22:56
@primer-css primer-css mentioned this pull request Oct 7, 2022
Merged
@soumen1102 soumen1102 mentioned this pull request Jun 20, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@colebemis colebemis colebemis approved these changes

@ericwbailey ericwbailey ericwbailey approved these changes

@joshblack joshblack joshblack approved these changes

@ashygee ashygee Awaiting requested review from ashygee ashygee was automatically assigned from primer/octicons-reviewers

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@broccolinisoup @joshblack @ericwbailey @colebemis