DocumentCard: parent container is no longer focusable and now has role=group to improve a11y experience by TristanWatanabe · Pull Request #17806 · microsoft/fluentui

TristanWatanabe · 2021-04-13T17:53:25Z

Pull request checklist

Addresses an existing issue: Fixes DocumentCard has nested interactive items, structure, and very long link/button names #17718
Include a change request file using $ yarn change

Description of changes

DocumentCard now has tabIndex removed and now has static role="group" so it's no longer focusable.
Focus now moves to DocumentCardTitle.
DocumentCard now passes props role and tabIndex to DocumentCardTitle via helper function passPropsToTitle.
- passPropsToTitle recursively goes through all children to find the DocumentCardTitle element and passes the props role and tabIndex to it.
- This was done in order to provide the new behavior without having consumers modify how they currently use the component.

size-auditor · 2021-04-13T18:04:11Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-DocumentCard	201.828 kB	202.043 kB	215 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: ad00bf86b6440ffa1f4c2ff099af4ec6438af1eb (build)

codesandbox-ci · 2021-04-13T18:07:18Z

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

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

fabricteam · 2021-04-13T18:26:34Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1158	1328	5000
BaseButton	mount	1165	1211	5000
Breadcrumb	mount	3448	3473	1000
ButtonNext	mount	634	643	5000
Checkbox	mount	2260	2030	5000
CheckboxBase	mount	1726	2085	5000
ChoiceGroup	mount	6545	6604	5000
ComboBox	mount	1296	1445	1000
CommandBar	mount	13742	13707	1000
ContextualMenu	mount	8149	8588	1000
DefaultButton	mount	1828	1712	5000
DetailsRow	mount	5075	5423	5000
DetailsRowFast	mount	5816	6241	5000
DetailsRowNoStyles	mount	4495	4992	5000
Dialog	mount	3509	3766	1000
DocumentCardTitle	mount	225	231	1000
Dropdown	mount	4457	4090	5000
FluentProviderNext	mount	4485	4665	5000
FluentProviderWithTheme	mount	254	259	10
FluentProviderWithTheme	virtual-rerender	145	118	10
FluentProviderWithTheme	virtual-rerender-with-unmount	367	372	10
FocusTrapZone	mount	2739	2593	5000
FocusZone	mount	2350	2725	5000
IconButton	mount	2452	2725	5000
Label	mount	510	422	5000
Layer	mount	3991	3969	5000
Link	mount	694	633	5000
MakeStyles	mount	2361	2226	50000
MenuButton	mount	1933	1983	5000
MessageBar	mount	2533	2504	5000
Nav	mount	4589	4534	1000
OverflowSet	mount	1656	1545	5000
Panel	mount	2990	3014	1000
Persona	mount	1211	1146	1000
Pivot	mount	1869	1789	1000
PrimaryButton	mount	1875	1981	5000
Rating	mount	9730	10843	5000
SearchBox	mount	2126	2004	5000
Shimmer	mount	3411	3619	5000
Slider	mount	2758	2693	5000
SpinButton	mount	7104	6826	5000
Spinner	mount	578	523	5000
SplitButton	mount	4665	4386	5000
Stack	mount	675	710	5000
StackWithIntrinsicChildren	mount	2876	2463	5000
StackWithTextChildren	mount	6515	7151	5000
SwatchColorPicker	mount	14301	15524	5000
Tabs	mount	2061	1951	1000
TagPicker	mount	3375	3661	5000
TeachingBubble	mount	17109	16833	5000
Text	mount	577	611	5000
TextField	mount	2004	2019	5000
ThemeProvider	mount	1721	1653	5000
ThemeProvider	virtual-rerender	761	752	5000
ThemeProvider	virtual-rerender-with-unmount	2640	2515	5000
Toggle	mount	1232	1288	5000
buttonNative	mount	194	167	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
IconMinimalPerf.default	991	777	1.28:1
FlexMinimalPerf.default	417	328	1.27:1
GridMinimalPerf.default	561	444	1.26:1
ChatMinimalPerf.default	1047	881	1.19:1
SkeletonMinimalPerf.default	561	485	1.16:1
PopupMinimalPerf.default	821	712	1.15:1
AccordionMinimalPerf.default	231	205	1.13:1
ButtonOverridesMissPerf.default	2534	2238	1.13:1
TreeMinimalPerf.default	1170	1034	1.13:1
ListCommonPerf.default	986	880	1.12:1
ListMinimalPerf.default	798	713	1.12:1
InputMinimalPerf.default	1703	1528	1.11:1
ItemLayoutMinimalPerf.default	1767	1589	1.11:1
TreeWith60ListItems.default	243	219	1.11:1
AttachmentMinimalPerf.default	227	207	1.1:1
ButtonSlotsPerf.default	777	707	1.1:1
LoaderMinimalPerf.default	1171	1060	1.1:1
AvatarMinimalPerf.default	260	240	1.08:1
BoxMinimalPerf.default	441	410	1.08:1
CustomToolbarPrototype.default	6029	5565	1.08:1
TooltipMinimalPerf.default	1445	1343	1.08:1
AnimationMinimalPerf.default	544	508	1.07:1
CarouselMinimalPerf.default	805	750	1.07:1
TextAreaMinimalPerf.default	803	749	1.07:1
DatepickerMinimalPerf.default	7411	6976	1.06:1
LabelMinimalPerf.default	612	576	1.06:1
MenuButtonMinimalPerf.default	2403	2264	1.06:1
SplitButtonMinimalPerf.default	7296	6899	1.06:1
HeaderMinimalPerf.default	503	478	1.05:1
ChatDuplicateMessagesPerf.default	516	496	1.04:1
DialogMinimalPerf.default	1053	1014	1.04:1
StatusMinimalPerf.default	1100	1059	1.04:1
ChatWithPopoverPerf.default	516	503	1.03:1
DropdownManyItemsPerf.default	1024	996	1.03:1
EmbedMinimalPerf.default	5734	5543	1.03:1
HeaderSlotsPerf.default	1104	1073	1.03:1
PortalMinimalPerf.default	234	229	1.02:1
ProviderMergeThemesPerf.default	1988	1973	1.01:1
LayoutMinimalPerf.default	588	588	1:1
RosterPerf.default	1828	1823	1:1
ToolbarMinimalPerf.default	1201	1200	1:1
CheckboxMinimalPerf.default	3510	3555	0.99:1
TableMinimalPerf.default	629	638	0.99:1
DividerMinimalPerf.default	475	487	0.98:1
DropdownMinimalPerf.default	4135	4239	0.98:1
TableManyItemsPerf.default	2727	2771	0.98:1
ListNestedPerf.default	778	799	0.97:1
ReactionMinimalPerf.default	477	491	0.97:1
SliderMinimalPerf.default	2401	2473	0.97:1
VideoMinimalPerf.default	879	910	0.97:1
ButtonMinimalPerf.default	234	246	0.95:1
RadioGroupMinimalPerf.default	576	605	0.95:1
RefMinimalPerf.default	302	317	0.95:1
AttachmentSlotsPerf.default	1304	1394	0.94:1
ImageMinimalPerf.default	448	478	0.94:1
MenuMinimalPerf.default	1338	1431	0.94:1
SegmentMinimalPerf.default	456	489	0.93:1
TextMinimalPerf.default	537	578	0.93:1
AlertMinimalPerf.default	370	409	0.9:1
ProviderMinimalPerf.default	1340	1503	0.89:1
ListWith60ListItems.default	813	940	0.86:1
FormMinimalPerf.default	558	667	0.84:1
CardMinimalPerf.default	796	976	0.82:1

msft-fluent-ui-bot · 2021-10-02T00:00:04Z

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.

fabricteam · 2021-10-04T16:41:54Z

📊 Bundle size report

_{🤖 This report was generated against ad00bf86b6440ffa1f4c2ff099af4ec6438af1eb}

…icrosoft#20957) * fix(Menu): set `aria-expanded` and `aria-haspopup` values correctly * Change files * use aria-haspopup menu * update md * update e2e selectors

* chore: Bump tabster and keyborg versions * Change files * update type import * bump tp 1.1.0-alpha.2 * revert type hack * revert * bump to alpha.3 * update yarnlock * bump to alpha.4

…t#20963) * feat(react-theme) Add border1 color token for shared colors * Change files

* fix: PopupContent to properly pass ref * add changelog * fix ref placement * fix: ref placement * handle inner ref for foxus components * apply review * fix proptype * fix popup ref

* fix(Menu): Focus on first menu item on click * Change files * use single effect * fix conditions

* Set borderRadius on toolbars * Add changelog entry

* fix(makeStyles): correctly handle computed keys * Change files * Update change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json * add fixtures for function

* feat(Accordion): Do not render inactive content * changelog * ut Co-authored-by: Juraj Kapsiar <[email protected]>

… root (microsoft#20161)

* fix(Badge): Add uniform padding and modify gaps Adds uniform padding around the badge to achieve the desired effect for circular icon and one character badges. The wider variants still look OK. I'm not sure if they are pixel perfect, but it's the only way I could find that would achieve the desired effect for icon only badges 🤷 * Change files * revert bagde stories * update counter badge styles * update counter badge styles

* Add scaffold project for Converged SpinButton Just the basic setup for the SpinButton component. * update SpinButton tsconfig Updates the excludes in SpinButton's tsconfig.lib.json file to match other converged components (e.g., react-button). * add storybook config for SpinButton The lint command was failing without the Storybook tsconfig. * update default SpinButton tests. Adds snapshots and adds some information to pass conformance tests. * update API file. * Update packages/react-spinbutton/README.md Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]>

* Change files * Fixes z-index in headers above content region * Shared style for position.

…nto 17718

TristanWatanabe requested a review from smhigley April 13, 2021 17:53

TristanWatanabe requested a review from yiminwu as a code owner April 13, 2021 17:53

msft-fluent-ui-bot added Component: DocumentCard PR: API Modified labels Apr 13, 2021

msft-fluent-ui-bot assigned tomi-msft Apr 13, 2021

msft-fluent-ui-bot added the Area: Accessibility label Apr 13, 2021

theerebuss mentioned this pull request Aug 11, 2021

Card Convergence #19336

Closed

37 tasks

msft-fluent-ui-bot added the Resolution: Soft Close Soft closing inactive issues over a certain period label Oct 2, 2021

msft-fluent-ui-bot closed this Oct 2, 2021

TristanWatanabe reopened this Oct 4, 2021

TristanWatanabe removed the Resolution: Soft Close Soft closing inactive issues over a certain period label Oct 4, 2021

ling1726 and others added 14 commits December 8, 2021 10:23

fix(Menu): set aria-expanded and aria-haspopup values correctly (m…

c2e6c50

…icrosoft#20957) * fix(Menu): set `aria-expanded` and `aria-haspopup` values correctly * Change files * use aria-haspopup menu * update md * update e2e selectors

chore: Bump tabster and keyborg versions (microsoft#20889)

f427493

* chore: Bump tabster and keyborg versions * Change files * update type import * bump tp 1.1.0-alpha.2 * revert type hack * revert * bump to alpha.3 * update yarnlock * bump to alpha.4

feat(react-theme) Add border1 color token for shared colors (microsof…

8985d65

…t#20963) * feat(react-theme) Add border1 color token for shared colors * Change files

fix: PopupContent to properly pass ref (microsoft#20866)

a0b9643

* fix: PopupContent to properly pass ref * add changelog * fix ref placement * fix: ref placement * handle inner ref for foxus components * apply review * fix proptype * fix popup ref

fix(Menu): Focus on first menu item on click (microsoft#20955)

6ca0355

* fix(Menu): Focus on first menu item on click * Change files * use single effect * fix conditions

Set borderRadius on ToolbarItem and icon-only MenuItem (microsoft#20422)

3b32551

* Set borderRadius on toolbars * Add changelog entry

fix(makeStyles): correctly handle computed keys (microsoft#20969)

e4b1b84

* fix(makeStyles): correctly handle computed keys * Change files * Update change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json * add fixtures for function

feat(Accordion): Do not render inactive content (microsoft#20783)

37dc9af

* feat(Accordion): Do not render inactive content * changelog * ut Co-authored-by: Juraj Kapsiar <[email protected]>

Support ability to set a context menu item's event target to the Menu…

442708a

… root (microsoft#20161)

applying package updates

3dc992e

Upgrade to typescript 4.3 (microsoft#20909)

3360b45

fix: z-index in accordion header renders above content (microsoft#20587)

89deee5

* Change files * Fixes z-index in headers above content region * Shared style for position.

smhigley and others added 4 commits January 26, 2022 10:00

Select spec (microsoft#20564)

05da13b

Merge branch '17718' of https://github.com/TristanWatanabe/fluentui i…

1fd1804

…nto 17718

minor doc change

a9139c4

refactor: remove interface

0490423

TristanWatanabe requested review from a team, Hirse, Jacqueline-ms, JustSlone, Raghurk, behowell, dzearing, ecraig12345, ermercer, evlevy, hyoshis, jurokapsiar, khmakoto, kolaps33, layershifter, ling1726, micahgodbolt, miroslavstastny and pompomon as code owners January 26, 2022 20:25

TristanWatanabe requested a review from tomi-msft January 26, 2022 20:25

TristanWatanabe closed this Jan 26, 2022

TristanWatanabe mentioned this pull request Jan 26, 2022

DocumentCard: parent container is no longer focusable and now has role=group to improve a11y experience #21461

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

DocumentCard: parent container is no longer focusable and now has role=group to improve a11y experience#17806

DocumentCard: parent container is no longer focusable and now has role=group to improve a11y experience#17806
TristanWatanabe wants to merge 1853 commits into
microsoft:masterfrom
TristanWatanabe:17718

TristanWatanabe commented Apr 13, 2021 •

edited

Loading

Uh oh!

size-auditor Bot commented Apr 13, 2021 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Apr 13, 2021 •

edited

Loading

Uh oh!

fabricteam commented Apr 13, 2021 •

edited

Loading

Uh oh!

msft-fluent-ui-bot commented Oct 2, 2021

Uh oh!

fabricteam commented Oct 4, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

Uh oh!

Conversation

TristanWatanabe commented Apr 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

size-auditor Bot commented Apr 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci Bot commented Apr 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Apr 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

msft-fluent-ui-bot commented Oct 2, 2021

Uh oh!

fabricteam commented Oct 4, 2021

📊 Bundle size report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

TristanWatanabe commented Apr 13, 2021 •

edited

Loading

size-auditor Bot commented Apr 13, 2021 •

edited

Loading

codesandbox-ci Bot commented Apr 13, 2021 •

edited

Loading

fabricteam commented Apr 13, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)