Icon button fixes: Removes iconLabel and adds aria-label to the type by pksjce · Pull Request #1945 · primer/react

pksjce · 2022-03-10T08:17:36Z

Describe your changes here.

The documentation and stories for IconButton were not consistent.
The iconLabel is not actually required.
The aria-label should be mandatory for IconButton

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

changeset-bot · 2022-03-10T08:17:38Z

🦋 Changeset detected

Latest commit: 93a508b

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

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

github-actions · 2022-03-10T08:21:11Z

size-limit report 📦

Path	Size
dist/browser.esm.js	63.19 KB (-0.08% 🔽)
dist/browser.umd.js	63.56 KB (-0.06% 🔽)

rezrah · 2022-03-10T09:36:36Z

@@ -45,7 +45,7 @@ export type IconButtonProps = {
 * This is to be used if it is an icon-only button. Will make text visually hidden


do you need this comment anymore?

rezrah · 2022-03-10T09:37:56Z

 */
 icon: React.FunctionComponent<IconProps>
-iconLabel: string
+'aria-label': string


Should be this required? Also, what would the user do if they wanted to apply aria-labelledby instead, should we have some logic to only apply the aria-label only if aria-labelledby hasn't been passed in so that takes precedence?

Related: What's the right way to add a tooltip to an IconButton, like the one on a file?
When composable Tooltip + IconButton, does the aria-label go on both of them or just one?
This would be useful for trailing action for TextInput (https://github.com/github/primer/issues/748)
👀 @alliethu @mperrotti

@siddharthkp - I actually think we'd want the aria-label on the button but not the tooltip.
Here's what I think would give a nice experience for screenreaders
When the tooltip is acting like a label
<buttonaria-label="Edit this file"><svg>{/* paths and stuff */}</svg></button><div>Editthisfile</div>//<---thisisatooltip
OR
<buttonaria-labelledby="editTooltip"><svg>{/* paths and stuff */}</svg></button><divid="editTooltip">Editthisfile</div>//<---thisisatooltip
When the tooltip is acting like helper/caption text
<buttonaria-label="Edit this file"aria-describedby="editTooltip"><svg>{/* paths and stuff */}</svg></button><divid="editTooltip">Onlypeopleinthisorganizationcaneditthisfile</div>//<---thisisatooltip
@alliethu - please keep me correct

Also, I just realized our tooltips aren't displayed on focus, only hover. :(
We probably need an a11y audit on these

@mperrotti Yes, the aria-label should be on the button. Also, heads-up that @khiga8 just did a recent release to fix tooltips on our comment box toolbars. Hopefully, you should be able to reference her implementation for the fixes on the PRC end.
https://github.com/github/accessibility/issues/594#issuecomment-1034219464

@mperrotti even more current, @hectahertz is working on Upstreaming tooltip to PVC. The two of you should coordinate! https://github.com/github/accessibility/issues/802

Here is the upstreamed tooltip component. The tooltip is implemented as a custom element. You may refer to implementation custom element here.

For this PR, I'll try and support both aria-label and aria-labelled-by in the types. Hope that works 🤞

rezrah · 2022-03-10T09:42:48Z


 it('styles icon only button to make it a square', async () => {
- const container = render(<IconButton icon={SearchIcon} iconLabel="Search icon only button" />)
+ const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)


I think we should have a separate test for the aria-label / aria-labelledby. thoughts?
also a suggestion for your matcher, to be more specific around looking for the aria-label attributes:
- findByRole('button')+ getByRole('button', {name: 'Search button'} )
I don't think you need use an async matcher? 🤔

rezrah · 2022-03-10T09:46:57Z

+ const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)
 const IconOnlyButton = await container.findByRole('button')
 expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px')
+ expect(IconOnlyButton).toMatchSnapshot()


I feel like aria attributes fall under logic, so I think it's worth adding a separate test for it like..
expect(IconOnlyButton).toHaveAttribute('aria-label', labelThingy)

rezrah

Looks great, nice one @pksjce 🙌

siddharthkp

Can we update the first example on the docs as well to use aria-label instead of children: IconButton#icon-only-button and on the page for Button: Button#icon-only-button

sorry for not catching this one on the first pass!

we can also remove the "drafts" meta string from code examples now ✨

siddharthkp

Found a missing spot, fixed it: 40f8d81

Ship it

siddharthkp · 2022-03-17T13:56:18Z

 ```jsx live
 <>
- <IconButton aria-label="Search" size="small" icon={SearchIcon} />
+ <IconButton aria-label="Search" size="small" icon={SearchIcon} />


oops, my bad!

pksjce requested review from a team and rezrah March 10, 2022 08:17

pksjce force-pushed the pk/button-issue branch from adf8c92 to 83ef049Compare March 10, 2022 08:52

rezrah reviewed Mar 10, 2022
View reviewed changes

pksjce force-pushed the pk/button-issue branch 2 times, most recently from 299fe5e to 00691a9Compare March 15, 2022 09:20

rezrah approved these changes Mar 15, 2022
View reviewed changes

siddharthkp requested changes Mar 15, 2022
View reviewed changes

pksjce force-pushed the pk/button-issue branch from 5e2e887 to e6687d9Compare March 16, 2022 09:16

pksjce requested a review from siddharthkp March 16, 2022 09:18

pksjce added the status: review needed label Mar 16, 2022

siddharthkp approved these changes Mar 16, 2022
View reviewed changes

pksjce force-pushed the pk/button-issue branch from 0ced9a2 to 036cc03Compare March 17, 2022 04:08

pksjce enabled auto-merge (squash) March 17, 2022 04:09

siddharthkp reviewed Mar 17, 2022
View reviewed changes

pksjceand others added 9 commits March 21, 2022 18:53

Icon button fixes removes iconLabel and adds aria-label to the type
237c272

Update test
14e9861

Fix stories and tests. Also add tooltip story
9cd9f41

Fix aria label types
b7d60fb

Update docs from drafts to main
0accf7e

Create large-owls-dance.md
70a8461

update icon only example in Button.mdx
edc438f

Update docs from drafts to main
5753683

Tests update
8141773

pksjce added 2 commits March 21, 2022 18:53

fix test after latest
3854b2d

Not sure why this test fails.maybe i need to bust cache?
dc3a347

pksjce force-pushed the pk/button-issue branch from b342511 to dc3a347Compare March 21, 2022 07:59

pksjce added 2 commits March 21, 2022 19:07

Update theme test
a32add7

Remove cache busting
93a508b

pksjce merged commit ef3b58a into mainMar 21, 2022

pksjce deleted the pk/button-issue branch March 21, 2022 08:26

primer-css mentioned this pull request Mar 21, 2022
Release tracking #1966
Merged

		@@ -45,7 +45,7 @@ export type IconButtonProps = {
		* This is to be used if it is an icon-only button. Will make text visually hidden

Uh oh!

Conversation

pksjce commented Mar 10, 2022

Screenshots

Merge checklist

Uh oh!

changeset-botBot commented Mar 10, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Mar 10, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rezrahMar 10, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siddharthkpMar 10, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

When the tooltip is acting like a label

When the tooltip is acting like helper/caption text

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khiga8Mar 10, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rezrah left a comment

Choose a reason for hiding this comment

Uh oh!

siddharthkp left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siddharthkp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

changeset-botBot commented Mar 10, 2022•
edited
Loading

github-actionsBot commented Mar 10, 2022•
edited
Loading

rezrahMar 10, 2022•
edited
Loading

siddharthkpMar 10, 2022•
edited
Loading

khiga8Mar 10, 2022•
edited
Loading

siddharthkp left a comment •
edited
Loading