fix(react-infobutton): Add aria-owns to InfoLabel #27834

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.

Sign up for GitHub

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

Jump to bottom

Merged

sopranopillow merged 9 commits into microsoft:master from sopranopillow:react-infobutton/a11y-fix

May 17, 2023

Contributor

sopranopillow commented May 12, 2023 •

edited

Loading

Previous Behavior

aria-owns is not set, therefore the popup is not linked to the trigger.

New Behavior

aria-owns is now set by InfoLabel and a Do has been added advising to add aria-owns to the parent of the trigger.

sopranopillow added 2 commits

May 12, 2023 08:21


          fix: Add aria-owns to infobutton.

d838c50


          change fileS

4915fd2

sopranopillow added this to the May Project Cycle Q2 2023 milestone

sopranopillow self-assigned this

sopranopillow requested a review from a team as a code owner

May 12, 2023 15:24

sopranopillow added Fluent UI react-components (v9) Component: InfoButton labels

codesandbox-ci bot commented May 12, 2023 •

edited

Loading

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 7b50230:

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

size-auditor bot commented May 12, 2023 •

edited

Loading

Asset size changes

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

Baseline commit: 989ead3c07d6df61441f9c6ca8102634e40dc48d (build)

Collaborator

fabricteam commented May 12, 2023 •

edited

Loading

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-infobutton` InfoLabel	`131.26 kB` `40 kB`	`131.447 kB` `40.071 kB`	`187 B` `71 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.855 kB` `17.852 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`203.937 kB` `57.086 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.086 kB` `11.9 kB`
`react-infobutton` InfoButton	`127.977 kB` `39.012 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.186 kB`

_{🤖 This report was generated against 989ead3c07d6df61441f9c6ca8102634e40dc48d}

Collaborator

fabricteam commented May 12, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender-with-unmount	121	133	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	858	864	5000
Button	mount	461	465	5000
Field	mount	1542	1589	5000
FluentProvider	mount	1084	1121	5000
FluentProviderWithTheme	mount	131	147	10
FluentProviderWithTheme	virtual-rerender	108	119	10
FluentProviderWithTheme	virtual-rerender-with-unmount	121	133	10	Possible regression
InfoButton	mount	24	23	5000
MakeStyles	mount	1353	1363	50000
Persona	mount	2342	2353	5000
SpinButton	mount	1917	1854	5000

Collaborator

fabricteam commented May 12, 2023 •

edited

Loading

🕵 fluentuiv9 No visual regressions between this PR and main


          updating aria owns to be added in the infolabel instead

0cb8622

sopranopillow changed the title ~~fix(react-infobutton): Add aria-owns to InfoButton~~ fix(react-infobutton): Add aria-owns to InfoLabel

khmakoto approved these changes

View reviewed changes

behowell reviewed

View reviewed changes

packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts Outdated Show resolved Hide resolved

behowell reviewed

View reviewed changes

packages/react-components/react-infobutton/stories/Infobutton/InfoButtonBestPractices.md Outdated Show resolved Hide resolved

sopranopillow added 5 commits

May 16, 2023 13:20


          add tests and update implementation

47cf023


          Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

b0ae42a

…to react-infobutton/a11y-fix


          changing implementation

9c6c37a


          removing cast

085e5c4


          removing example

8d5275d

sopranopillow requested a review from behowell

May 16, 2023 20:37

behowell approved these changes

View reviewed changes

Contributor

behowell left a comment

One correctness fix (need to check root['aria-owns'] instead), and two optional suggestions. Otherwise looks good, thanks!

packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts Outdated Show resolved Hide resolved

packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts Outdated Show resolved Hide resolved

packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts Outdated Show resolved Hide resolved

behowell mentioned this pull request

feat(react-jsx-runtime): implements next steps (option D) #27753

Closed


          requested changes

7b50230

sopranopillow merged commit c496a1c into microsoft:master

sopranopillow deleted the react-infobutton/a11y-fix branch

May 17, 2023 21:59

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Collaborator

msft-fluent-ui-bot commented May 18, 2023

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request


          Merge branch 'master' into feat/drawer-header

42f3c94

* master: (24 commits)
  chore(react-tabster): upgrade tabster to v4.4.2 (microsoft#27540)
  feat(react-tags): Add TagGroup with context (microsoft#27886)
  applying package updates
  fix(react-infobutton): Add aria-owns to InfoLabel (microsoft#27834)
  fix(recipes-react-components): Add a FluentProvider to the local storybook (microsoft#27746)
  chore: update RFC template (microsoft#27880)
  applying package updates
  feat: implement Toaster offset (microsoft#27854)
  feat(react-drawer): create DrawerFooter component (microsoft#27583)
  Make getKey and selection props mutually exclusive (microsoft#24048)
  Added MIGRATION.md to the Breadcrumb (microsoft#27846)
  update Github CODEOWNERS file (microsoft#27849)
  feat(react-tags): make basic Tag a button instead of div (microsoft#27858)
  chore: add test-ssr script to v9 packages (microsoft#27690)
  chore(react-tree): exports TreeItemAside unstable (microsoft#27856)
  bugfix(react-dialog): removes unnecessary grid gaps (microsoft#27845)
  applying package updates
  fix(react-textarea): Don't remove outline when filled and disabled and apply correct disabled color to text (microsoft#27837)
  feat: Implement limit for toast stacking (microsoft#27848)
  Update README.md for fluent 2 theme to include import instructions (microsoft#27847)
  ...

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request


          Merge branch 'feat/drawer-header' into feat/split-drawer

6e18b63

* feat/drawer-header: (24 commits)
  chore(react-tabster): upgrade tabster to v4.4.2 (microsoft#27540)
  feat(react-tags): Add TagGroup with context (microsoft#27886)
  applying package updates
  fix(react-infobutton): Add aria-owns to InfoLabel (microsoft#27834)
  fix(recipes-react-components): Add a FluentProvider to the local storybook (microsoft#27746)
  chore: update RFC template (microsoft#27880)
  applying package updates
  feat: implement Toaster offset (microsoft#27854)
  feat(react-drawer): create DrawerFooter component (microsoft#27583)
  Make getKey and selection props mutually exclusive (microsoft#24048)
  fix: move style override to outside the component
  Added MIGRATION.md to the Breadcrumb (microsoft#27846)
  update Github CODEOWNERS file (microsoft#27849)
  feat(react-tags): make basic Tag a button instead of div (microsoft#27858)
  chore: add test-ssr script to v9 packages (microsoft#27690)
  chore(react-tree): exports TreeItemAside unstable (microsoft#27856)
  bugfix(react-dialog): removes unnecessary grid gaps (microsoft#27845)
  applying package updates
  fix(react-textarea): Don't remove outline when filled and disabled and apply correct disabled color to text (microsoft#27837)
  feat: Implement limit for toast stacking (microsoft#27848)
  ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Component: InfoButton Fluent UI react-components (v9)