Skip to content

Conversation

jshawl
Copy link
Contributor

@jshawl jshawl commented May 2, 2023

Description

This PR moves the aria-label from the top level button container to the lower level span that wraps both the label and the logo.

Why are we making these changes?

Today when a screen reader focuses on a button with a label, the text is read aloud as just "PayPal". This change (plus the sdk-logos change) will read the button text aloud with the label, e.g. "Pay with PayPal":

Screen.Recording.2023-05-01.at.12.00.11.mov

Reproduction Steps (if applicable)

  1. Install the Screen Reader chrome extension.
  2. Press tab to focus on a button that has a label "pay"
  3. Expect the screenreader to pronounce "pay with paypal"
  4. Observe the screenreader not pronouncing the label.

Screenshots (if applicable)

Dependent Changes (if applicable)

There will also be a PR incoming for sdk-logos. I will update this PR once that one is open.

Groups who should review (if applicable)

❤️ Thank you!

@jshawl jshawl closed this May 8, 2023
@jshawl jshawl deleted the improve-a11y branch May 8, 2023 18:42
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.

1 participant