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.

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

add a utility to convert tab names with spaces to dashes, fix a11y check for aria-controls #7766

Merged

Conversation

josefaidt
Copy link
Contributor

…eck for aria-controls

Description of changes:

This PR adds a utility function to convert tab "names" to valid values for underlying aria-controls attributes that are added with the UI primitives.

Fix all of the following:
  Invalid ARIA attribute value: aria-controls="Facebook Login-panel"

https://github.com/aws-amplify/docs/actions/runs/9589449155/job/26443227531?pr=7747

Instead of

Facebook Login-panel

it will be

facebook-login-panel

this also updates the ID value in the panel element

<div role="tabpanel" id="Facebook Login-panel" aria-labelledby="Facebook Login-tab" class="amplify-tabs__panel amplify-tabs__panel--active">

Related GitHub issue #, if available:

Instructions

If this PR should not be merged upon approval for any reason, please submit as a DRAFT

Which product(s) are affected by this PR (if applicable)?

  • amplify-cli
  • amplify-ui
  • amplify-studio
  • amplify-hosting
  • amplify-libraries

Which platform(s) are affected by this PR (if applicable)?

  • JS
  • Swift
  • Android
  • Flutter
  • React Native

Please add the product(s)/platform(s) affected to the PR title

Checks

  • Does this PR conform to the styleguide?

  • Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.

  • Are any files being deleted with this PR? If so, have the needed redirects been created?

  • Are all links in MDX files using the MDX link syntax rather than HTML link syntax?

    ref: MDX: [link](https://docs.amplify.aws/)
    HTML: <a href="https://docs.amplify.aws/">link</a>

When this PR is ready to merge, please check the box below

  • Ready to merge

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

@josefaidt josefaidt requested a review from a team as a code owner June 20, 2024 15:14
Copy link
Contributor

@hbuchel hbuchel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @josefaidt! Just the note about duplicate IDs.

Copy link
Contributor

@hbuchel hbuchel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Ran it through Axe, Voiceover, and pa11y.

@josefaidt josefaidt enabled auto-merge (squash) June 20, 2024 16:54
@josefaidt josefaidt merged commit d5403a7 into aws-amplify:main Jun 20, 2024
11 checks passed
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.

None yet

4 participants