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

Closes https://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 | })

[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! ✨