fix: Card does not override specified focusMode based on event listeners #32200
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 tasks
📊 Bundle size report
Unchanged fixtures
|
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 648 | 637 | 5000 | |
| Button | mount | 297 | 314 | 5000 | |
| Field | mount | 1147 | 1127 | 5000 | |
| FluentProvider | mount | 723 | 704 | 5000 | |
| FluentProviderWithTheme | mount | 83 | 88 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 36 | 38 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 86 | 78 | 10 | |
| MakeStyles | mount | 878 | 857 | 50000 | |
| Persona | mount | 1767 | 1765 | 5000 | |
| SpinButton | mount | 1379 | 1410 | 5000 | |
| SwatchPicker | mount | 1680 | 1672 | 5000 |
fabricteam
reviewed
Aug 1, 2024
marcosmoura
approved these changes
Aug 5, 2024
marcosmoura
added a commit
to marcosmoura/fluentui
that referenced
this pull request
Aug 7, 2024
* master: (48 commits) chore: migrate to storybook v7 (microsoft#32018) release: applying package updates - react-components ci: make public-docsite-v9 deploy pipeline work and make it faster (microsoft#32248) fix(Toolbar): hardcode size of `ToolbarButton` (microsoft#32185) chore: deprecate @fluentui/react-motion-preview (microsoft#32190) release: applying package updates - web-components docs: add wrapping menu item example to ContextualMenu docs (microsoft#31289) docs: update title of v8 keyboard-accessible drag & drop example, add docs (microsoft#32216) release: applying package updates - react-components fix: Card does not override specified focusMode based on event listeners (microsoft#32200) Fix undefined reference in older browsers in useMessageBarReflow (microsoft#32238) feat: Add transparent appearance to ToolbarButton (microsoft#32205) fix(react-tabs): ignore ref for tab reserved space content slot (microsoft#31775) fix(Dialog): do not require ref forwarding (microsoft#32095) feat: add verify-packaging to react v8 release pipeline (microsoft#32212) chore(web-components): remove type-check definition and follow repo target defaults for consistency and type-check speeds (microsoft#32208) chore(react-tree): improve ImmutableSet and ImmutableMap internal implementation (microsoft#32167) release: applying package updates - web-components feat(web-components): add tablist (microsoft#32098) release: applying package updates - react-components ...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Previous Behavior
It was impossible to have both a
focusMode=offorfocusMode=tab-onlycard with a click handler on the root. There are several reasons to do this (e.g. the card as a whole can be clicked as a larger hit target, and there's also a link or button within that does the same thing). The change infocusModeactually interferes with accessibility, because it makes it impossible to have a card with both a root click and enter/space handler, since a card with anyfocusModeapart fromoffwill prevent enter from doing an author-defined action.Authors already must provide a secondary method for performing any action put onto the card root, since any such actions will not be accessible to voice control, touch screen readers, etc.
New Behavior
This updates the default
focusModeto betab-onlywhen cards are interactive, but still allows users to override that with there own explicitfocusMode. I chosetab-onlyinstead ofno-tabas the least heavy-handed tabster behavior, and the least different from the non-interactive default ofoff.We could also consider having the default always be
off, and not looking at whether or not there are event handlers attached to the root. I wasn't sure if there was another non-a11y reason to ensure cards are focusable when they have certain event handlers.Related Issue(s)
focusModeregresses tono-tabbehaviour #31529 and an ADO issue.