Un-revert "Add loading prop for Button and IconButton (#3582)"

[mperrotti]

Brings back #3582

---

Copied from #3582:

Adds a loading state to both Button and IconButton. The markup follows the recommended path forward from accessibility design, and mirrors the implementation from the Export CSV button as part of GH org security coverage pages.

Implementation details

• We use a visually hidden label instead of changing the text of the button to handle text announcements better, and to not change the size of the button.
• aria-disabled instead of disabled to maintain focus management

New props:
loading: boolean
loadingAnnouncement: default to Loading or provide a custom message to be announced on ATs

Closeshttps://github.com/github/primer/issues/2680

Screenshots

CleanShot.2023-10-11.at.14.55.13.mp4

CleanShot.2023-10-11.at.14.55.42.mp4

Merge checklist

• Added/updated tests
• Added/updated documentation
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

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]

🦋 Changeset detected

Latest commit: 85c68a6

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

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.76 KB (+2.41% 🔺)
packages/react/dist/browser.umd.js	94.96 KB (+2.4% 🔺)

[siddharthkp]

Hi! There is another bug when aria-label is present, tried to address that in this PR (not merged): #4459

Should I copy those changes over here as well?

[mperrotti]

@siddharthkp - yes, please copy those changes over as well

[siddharthkp]

Sorry, while copying over my changes, I ran into a couple questions

On this line: https://github.com/primer/react/pull/4485/files#diff-515525e4a59d9a55e13c6c60155ec6782c78a026aae4c540c324cd8e11c83a48R102-R105,

aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.

Looking at this comment, is this still true? It looks like we set aria-describedby not label aria-label or aria-labelledby 🤔

[mperrotti]

@siddharthkp I'm not sure I understand your question because we set all three depending on the situation.

We set aria-label for IconButton (see Storybook example)

We set aria-labelledby for either of these cases:

• loading prop is true
• aria-labelledby prop has been passed

We set aria-describedby for either of these cases:

• loading prop is true
• aria-describedby prop has been passed

[siddharthkp]

Sorry, bad choice of words from me. I'll try again

Looking at this block of code: https://github.com/primer/react/pull/4485/files#diff-515525e4a59d9a55e13c6c60155ec6782c78a026aae4c540c324cd8e11c83a48R102-R105:

// aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.// We only set it when the button is in a loading state because it will supercede the aria-label when the screen// reader announces the button name.aria-labelledby={loading ? `${uuid}-label` : ariaLabelledBy}

and wondering why/when accessible name becomes unset when the button is in a loading state?

I removed it that line and saw no changes which really confused me. I'm probably missing something very obvious here, thanks for your patience with me!

[mperrotti]

Thanks @siddharthkp

I removed it that line and saw no changes which really confused me. I'm probably missing something very obvious here, thanks for your patience with me!

I had the same experience in the browser, but it caused the following test to fail:

 ● Button › should preserve the accessible button name when the button is in a loading state
expect(element).toHaveAccessibleName()
Expected element to have accessible name:
content
Received:
248 | const container = render(<Button loading>content</Button>)
249 |
> 250 | expect(container.getByRole('button')).toHaveAccessibleName('content')
| ^
251 | })
252 | })

[siddharthkp]

ui/packages with failing tests in CI:

- @github-ui/filter (timeout, seems unrelated)
- @github-ui/pull-request-viewer (consistent, probably related)

Triaging them now

---

Update:

Error is on this line:
https://github.com/github/github/blob/prc-integration-test-for-4485/ui/packages/pull-request-viewer/components/diffs/__tests__/DiffFileHeaderListView.test.tsx#L323

expect(fileLevelCommentsButton).toHaveTextContent('9')

Notice the text content within trailingVisual is missing in integration branch

on master:
<spandata-component="buttonContent" class="Box-sc-g0xbh4-0 kkrdEu"><spandata-component="leadingVisual" class="Box-sc-g0xbh4-0 trpoQ"><svgaria-hidden="true" focusable="false" role="img" class="octicon octicon-comment" viewBox="0 0 16 16" width="16"
height="16" fill="currentColor">
...
</svg></span><spandata-component="trailingVisual" class="Box-sc-g0xbh4-0 trpoQ"><spanaria-hidden="true" data-component="ButtonCounter" class="Box-sc-g0xbh4-0 fnWtqd">9</span><spanclass="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 rTZSs">&nbsp;(9)</span></span></span>
on integration branch:
<spandata-component="buttonContent" class="Box-sc-g0xbh4-0 kkrdEu"><spandata-component="leadingVisual" class="Box-sc-g0xbh4-0 trpoQ"><svgaria-hidden="true" focusable="false" role="img" class="octicon octicon-comment" viewBox="0 0 16 16" width="16"
height="16" fill="currentColor">
...
</svg></span></span>

---

The button in question is in the new pull request view on a file header: https://github.com/github/github/blob/prc-integration-test-for-4485/ui/packages/pull-request-viewer/components/diffs/diff-file-header-list-view/FileConversationsButton.tsx#L224-L231

<Buttonref={conversationsListButtonRef}aria-label={fileConversationsButtonAriaLabel()}count={commentsCount}leadingVisual={CommentIcon}sx={{mr: 2,flexShrink: 0}}onClick={handleConversationListOpen}/>

The text in the trailing visual comes from the count

Will try to reproduce it in primer/react next

---

Update:

Found it! See next comment for summary

[siddharthkp]

Oof! Took a journey (see previous comment) but found the bug!

Bug 1:

<ButtonleadingVisual={CommentIcon}count={3}/>

on main	on branch

Related line: https://github.com/primer/react/pull/4485/files#diff-515525e4a59d9a55e13c6c60155ec6782c78a026aae4c540c324cd8e11c83a48R132 (there are no children, only count)

Turns out, we didn't have a story (and a visual regression test) for this use case. I've added a story to both main and this branch so that we can have visual regression tests for this case: #4763

---

Bug 2:

Looking at the snapshots more closely, the space in the ActionMenu stories is missing:

https://github.com/primer/react/pull/4485/files?short_path=a21a44a#diff-e2a5677897b30a0ae510db2637803f
d0e9bc24e67e8d3e427c48f328accb88bd

Before	After

[mperrotti]

@siddharthkp - everything should be good to go! I'll kick off another integration test PR as soon as we have a Canary release available

[mperrotti]

VRTs need to be updated now that we fixed the bug where whitespace characters were not being rendered between two elements. For example: the single-select ActionMenu button label: https://primer.style/react/storybook/?path=/story/components-actionmenu-features--single-select

[mperrotti]

I kicked off an update to the integration test PR: https://github.com/github/github/actions/runs/10066055529

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/334172

[emilybrick]

Looks good! ✨