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

fix(klabel): fix aria attributes on tooltip icon #2454

Merged
merged 1 commit into from
Oct 15, 2024
Merged

Conversation

Justineo
Copy link
Contributor

Summary

We are now getting a console error when we focused on a tooltip icon:

Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

So I made some changes according to the spec:

  • Removed decorative for the icon
  • Moved aria-describedby on label to the icon as <label> is Naming prohibited.

@Justineo Justineo requested review from adamdehaven, jillztom and a team as code owners October 13, 2024 12:12
Copy link

netlify bot commented Oct 13, 2024

Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit 7ef2c12
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/670bb92eea72ca000868f4c7
😎 Deploy Preview https://deploy-preview-2454--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Oct 13, 2024

Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit 7ef2c12
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/670bb92e72fce4000859fcfc
😎 Deploy Preview https://deploy-preview-2454--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Justineo Justineo enabled auto-merge (squash) October 13, 2024 12:15
Copy link
Member

@portikM portikM left a comment

Choose a reason for hiding this comment

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

LGTM 🚀

@Justineo Justineo merged commit 7201572 into main Oct 15, 2024
11 checks passed
@Justineo Justineo deleted the fix/klabel-aria branch October 15, 2024 15:45
kongponents-bot pushed a commit that referenced this pull request Oct 15, 2024
## [9.11.5](v9.11.4...v9.11.5) (2024-10-15)

### Bug Fixes

* **kinput:** prevent focus loss on icon/button click ([#2453](#2453)) ([c536de7](c536de7))
* **klabel:** fix aria attributes on tooltip icon ([#2454](#2454)) ([7201572](7201572))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 9.11.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

@kongponents-bot
Copy link
Collaborator

Preview package from this PR in consuming application

In consuming application project install preview version of kongponents generated by this PR:

@kong/kongponents@pr-2454

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants