Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(Toolbar): focus first item each time a focused element is hidden#2321

Merged
silviuaavram merged 16 commits into
masterfrom
fix/toolbar-focus-on-hide
Feb 19, 2020
Merged

fix(Toolbar): focus first item each time a focused element is hidden#2321
silviuaavram merged 16 commits into
masterfrom
fix/toolbar-focus-on-hide

Conversation

@silviuaavram
Copy link
Copy Markdown
Collaborator

Fixes #2175

@DustyTheBot
Copy link
Copy Markdown
Collaborator

DustyTheBot commented Feb 6, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.47 0.38 1.24:1 2000 948
🎯 Button.Fluent 0.12 0.17 0.71:1 1000 115
🔧 Checkbox.Fluent 0.73 0.29 2.52:1 1000 730
🔧 Dialog.Fluent 0.32 0.16 2:1 5000 1606
🔧 Dropdown.Fluent 3.58 0.39 9.18:1 1000 3579
🔧 Icon.Fluent 0.13 0.04 3.25:1 5000 626
🦄 Image.Fluent 0.05 0.08 0.63:1 5000 229
🔧 Slider.Fluent 1.44 0.3 4.8:1 1000 1435
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 255
🦄 Tooltip.Fluent 0.09 17.8 0.01:1 5000 472

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ToolbarMinimalPerf.default 888 738 1.2:1
DialogMinimalPerf.default 1905 1654 1.15:1
ProviderMinimalPerf.default 599 531 1.13:1
AlertMinimalPerf.default 571 515 1.11:1
HeaderSlotsPerf.default 1362 1240 1.1:1
TreeWith60ListItems.default 252 229 1.1:1
Icon.Fluent 626 570 1.1:1
GridMinimalPerf.default 858 786 1.09:1
ButtonSlotsPerf.default 592 550 1.08:1
DropdownMinimalPerf.default 3854 3582 1.08:1
RadioGroupMinimalPerf.default 426 395 1.08:1
TableMinimalPerf.default 605 558 1.08:1
Dropdown.Fluent 3579 3308 1.08:1
DividerMinimalPerf.default 931 873 1.07:1
EmbedMinimalPerf.default 6485 6065 1.07:1
HierarchicalTreeMinimalPerf.default 801 752 1.07:1
Tooltip.Fluent 472 442 1.07:1
ButtonMinimalPerf.default 118 111 1.06:1
LabelMinimalPerf.default 848 799 1.06:1
ListWith60ListItems.default 155 147 1.05:1
PopupMinimalPerf.default 310 296 1.05:1
Button.Fluent 115 110 1.05:1
BoxMinimalPerf.default 231 223 1.04:1
ChatDuplicateMessagesPerf.default 345 333 1.04:1
IconMinimalPerf.default 324 313 1.04:1
LayoutMinimalPerf.default 498 481 1.04:1
VideoMinimalPerf.default 720 692 1.04:1
AttachmentMinimalPerf.default 885 863 1.03:1
ProviderMergeThemesPerf.default 1059 1026 1.03:1
Slider.Fluent 1435 1388 1.03:1
FlexMinimalPerf.default 353 346 1.02:1
ListCommonPerf.default 746 734 1.02:1
LoaderMinimalPerf.default 1935 1906 1.02:1
Image.Fluent 229 225 1.02:1
CarouselMinimalPerf.default 1840 1820 1.01:1
TextAreaMinimalPerf.default 3033 2993 1.01:1
CustomToolbarPrototype.default 3645 3611 1.01:1
Avatar.Fluent 948 934 1.01:1
ChatMinimalPerf.default 403 401 1:1
DropdownManyItemsPerf.default 406 407 1:1
ItemLayoutMinimalPerf.default 1694 1692 1:1
TextMinimalPerf.default 257 258 1:1
TreeMinimalPerf.default 895 892 1:1
AnimationMinimalPerf.default 451 456 0.99:1
ChatWithPopoverPerf.default 497 504 0.99:1
CheckboxMinimalPerf.default 3646 3684 0.99:1
MenuMinimalPerf.default 1845 1856 0.99:1
MenuButtonMinimalPerf.default 1413 1430 0.99:1
SegmentMinimalPerf.default 1238 1250 0.99:1
HeaderMinimalPerf.default 437 448 0.98:1
SliderMinimalPerf.default 1374 1399 0.98:1
AvatarMinimalPerf.default 515 529 0.97:1
ListNestedPerf.default 670 688 0.97:1
RefMinimalPerf.default 155 159 0.97:1
Dialog.Fluent 1606 1659 0.97:1
FormMinimalPerf.default 708 736 0.96:1
InputMinimalPerf.default 910 947 0.96:1
TooltipMinimalPerf.default 675 705 0.96:1
AccordionMinimalPerf.default 183 194 0.94:1
ListMinimalPerf.default 304 324 0.94:1
PortalMinimalPerf.default 224 238 0.94:1
Checkbox.Fluent 730 775 0.94:1
SplitButtonMinimalPerf.default 11548 12725 0.91:1
AttachmentSlotsPerf.default 3260 3639 0.9:1
ImageMinimalPerf.default 219 247 0.89:1
Text.Fluent 255 287 0.89:1
ReactionMinimalPerf.default 2452 2853 0.86:1
StatusMinimalPerf.default 230 272 0.85:1

