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

Improve accessibility by using tooltip as fallback for ariaLabel in KIconButton #798

Merged

Conversation

shivam-daksh
Copy link
Contributor

@shivam-daksh shivam-daksh commented Oct 8, 2024

Description

This PR addresses an accessibility issue in the KIconButton component. Previously, the ariaLabel and tooltip props were treated independently, and it was possible for a developer to omit the ariaLabel prop while setting a tooltip. This could lead to accessibility issues, as ariaLabel is essential for screen readers, but the tooltip is not.

Issue addressed

#793

Addresses
It is resolved by the adding a new custom computed property computedAriaLabel which will dynamically sets the ariaLabel and tooltip props.

Before/after screenshots

Changelog

  • Description: Adds custom computed property computedAriaLabel that dynamically sets the ariaLabel for KIconButton based on the tooltip prop when ariaLabel is not provided.
  • Products impact: none
  • Addresses: KIconButton: Set tooltip value as fallback if ariaLabel is missing #793
  • Components: KIconButton
  • Breaking: no
  • Impacts a11y: Improves accessibility in places where we have tooltips but no aria- label attribute set for KIconbutton.
  • Guidance: -

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

  • Contributor has fully tested the PR manually
  • If there are any front-end changes, before/after screenshots are included
  • Critical and brittle code paths are covered by unit tests
  • The change is described in the changelog section above

Reviewer guidance

  • Is the code clean and well-commented?
  • Are there tests for this change?
  • Are all UI components LTR and RTL compliant (if applicable)?
  • Add other things to check for here

Comments

Copy link
Member

@LianaHarris360 LianaHarris360 left a comment

Choose a reason for hiding this comment

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

The code changes are clean and correctly sets the aria-label attribute using the tooltip property as needed. I updated the ChangeLog section so that the Github action could set it as well. Thank you @shivam-daksh

@LianaHarris360 LianaHarris360 merged commit 0168464 into learningequality:develop Oct 9, 2024
8 of 9 checks passed
learning-equality-bot bot pushed a commit that referenced this pull request Oct 9, 2024
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.

2 participants