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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 1 commit into from
Oct 15, 2024
Merged

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

merged 1 commit into from
Oct 15, 2024

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.

@netlify Netlify
Copy link

netlify bot commented Oct 13, 2024 •
edited
Loading

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

@netlify Netlify
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
portikM
portikM approved these changes Oct 15, 2024
View reviewed changes
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
@semantic-release-bot
chore(release): 9.11.5 [skip ci]
be5df2d 
## [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
Reviewers

@portikM portikM portikM approved these changes

@adamdehaven adamdehaven Awaiting requested review from adamdehaven adamdehaven is a code owner

@jillztom jillztom Awaiting requested review from jillztom jillztom is a code owner

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Justineo @kongponents-bot @portikM