Generated by 🚫 dangerJS

el.contains(this.context.target.activeElement)
) {
if (this.containerRef.current) {
this.containerRef.current.querySelector('[tabindex]')
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Does it really work? I don't see any logic there 🤔

Let's also add somehow E2E test for this to avoid issues in future

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

oups

@layershifter layershifter added needs author feedback Author's opinion is asked 🧰 fix Introduces fix for broken behavior. and removed 🚀 ready for review labels Feb 7, 2020
el.contains(this.context.target.activeElement)
) {
if (this.containerRef.current) {
this.containerRef.current.querySelector('[tabindex]')
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

could you pls check if getFirstFocusable from packages\react-bindings\src\FocusZone\focusUtilities.ts would work?

@silviuaavram silviuaavram added 🚀 ready for review and removed needs author feedback Author's opinion is asked labels Feb 7, 2020
@silviuaavram silviuaavram force-pushed the fix/toolbar-focus-on-hide branch from 50a231a to d944a1d Compare February 7, 2020 16:18
@silviuaavram silviuaavram force-pushed the fix/toolbar-focus-on-hide branch from 2f2c93c to a367b5e Compare February 10, 2020 14:05
`.${selectors.toolbarItemWrapper}:nth-child(${index + 1}) .${selectors.toolbarItem}`
const toolbar = `.${selectors.toolbar}`

describe('Toolbar menu overflow with wrapped first item', () => {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

just small observation we have the same naming for the describe as well in the "toolbarMenuOverflow-test.ts"

@silviuaavram silviuaavram merged commit 39cfa91 into master Feb 19, 2020
@silviuaavram silviuaavram deleted the fix/toolbar-focus-on-hide branch February 19, 2020 13:05
kenotron added a commit to microsoft/fluentui that referenced this pull request Feb 26, 2020
* fix(typings): enable strict mode for projects (microsoft/fluent-ui-react#2323)

* chore(build): Add sourcemaps to commonjs and es packages (microsoft/fluent-ui-react#2329)

* fix(SSR): fix document usage and add project test (microsoft/fluent-ui-react#2330)

* fix(Toolbar): focus first item each time a focused element is hidden (microsoft/fluent-ui-react#2321)

* updating yarn.lock

Co-authored-by: Kenneth Chau <kenotron@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

accessibility All the Accessibility tasks and bugs should be tagged with this. 🧰 fix Introduces fix for broken behavior. 🚀 ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Overflow menu in toolbar - When "..." more button disappear user is not able navigate back to toolbar

5 participants