A11y revamp: Pharos buttons (non-breaking change) #628
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sirrah-tam
requested review from
SMQuazi,
mtorres3 and
shoupeva-ithaka
and removed request for
a team
🦋 Changeset detectedLatest commit: b1779ec The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
daneah
reviewed
Oct 16, 2023
Co-authored-by: Dane Hillard <[email protected]>
Co-authored-by: Dane Hillard <[email protected]>
…tam/pharos into feature/non-breaking-a11y-button
Closed
shoupeva-ithaka
approved these changes
Dec 5, 2023
daneah
reviewed
Dec 5, 2023
Co-authored-by: Dane Hillard <[email protected]>
daneah
approved these changes
Dec 5, 2023
brentswisher
reviewed
Dec 8, 2023
…tam/pharos into feature/non-breaking-a11y-button
brentswisher
approved these changes
Dec 8, 2023
sirrah-tam
added a commit
to sirrah-tam/pharos
that referenced
this pull request
Dec 8, 2023
Squashed commit of the following: commit 9ef1e18 Author: Mat Harris <[email protected]> Date: Fri Dec 8 12:06:10 2023 -0500 A11y revamp: Pharos buttons (non-breaking change) (ithaka#628) * docs: add @sirrah-tam as a contributor * feat(button): add a11y naming convention for aria * feat(button): add aria-description support * chore: add changset * Update packages/pharos/src/components/button/pharos-button.ts Co-authored-by: Dane Hillard <[email protected]> * Update packages/pharos/src/components/button/pharos-button.ts Co-authored-by: Dane Hillard <[email protected]> * feat(button): move property deprecated flag * fix(button): remove ts-ignore after lit upgrade * feat(button): add a11y state typing * fix: add TODO for future reference Co-authored-by: Dane Hillard <[email protected]> * fix(a11y attributes): update AriaHiddenState name --------- Co-authored-by: Dane Hillard <[email protected]>
daneah
added a commit
that referenced
this pull request
Dec 19, 2023
* develop: A11y revamp: Pharos buttons (non-breaking change) (#628) Radio, Checkbox: Fix group label (#652) Add elevation tokens and documentation (#643) fix(sidenav-link): external link opens in new tab (#645) Upgrade to TypeScript 5 (#644) feat(cli): add newly created components created using pharos-cli to initComponents files (#630) chore: version packages (#640) Coach Mark: Fix react component positioning (#638) Coach Mark: Documentation fixes (#639) chore(deps): bump @babel/traverse from 7.20.0 to 7.23.2 (#637) chore: version packages (#636) Icon: Add Panorama icon (#631) chore: version packages (#629) Loading spinner: add small and on background variant (#627) chore: version packages (#626) Sheet: allow expansion with attribute (#625) fix(button): remove fill on subtle disabled button on background (#618) chore(deps-dev): bump postcss from 8.4.25 to 8.4.31 (#624) chore: version packages (#623) Sheet: Add more close options and transition timing function (#620)
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This change: (check at least one)
Is this a breaking change? (check one)
Is the: (complete all)
What does this change address?
This updates the Pharos Button to allow consumers to pass in attributes (listed below) following a specific naming convention (a11y-) that assign the appropriate ARIA attribute to the inner element. This addresses the issues with custom web components and the shadow DOM and use of ARIA not being properly being parsed by assistive technologies.
How does this change work?
element.Consumers can add these attributes along with the proper value to the Pharos Button and the appropriate ARIA attribute will be added to the underlying
Additional context
This is not a breaking change as consumers are still able to utilize the
labelattribute, but does add a browser warning about the deprecatedlabelattribute. The major release (v14) will include PR #594 and will remove all backwards compatibility as we include additional breaking changes. Additionally, all uses of ARIA listed above currently on the Pharos button will need to be updated accordingly to work as expected.