-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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
feat: Avatar's aria label includes 'active' or 'inactive' when using the active prop #24901
Conversation
…vatar/active-aria-label
📊 Bundle size reportUnchanged fixtures
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 4ff5c63:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: c63200d5cd47dc36f9d8f3ad07c5fecb7e5c6d41 (build) |
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 1586 | 1666 | 5000 | |
Button | mount | 1169 | 1191 | 5000 | |
FluentProvider | mount | 2000 | 1964 | 5000 | |
FluentProviderWithTheme | mount | 800 | 803 | 10 | |
FluentProviderWithTheme | virtual-rerender | 756 | 771 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 773 | 781 | 10 | |
MakeStyles | mount | 2420 | 2430 | 50000 | |
SpinButton | mount | 3125 | 3150 | 5000 |
packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like it!
* master: (21 commits) chore: Migrate react-avatar to use new build (microsoft#24969) applying package updates chore(react-input, react-textarea): Deprecating filled with shadow appearance variants (microsoft#24900) fix: v8 Dropdown no longer sets incorrect and unnecessary aria-activedescendant (microsoft#24593) feat: v0 Tooltip migration from v9 (microsoft#24908) chore: bump devDeps to fix critical security vulnerability (microsoft#24891) Fixing Tree chart issues (microsoft#24752) init: new package react-avatar-context (microsoft#24968) ci(.github): add issues write permisions to triage-bot worflow (microsoft#24963) applying package updates fix(Toolbar): close previous submenu when opening another submenu (microsoft#24836) fix: update non-focus-trap Popover role to be group (microsoft#24897) feat: Avatar's aria label includes 'active' or 'inactive' when using the active prop (microsoft#24901) feat(scripts): implement triage-bot module (microsoft#24911) chore: bump @octokit/rest to v18 (microsoft#24919) stress test: add "build-fixture" command (microsoft#24928) BREAKING-CHANGE: new ChatMessageContent for style caching (microsoft#24691) bugfix: fix changefile to properly update version of react-components with a patch (microsoft#24949) feat(scripts): enable strict checking for additional sub-folders(packages) (microsoft#24526) chore: exports DialogContent as unstable (microsoft#24943) ...
…the active prop (microsoft#24901) Append "active" or "inactive" to the aria label when the `active` prop is set. * When the Avatar is using the `aria-label` prop, simply append the string to it. * If the Avatar needs to use `aria-labelledby`, then render a hidden span with the active label, and append the span's ID to `aria-labelledby` There is no prop to control the strings yet; they are hardcoded for now. In the future, they will be able to be localized once we implement an i18n solution.
Current Behavior
The state of Avatar's
active
prop is conveyed visually via a highlight ring, but not conveyed to accessibility tools.New Behavior
Append "active" or "inactive" to the aria label when the
active
prop is set.aria-label
prop, simply append the string to it.aria-labelledby
, then render a hidden span with the active label, and append the span's ID toaria-labelledby
There is no prop to control the strings yet; they are hardcoded for now. In the future, they will be able to be localized once we implement an i18n solution.
Related Issue(s)