feat(button): improve accessibility #IX-3930#2399
Conversation
🦋 Changeset detectedLatest commit: f91a6fb The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Summary of ChangesHello @alexkaduk, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the accessibility of button components, particularly for icon-only buttons, by implementing proper ARIA attributes. It also introduces automated accessibility testing using Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
alexkaduk
force-pushed
the
feature/IX-3930
branch
from
7398061 to
a7175f1
Compare
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request significantly improves the accessibility of button components by adding aria-label attributes, particularly for icon-only buttons, and integrates axe-core for automated accessibility testing. The changes are well-implemented, including the deprecation of the ariaLabelButton prop in favor of the native aria-label. I've identified some minor issues in the example files where button states are unintentionally shared, which could be confusing for developers using the examples. Overall, this is a valuable contribution that enhances both accessibility and testing infrastructure.
packages/angular-standalone-test-app/src/preview-examples/button-loading.html
Show resolved
Hide resolved
alexkaduk
force-pushed
the
feature/IX-3930
branch
from
a7175f1 to
aa6d70a
Compare
|
/gemini help |
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. |
|
/gemini review |
There was a problem hiding this comment.
Code Review
The pull request introduces significant accessibility improvements for button components, including the addition of aria-label for icon-only buttons and the integration of automated accessibility testing using axe-core. It also adds new danger button variants and updates examples to follow accessible patterns. Overall, the changes are well-aligned with accessibility best practices, though there are a few areas where the implementation could be more robust or where testing coverage might have been unintentionally reduced.
packages/angular-standalone-test-app/src/preview-examples/button-loading.html
Outdated
Show resolved
Hide resolved
alexkaduk
force-pushed
the
feature/IX-3930
branch
from
22e1c9a to
ce8a906
Compare
packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx
Outdated
Show resolved
Hide resolved
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces significant accessibility improvements to the button components, most notably by integrating axe-core for automated testing and standardizing on native aria-label attributes. The changes are well-implemented and consistent across the different framework wrappers. I've identified a minor inconsistency in the ix-icon-toggle-button that could be improved for better accessibility, and a suggestion to reduce code duplication in one of the React examples. Overall, this is an excellent contribution that enhances the project's quality and accessibility.
|
2 participants
💡 What is the current behavior?
Button components lack proper accessibility attributes for screen readers, particularly icon-only buttons that have no visible text labels. Additionally, there is no automated accessibility testing in place to ensure AA compliance.
🆕 What is the new behavior?
Accessibility Improvements:
Testing Enhancements:
Component Updates:
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)