Skip to content

fix: Making PopoverSurface focusable, moving Overflow aria-label to PopoverSurface, and moving content styles to PopoverSurface#24417

Merged
sopranopillow merged 6 commits intomicrosoft:masterfrom
sopranopillow:avatargroup/a11y
Aug 19, 2022
Merged

fix: Making PopoverSurface focusable, moving Overflow aria-label to PopoverSurface, and moving content styles to PopoverSurface#24417
sopranopillow merged 6 commits intomicrosoft:masterfrom
sopranopillow:avatargroup/a11y

Conversation

@sopranopillow
Copy link
Contributor

Current Behavior

Currently Content has most of the styles needed for the Popover Surface, this brings problems with screen readers:

  • aria-modal doesn't have an aria-label.
  • aria-label is in a <ul> therefore there are some listbox problems in Windows where the screen reader mode is changed to forms mode.
  • As a side effect, the styles to handle overflow are in the wrong element.

New Behavior

Makes PopoverSurface focusable, moves Overflow aria-label to PopoverSurface, and moves content styles to PopoverSurface. This fixes the accessibility issues mentioned above.

Related Issue(s)

#23773

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 18, 2022

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 0a06317:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 18, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-alert
Alert
83.79 kB
20.841 kB
react-avatar
Avatar
48.283 kB
13.644 kB
react-avatar
AvatarGroup
15.072 kB
6.016 kB
react-avatar
AvatarGroupItem
68.464 kB
19.067 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
189.031 kB
51.967 kB
react-components
react-components: FluentProvider & webLightTheme
32.895 kB
10.778 kB
🤖 This report was generated against 6853d071ca06579092a9cc3660fe9943479492d6

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 18, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1554 1572 5000
Button mount 1206 1178 5000
FluentProvider mount 1992 1979 5000
FluentProviderWithTheme mount 812 775 10
FluentProviderWithTheme virtual-rerender 722 730 10
FluentProviderWithTheme virtual-rerender-with-unmount 767 817 10
MakeStyles mount 2365 2327 50000
SpinButton mount 3060 3046 5000

@size-auditor
Copy link

size-auditor bot commented Aug 18, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 6853d071ca06579092a9cc3660fe9943479492d6 (build)

Copy link
Contributor

@smhigley smhigley left a comment

Choose a reason for hiding this comment

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

Just checked, and both NVDA and JAWS are working perfectly with the fix 😊

…oupPopover/useAvatarGroupPopoverStyles.ts

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
@sopranopillow sopranopillow merged commit 4de0899 into microsoft:master Aug 19, 2022
@sopranopillow sopranopillow deleted the avatargroup/a11y branch August 19, 2022 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants