Skip to content

fix: Pivot overflow role uses tab#28409

Merged
smhigley merged 2 commits into
microsoft:masterfrom
smhigley:tab-overflow-role
Jul 14, 2023
Merged

fix: Pivot overflow role uses tab#28409
smhigley merged 2 commits into
microsoft:masterfrom
smhigley:tab-overflow-role

Conversation

@smhigley

Copy link
Copy Markdown
Contributor

Previous Behavior

We were exposing the overflow button as a menu button rather than a tab. The pros and cons of each approach are pretty even -- in functionality it's a menubutton, but it's more expected to encounter a tab within a tablist. The reason for this change is that a menubutton within a tablist triggers an automated error, and a tab does not, and also likely does not have meaningful known user-facing drawbacks. This will also match the semantics used in v9's TabList.

New Behavior

The overflow button uses the tab role.

Related Issue(s)

@codesandbox-ci

Copy link
Copy Markdown

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

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

@fabricteam

Copy link
Copy Markdown
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

🤖 This report was generated against e4ef333f187d19408a2445aee5c904bd584d21ef

@size-auditor

size-auditor Bot commented Jun 30, 2023

Copy link
Copy Markdown

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Pivot 181.879 kB 181.89 kB ExceedsBaseline     11 bytes
office-ui-fabric-react fluentui-react-northstar-Debug 10.621 kB  Deleted       BelowBaseline     -10.621 kB
office-ui-fabric-react fluentui-react-northstar-Design 36.723 kB  Deleted       BelowBaseline     -36.723 kB
office-ui-fabric-react fluentui-react-northstar-SvgIcon 37.687 kB  Deleted       BelowBaseline     -37.687 kB
office-ui-fabric-react fluentui-react-northstar-Flex 48.871 kB  Deleted       BelowBaseline     -48.871 kB
office-ui-fabric-react fluentui-react-northstar-Animation 56.773 kB  Deleted       BelowBaseline     -56.773 kB
office-ui-fabric-react fluentui-react-northstar-Portal 59.811 kB  Deleted       BelowBaseline     -59.811 kB
office-ui-fabric-react fluentui-react-northstar-Grid 72.891 kB  Deleted       BelowBaseline     -72.891 kB
office-ui-fabric-react fluentui-react-northstar-Image 76.159 kB  Deleted       BelowBaseline     -76.159 kB
office-ui-fabric-react fluentui-react-northstar-Text 76.755 kB  Deleted       BelowBaseline     -76.755 kB
office-ui-fabric-react fluentui-react-northstar-TextArea 76.883 kB  Deleted       BelowBaseline     -76.883 kB
office-ui-fabric-react fluentui-react-northstar-Header 77.448 kB  Deleted       BelowBaseline     -77.448 kB
office-ui-fabric-react fluentui-react-northstar-Box 77.974 kB  Deleted       BelowBaseline     -77.974 kB
office-ui-fabric-react fluentui-react-northstar-Layout 78.055 kB  Deleted       BelowBaseline     -78.055 kB
office-ui-fabric-react fluentui-react-northstar-Video 78.187 kB  Deleted       BelowBaseline     -78.187 kB
office-ui-fabric-react fluentui-react-northstar-Segment 78.983 kB  Deleted       BelowBaseline     -78.983 kB
office-ui-fabric-react fluentui-react-northstar-Status 79.184 kB  Deleted       BelowBaseline     -79.184 kB
office-ui-fabric-react fluentui-react-northstar-Divider 79.414 kB  Deleted       BelowBaseline     -79.414 kB
office-ui-fabric-react fluentui-react-northstar-Reaction 80.16 kB  Deleted       BelowBaseline     -80.16 kB
office-ui-fabric-react fluentui-react-northstar-Skeleton 80.46 kB  Deleted       BelowBaseline     -80.46 kB
office-ui-fabric-react fluentui-react-northstar-Label 80.804 kB  Deleted       BelowBaseline     -80.804 kB
office-ui-fabric-react fluentui-react-northstar-ItemLayout 80.989 kB  Deleted       BelowBaseline     -80.989 kB
office-ui-fabric-react fluentui-react-northstar-Loader 81.579 kB  Deleted       BelowBaseline     -81.579 kB
office-ui-fabric-react fluentui-react-northstar-Breadcrumb 82.964 kB  Deleted       BelowBaseline     -82.964 kB
office-ui-fabric-react fluentui-react-northstar-Checkbox 83.063 kB  Deleted       BelowBaseline     -83.063 kB
office-ui-fabric-react fluentui-react-northstar-Avatar 83.329 kB  Deleted       BelowBaseline     -83.329 kB
office-ui-fabric-react fluentui-react-northstar-Table 84.172 kB  Deleted       BelowBaseline     -84.172 kB
office-ui-fabric-react fluentui-react-northstar-Embed 84.77 kB  Deleted       BelowBaseline     -84.77 kB
office-ui-fabric-react fluentui-react-northstar-Card 85.931 kB  Deleted       BelowBaseline     -85.931 kB
office-ui-fabric-react fluentui-react-northstar-Button 86.433 kB  Deleted       BelowBaseline     -86.433 kB
office-ui-fabric-react fluentui-react-northstar-RadioGroup 86.755 kB  Deleted       BelowBaseline     -86.755 kB
office-ui-fabric-react fluentui-react-northstar-Pill 86.879 kB  Deleted       BelowBaseline     -86.879 kB
office-ui-fabric-react fluentui-react-northstar-Slider 87.909 kB  Deleted       BelowBaseline     -87.909 kB
office-ui-fabric-react fluentui-react-northstar-Accordion 89.075 kB  Deleted       BelowBaseline     -89.075 kB
office-ui-fabric-react fluentui-react-northstar-Attachment 90.341 kB  Deleted       BelowBaseline     -90.341 kB
office-ui-fabric-react fluentui-react-northstar-Alert 91.103 kB  Deleted       BelowBaseline     -91.103 kB
office-ui-fabric-react fluentui-react-northstar-Tree 91.442 kB  Deleted       BelowBaseline     -91.442 kB
office-ui-fabric-react fluentui-react-northstar-Input 91.733 kB  Deleted       BelowBaseline     -91.733 kB
office-ui-fabric-react fluentui-react-northstar-List 92.24 kB  Deleted       BelowBaseline     -92.24 kB
office-ui-fabric-react fluentui-react-northstar-Provider 94.914 kB  Deleted       BelowBaseline     -94.914 kB
office-ui-fabric-react fluentui-react-northstar-Form 96.154 kB  Deleted       BelowBaseline     -96.154 kB
office-ui-fabric-react fluentui-react-northstar-Carousel 109.432 kB  Deleted       BelowBaseline     -109.432 kB
office-ui-fabric-react fluentui-react-northstar-Tooltip 112.1 kB  Deleted       BelowBaseline     -112.1 kB
office-ui-fabric-react fluentui-react-northstar-Dialog 117.057 kB  Deleted       BelowBaseline     -117.057 kB
office-ui-fabric-react fluentui-react-northstar-Menu 132.497 kB  Deleted       BelowBaseline     -132.497 kB
office-ui-fabric-react fluentui-react-northstar-Popup 138.468 kB  Deleted       BelowBaseline     -138.468 kB
office-ui-fabric-react fluentui-react-northstar-Chat 159.446 kB  Deleted       BelowBaseline     -159.446 kB
office-ui-fabric-react fluentui-react-northstar-MenuButton 168.377 kB  Deleted       BelowBaseline     -168.377 kB
office-ui-fabric-react fluentui-react-northstar-Toolbar 180.854 kB  Deleted       BelowBaseline     -180.854 kB
office-ui-fabric-react fluentui-react-northstar-SplitButton 184.697 kB  Deleted       BelowBaseline     -184.697 kB
office-ui-fabric-react fluentui-react-northstar-Datepicker 193.768 kB  Deleted       BelowBaseline     -193.768 kB
office-ui-fabric-react fluentui-react-northstar-Dropdown 203.774 kB  Deleted       BelowBaseline     -203.774 kB

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: e4ef333f187d19408a2445aee5c904bd584d21ef (build)

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 635 635 5000
Breadcrumb mount 1699 1688 1000
Checkbox mount 1674 1695 5000
CheckboxBase mount 1498 1458 5000
ChoiceGroup mount 2993 2893 5000
ComboBox mount 671 672 1000
CommandBar mount 6151 6230 1000
ContextualMenu mount 11259 11999 1000
DefaultButton mount 737 737 5000
DetailsRow mount 2178 2151 5000
DetailsRowFast mount 2126 2165 5000
DetailsRowNoStyles mount 1989 1963 5000
Dialog mount 2663 2631 1000
DocumentCardTitle mount 219 231 1000
Dropdown mount 1982 1959 5000
FocusTrapZone mount 1136 1135 5000
FocusZone mount 1074 1043 5000
GroupedList mount 40902 40828 2
GroupedList virtual-rerender 19809 19829 2
GroupedList virtual-rerender-with-unmount 50605 50686 2
GroupedListV2 mount 227 242 2
GroupedListV2 virtual-rerender 210 211 2
GroupedListV2 virtual-rerender-with-unmount 226 235 2
IconButton mount 1069 1095 5000
Label mount 326 340 5000
Layer mount 2731 2724 5000
Link mount 398 385 5000
MenuButton mount 932 932 5000
MessageBar mount 21603 21538 5000
Nav mount 1914 1929 1000
OverflowSet mount 805 768 5000
Panel mount 1771 1757 1000
Persona mount 742 776 1000
Pivot mount 870 871 1000
PrimaryButton mount 866 848 5000
Rating mount 4623 4544 5000
SearchBox mount 897 913 5000
Shimmer mount 1860 1904 5000
Slider mount 1330 1315 5000
SpinButton mount 2914 2856 5000
Spinner mount 390 387 5000
SplitButton mount 1787 1859 5000
Stack mount 413 415 5000
StackWithIntrinsicChildren mount 874 848 5000
StackWithTextChildren mount 2702 2649 5000
SwatchColorPicker mount 6016 6141 5000
TagPicker mount 1452 1415 5000
Text mount 378 371 5000
TextField mount 967 931 5000
ThemeProvider mount 821 828 5000
ThemeProvider virtual-rerender 600 591 5000
ThemeProvider virtual-rerender-with-unmount 1266 1298 5000
Toggle mount 610 600 5000
buttonNative mount 191 194 5000

@smhigley
smhigley merged commit dbce79b into microsoft:master Jul 14, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jul 18, 2023
* master:
  ci(bundlesize): opt out using --since as lightrail doesnt support this behaviour and needs everything build on every PR (microsoft#28545)
  feat: automatically add v9 package stories to public docsite and correctly create codesandbox demo source code (microsoft#28528)
  applying package updates
  Keytips: Align keytipData with visible instance for dupes (microsoft#28522)
  applying package updates
  V8 Fluent2 Theme: Spinner sizes (microsoft#28512)
  feat: add extra-tiny size value to size prop (microsoft#28249)
  feat(react-infobutton): Remove InfoIcon from react-infobutton (microsoft#28534)
  Made Breadcrumb package public (microsoft#28549)
  X bars showing incorrect data when the values are large- bug 8380 (microsoft#28510)
  feat(tools): implement `prepare-initial-release` generator (microsoft#28505)
  feat: release react-breadcrumb to preview (microsoft#28402)
  applying package updates
  fix: v8 SplitButton and split MenuItem have two touch targets when checkable (microsoft#28523)
  fix(react-infobutton): Apply aria-owns only when the popover is open and cleanup infobutton stories (microsoft#28463)
  fix: Pivot overflow role uses tab (microsoft#28409)
  Migrate react-search to preview (microsoft#28531)
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.

6 participants