Skip to content

fix(react-drawer): do not create global header/footer roles#31799

Merged
marcosmoura merged 2 commits into
microsoft:masterfrom
smhigley:drawer-roles
Jun 26, 2024
Merged

fix(react-drawer): do not create global header/footer roles#31799
marcosmoura merged 2 commits into
microsoft:masterfrom
smhigley:drawer-roles

Conversation

@smhigley

Copy link
Copy Markdown
Contributor

Previous Behavior

The native <header> and <footer> elements create global landmarks unless they are wrapped by a sectioning element (not just section, there are a few more). Right now, dialog does not count as a sectioning element, though it probably should.

Till it does, we should override the auto-calculated roles for the header/footer elements.

New Behavior

Adds role=none, so header/footer elements in the Drawer are given globally scoped landmark roles.

Related Issue(s)

@smhigley
smhigley requested review from a team and marcosmoura as code owners June 24, 2024 20:31
@github-actions github-actions Bot added this to the April Project Cycle Q1 2024 milestone Jun 24, 2024
@fabricteam

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.094 MB
270.62 kB
1.094 MB
270.629 kB
24 B
9 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
211.741 kB
60.957 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
104.384 kB
34.782 kB
🤖 This report was generated against 9f13dee5c8a1e6f2c9ce99494a26ea195e8a4ce6

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 36 36 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 643 694 5000
Button mount 316 311 5000
Field mount 1133 1165 5000
FluentProvider mount 753 753 5000
FluentProviderWithTheme mount 89 94 10
FluentProviderWithTheme virtual-rerender 36 36 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 77 88 10
MakeStyles mount 892 928 50000
Persona mount 1795 1758 5000
SpinButton mount 1438 1388 5000
SwatchPicker mount 1661 1678 5000

@marcosmoura marcosmoura added the Component: Drawer The Fluent v9 Drawer component label Jun 25, 2024
@marcosmoura marcosmoura changed the title fix: do not create global header/footer roles in Drawer fix(react-drawer): do not create global header/footer roles Jun 26, 2024
@marcosmoura
marcosmoura merged commit 44fc664 into microsoft:master Jun 26, 2024
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jun 26, 2024
* master: (90 commits)
  fix(react-drawer): do not create global header/footer roles (microsoft#31799)
  release: applying package updates - react v8
  release: applying package updates - web-components
  Add 'allowParentArrowNavigation' prop to `ComboBox`. (microsoft#31805)
  Add drawer web component (microsoft#31521)
  fix: MenuButton is styled correctly when aria-expanded is a string (microsoft#31809)
  chore: Updating version of `@fluentui/react-icons` to `^2.0.245` (microsoft#31802)
  chore:(docs) Migrate e2e Cypress testing doc (microsoft#31796)
  chore:(docs) Update API Extractor file (microsoft#31651)
  chore: migrate to nx 18 (microsoft#31746)
  release: applying package updates - react v8
  release: applying package updates - web-components
  feat: update text to use element internals for custom states (microsoft#31770)
  chore(web-components): Remove define imports from story modules (microsoft#31622)
  fix(`merge-styles`): Correctly processing selectors when value is a class name and they are not wrapped in `selectors` wrapper (microsoft#31798)
  style(react-combobox): turn off react-compiler lints for non compliant code (microsoft#31795)
  docs: Add AriaLiveAnnouncer to all examples (microsoft#31794)
  fix(public-docsite-v9): disable storybook keyboard shortcuts (microsoft#31762)
  feat: V0 Attachment compact component (microsoft#31634)
  release: applying package updates - react v8
  ...
@smhigley
smhigley deleted the drawer-roles branch June 26, 2024 22:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area: Accessibility Component: Drawer The Fluent v9 Drawer component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants