Skip to content

Pickers: Improving picker tag selection accessibility#17723

Merged
smhigley merged 9 commits into
microsoft:masterfrom
smhigley:picker-selection
Apr 12, 2021
Merged

Pickers: Improving picker tag selection accessibility#17723
smhigley merged 9 commits into
microsoft:masterfrom
smhigley:picker-selection

Conversation

@smhigley

@smhigley smhigley commented Apr 7, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor

Pull request checklist

Description of changes

Does a bunch of co-dependent updates on the picker's selected tags, since interaction is tied to roles, which is then tied to naming 😅. The changes are:

  • FocusZone is removed by default, though the attributes and public methods are left in, so (hopefully) someone could wrap a picker in their own FocusZone if they wanted to
  • The selected tag listitems are not focusable or interactive; only the remove buttons are interactive and focusable
  • The remove buttons are named by the tag they remove
  • The selection list has a property to give it a unique aria-label, and it falls back on the aria-label of the picker, if provided
  • All the picker examples are updated to have good names passed in

@joschect joschect requested a review from Vitalius1 April 7, 2021 00:00
@codesandbox-ci

codesandbox-ci Bot commented Apr 7, 2021 •
edited
Loading

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 77f219d:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

joschect
joschect approved these changes Apr 7, 2021
View reviewed changes
Comment thread packages/react/src/components/pickers/TagPicker/TagItem.tsx Outdated
@size-auditor

size-auditor Bot commented Apr 8, 2021 •
edited
Loading

Copy link
Copy Markdown

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Pickers 268.618 kB 268.963 kB ExceedsBaseline     345 bytes

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

Baseline commit: b9f592ba4ac2003b852221672bea3fc8c2e9d485 (build)

@fabricteam

fabricteam commented Apr 8, 2021 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 949 903 5000
BaseButton mount 901 924 5000
Breadcrumb mount 44740 44439 5000
ButtonNext mount 580 574 5000
Checkbox mount 1624 1526 5000
CheckboxBase mount 1287 1275 5000
ChoiceGroup mount 4719 4726 5000
ComboBox mount 982 985 1000
CommandBar mount 10130 10105 1000
ContextualMenu mount 6226 6277 1000
DefaultButton mount 1118 1130 5000
DetailsRow mount 3644 3635 5000
DetailsRowFast mount 3649 3665 5000
DetailsRowNoStyles mount 3501 3403 5000
Dialog mount 1474 1437 1000
DocumentCardTitle mount 1829 1819 1000
Dropdown mount 3239 3204 5000
FocusTrapZone mount 1778 1796 5000
FocusZone mount 1801 1810 5000
IconButton mount 1721 1690 5000
Label mount 326 348 5000
Layer mount 1755 1816 5000
Link mount 461 473 5000
MakeStyles mount 1776 1790 50000
MenuButton mount 1438 1443 5000
MessageBar mount 2029 2041 5000
Nav mount 3270 3222 1000
OverflowSet mount 1032 1047 5000
Panel mount 1331 1413 1000
Persona mount 829 834 1000
Pivot mount 1378 1387 1000
PrimaryButton mount 1275 1249 5000
Rating mount 7574 7539 5000
SearchBox mount 1291 1283 5000
Shimmer mount 2532 2541 5000
Slider mount 1916 1945 5000
SpinButton mount 4999 4896 5000
Spinner mount 403 423 5000
SplitButton mount 3121 3149 5000
Stack mount 507 510 5000
StackWithIntrinsicChildren mount 1567 1527 5000
StackWithTextChildren mount 4464 4500 5000
SwatchColorPicker mount 10133 10088 5000
Tabs mount 1387 1387 1000
TagPicker mount 2845 2345 5000
TeachingBubble mount 11805 11796 5000
Text mount 423 414 5000
TextField mount 1383 1345 5000
ThemeProvider mount 1201 1228 5000
ThemeProvider virtual-rerender 592 594 5000
ThemeProviderNext mount 15895 16006 5000
Toggle mount 816 798 5000
buttonNative mount 119 114 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.48 0.35:1 2000 340
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 540
🔧 Checkbox.Fluent 0.63 0.35 1.8:1 1000 632
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 742
🔧 Dropdown.Fluent 3.1 0.39 7.95:1 1000 3104
🔧 Icon.Fluent 0.12 0.06 2:1 5000 618
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 382
🔧 Slider.Fluent 1.54 0.46 3.35:1 1000 1542
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 353
🦄 Tooltip.Fluent 0.14 0.9 0.16:1 5000 700

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
DividerMinimalPerf.default 387 355 1.09:1
ButtonMinimalPerf.default 185 175 1.06:1
HeaderMinimalPerf.default 382 362 1.06:1
AvatarMinimalPerf.default 205 195 1.05:1
FormMinimalPerf.default 423 404 1.05:1
AccordionMinimalPerf.default 173 167 1.04:1
LayoutMinimalPerf.default 377 361 1.04:1
ChatMinimalPerf.default 622 601 1.03:1
MenuMinimalPerf.default 922 892 1.03:1
StatusMinimalPerf.default 690 672 1.03:1
AttachmentSlotsPerf.default 1150 1133 1.02:1
ButtonSlotsPerf.default 574 561 1.02:1
ButtonUseCssPerf.default 816 803 1.02:1
DropdownManyItemsPerf.default 701 689 1.02:1
SkeletonMinimalPerf.default 379 370 1.02:1
TextMinimalPerf.default 356 350 1.02:1
TreeWith60ListItems.default 193 189 1.02:1
Dialog.Fluent 742 727 1.02:1
Icon.Fluent 618 604 1.02:1
AnimationMinimalPerf.default 416 411 1.01:1
BoxMinimalPerf.default 355 350 1.01:1
ButtonUseCssNestingPerf.default 1084 1072 1.01:1
CheckboxMinimalPerf.default 2757 2730 1.01:1
DatepickerMinimalPerf.default 45920 45416 1.01:1
DropdownMinimalPerf.default 3078 3060 1.01:1
FlexMinimalPerf.default 293 290 1.01:1
InputMinimalPerf.default 1265 1257 1.01:1
ItemLayoutMinimalPerf.default 1255 1238 1.01:1
ListNestedPerf.default 556 549 1.01:1
ListWith60ListItems.default 658 654 1.01:1
PopupMinimalPerf.default 713 705 1.01:1
RadioGroupMinimalPerf.default 440 436 1.01:1
TableManyItemsPerf.default 1968 1940 1.01:1
TableMinimalPerf.default 411 405 1.01:1
Avatar.Fluent 340 337 1.01:1
Checkbox.Fluent 632 625 1.01:1
Dropdown.Fluent 3104 3077 1.01:1
HeaderSlotsPerf.default 749 751 1:1
ImageMinimalPerf.default 386 387 1:1
ListCommonPerf.default 639 637 1:1
ProviderMergeThemesPerf.default 1664 1664 1:1
ProviderMinimalPerf.default 994 998 1:1
SliderMinimalPerf.default 1569 1568 1:1
SplitButtonMinimalPerf.default 3693 3697 1:1
IconMinimalPerf.default 632 634 1:1
CustomToolbarPrototype.default 3848 3844 1:1
AttachmentMinimalPerf.default 166 168 0.99:1
ButtonOverridesMissPerf.default 1687 1698 0.99:1
CardMinimalPerf.default 550 556 0.99:1
EmbedMinimalPerf.default 4137 4183 0.99:1
GridMinimalPerf.default 343 347 0.99:1
LabelMinimalPerf.default 392 395 0.99:1
RosterPerf.default 1150 1163 0.99:1
Button.Fluent 540 546 0.99:1
Slider.Fluent 1542 1554 0.99:1
Text.Fluent 353 356 0.99:1
Tooltip.Fluent 700 709 0.99:1
DialogMinimalPerf.default 742 754 0.98:1
ListMinimalPerf.default 497 509 0.98:1
MenuButtonMinimalPerf.default 1563 1592 0.98:1
PortalMinimalPerf.default 173 176 0.98:1
TextAreaMinimalPerf.default 487 497 0.98:1
ToolbarMinimalPerf.default 943 965 0.98:1
TooltipMinimalPerf.default 971 992 0.98:1
Image.Fluent 382 388 0.98:1
CarouselMinimalPerf.default 461 476 0.97:1
LoaderMinimalPerf.default 691 715 0.97:1
ReactionMinimalPerf.default 369 380 0.97:1
SegmentMinimalPerf.default 353 363 0.97:1
ChatDuplicateMessagesPerf.default 297 310 0.96:1
ChatWithPopoverPerf.default 384 402 0.96:1
TreeMinimalPerf.default 773 810 0.95:1
RefMinimalPerf.default 247 264 0.94:1
VideoMinimalPerf.default 593 629 0.94:1
AlertMinimalPerf.default 276 300 0.92:1

@smhigley smhigley marked this pull request as ready for review April 8, 2021 19:24
@khmakoto khmakoto changed the title Picker tag selection accessibility Pickers: Improving picker tag selection accessibility Apr 10, 2021
khmakoto
khmakoto approved these changes Apr 10, 2021
View reviewed changes
Comment thread packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot
Comment thread packages/react/src/components/pickers/BasePicker.tsx
Comment thread packages/react/src/components/pickers/BasePicker.types.ts Outdated
@smhigley smhigley merged commit 05b6379 into microsoft:master Apr 12, 2021
@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot msft-fluent-ui-bot mentioned this pull request Apr 13, 2021
Closed
@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot

msft-fluent-ui-bot commented Apr 13, 2021

Copy link
Copy Markdown
Collaborator

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

Handy links:

This was referenced Apr 13, 2021
Closed
Closed
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@smhigley @miroslavstastny
Pickers: Improving picker tag selection accessibility (microsoft#17723)
caf7c45 
Picker selected tags are now tabbable instead of accessible using arrow keys, only the interactive remove buttons are focusable, and the remove buttons have unique accessible names.
@TeenieSu TeenieSu mentioned this pull request Oct 19, 2021
Closed
2 tasks
@ecraig12345 ecraig12345 mentioned this pull request Oct 29, 2021
Closed
1 task
@smhigley smhigley mentioned this pull request Apr 11, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@khmakoto khmakoto khmakoto approved these changes
@Vitalius1 Vitalius1 Awaiting requested review from Vitalius1
+1 more reviewer
@joschect joschect joschect approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@tomi-msft tomi-msft

Labels

Area: Accessibility Component: PeoplePicker PR: API Modified

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Name is not defined for "Remove user" button for people picker elements.

6 participants

@smhigley @fabricteam @msft-fluent-ui-bot @khmakoto @joschect @tomi-msft