fix contrast on ordered list and fix unordered marker layout

[micahgodbolt]

Ordered list item text did not meet contrast ratio, and unordered markers were too far away from text, and broke in nested scenarios.

New marker styles inherit font size/lineheight from parent, rather than trying to manually place with fixed line height, font size, and calculated to value.

I'm guessing the original intent was to center the marker if the text wrapped, but it isn't possible to properly center on the

because nested content lives inside of that element. If this becomes a design concern in the future we can look at a custom markdown renderer that wraps list item content in spans so that the span can have the marker.

Before:

After:

[codesandbox-ci]

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

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

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1435	1418	5000
Button	mount	1034	1004	5000
FluentProvider	mount	2349	2298	5000
FluentProviderWithTheme	mount	780	768	10
FluentProviderWithTheme	virtual-rerender	705	699	10
FluentProviderWithTheme	virtual-rerender-with-unmount	775	811	10
MakeStyles	mount	2051	2052	50000

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: f1cc414cc43a33f1d1f8308183517d06362d7b57 (build)

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
global-context createContext	533 B 341 B
global-context createContextSelector	554 B 348 B
priority-overflow createOverflowManager	2.936 kB 1.212 kB
react-accordion Accordion (including children components)	75.346 kB 22.865 kB
react-avatar Avatar	46.031 kB 13.438 kB
react-badge Badge	20.929 kB 6.554 kB
react-badge CounterBadge	21.833 kB 6.861 kB
react-badge PresenceBadge	22.627 kB 6.802 kB
react-button Button	33.796 kB 9.151 kB
react-button CompoundButton	40.703 kB 10.403 kB
react-button MenuButton	36.365 kB 10.033 kB
react-button SplitButton	43.6 kB 11.351 kB
react-button ToggleButton	48.279 kB 10.573 kB
react-card Card - All	66.137 kB 18.69 kB
react-card Card	61.293 kB 17.567 kB
react-card CardFooter	7.737 kB 3.264 kB
react-card CardHeader	9.302 kB 3.779 kB
react-card CardPreview	7.838 kB 3.316 kB
react-combobox Combobox	61.189 kB 20.959 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	185.285 kB 51.364 kB
react-components react-components: FluentProvider & webLightTheme	33.988 kB 11.108 kB
react-divider Divider	15.597 kB 5.539 kB
react-image Image	9.956 kB 3.922 kB
react-input Input	22.009 kB 7.194 kB
react-label Label	8.514 kB 3.526 kB
react-link Link	11.358 kB 4.58 kB
react-menu Menu (including children components)	114.086 kB 34.592 kB
react-menu Menu (including selectable components)	117.261 kB 35.067 kB
react-overflow hooks only	10.839 kB 4.146 kB
react-popover Popover	103.951 kB 31.644 kB
react-portal Portal	9.317 kB 3.451 kB
react-positioning usePositioning	23.846 kB 8.29 kB
react-provider FluentProvider	14.037 kB 5.307 kB
react-radio Radio	29.813 kB 10.155 kB
react-radio RadioGroup	13.595 kB 5.42 kB
react-select Select	19.059 kB 6.824 kB
react-slider Slider	25.241 kB 8.115 kB
react-spinbutton SpinButton	42.364 kB 11.944 kB
react-spinner Spinner	18.159 kB 5.99 kB
react-switch Switch	25.789 kB 8.318 kB
react-text Text - Default	10.848 kB 4.239 kB
react-text Text - Wrappers	14.158 kB 4.659 kB
react-textarea Textarea	21.504 kB 7.221 kB
react-theme Single theme token import	69 B 89 B
react-theme Teams: all themes	31.363 kB 7.043 kB
react-theme Teams: Light theme	19.806 kB 5.699 kB
react-tooltip Tooltip	43.837 kB 15.099 kB
react-utilities SSRProvider	189 B 161 B

_{🤖 This report was generated against f1cc414cc43a33f1d1f8308183517d06362d7b57}

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	132	117	1.13:1
ImageMinimalPerf.default	345	324	1.06:1
ChatDuplicateMessagesPerf.default	240	228	1.05:1
PortalMinimalPerf.default	150	143	1.05:1
RefMinimalPerf.default	212	202	1.05:1
AttachmentSlotsPerf.default	880	850	1.04:1
CardMinimalPerf.default	501	484	1.04:1
TextAreaMinimalPerf.default	437	420	1.04:1
ButtonSlotsPerf.default	438	424	1.03:1
ChatWithPopoverPerf.default	306	298	1.03:1
DatepickerMinimalPerf.default	4937	4778	1.03:1
GridMinimalPerf.default	298	290	1.03:1
ListMinimalPerf.default	470	456	1.03:1
ReactionMinimalPerf.default	339	328	1.03:1
IconMinimalPerf.default	548	533	1.03:1
AnimationMinimalPerf.default	496	488	1.02:1
AttachmentMinimalPerf.default	126	123	1.02:1
DropdownManyItemsPerf.default	564	552	1.02:1
FlexMinimalPerf.default	253	249	1.02:1
LayoutMinimalPerf.default	320	314	1.02:1
RadioGroupMinimalPerf.default	404	396	1.02:1
SegmentMinimalPerf.default	308	303	1.02:1
TableMinimalPerf.default	368	362	1.02:1
ButtonMinimalPerf.default	143	142	1.01:1
CheckboxMinimalPerf.default	1962	1952	1.01:1
EmbedMinimalPerf.default	3010	2985	1.01:1
HeaderMinimalPerf.default	328	325	1.01:1
HeaderSlotsPerf.default	685	680	1.01:1
LabelMinimalPerf.default	346	344	1.01:1
ListCommonPerf.default	534	531	1.01:1
LoaderMinimalPerf.default	531	528	1.01:1
PopupMinimalPerf.default	558	553	1.01:1
TableManyItemsPerf.default	1635	1626	1.01:1
TextMinimalPerf.default	307	305	1.01:1
ToolbarMinimalPerf.default	837	830	1.01:1
TreeMinimalPerf.default	725	718	1.01:1
TreeWith60ListItems.default	138	136	1.01:1
ButtonOverridesMissPerf.default	1183	1183	1:1
CarouselMinimalPerf.default	367	366	1:1
ChatMinimalPerf.default	652	650	1:1
DialogMinimalPerf.default	686	686	1:1
DividerMinimalPerf.default	315	316	1:1
DropdownMinimalPerf.default	2599	2610	1:1
FormMinimalPerf.default	355	355	1:1
ItemLayoutMinimalPerf.default	982	979	1:1
ListNestedPerf.default	469	471	1:1
ListWith60ListItems.default	498	500	1:1
MenuMinimalPerf.default	745	742	1:1
MenuButtonMinimalPerf.default	1366	1371	1:1
ProviderMergeThemesPerf.default	987	987	1:1
ProviderMinimalPerf.default	316	317	1:1
SkeletonMinimalPerf.default	301	300	1:1
SliderMinimalPerf.default	1336	1337	1:1
SplitButtonMinimalPerf.default	3342	3327	1:1
StatusMinimalPerf.default	612	612	1:1
CustomToolbarPrototype.default	2214	2212	1:1
TooltipMinimalPerf.default	980	982	1:1
AvatarMinimalPerf.default	161	163	0.99:1
BoxMinimalPerf.default	297	300	0.99:1
InputMinimalPerf.default	983	997	0.99:1
AlertMinimalPerf.default	219	224	0.98:1
RosterPerf.default	831	860	0.97:1
VideoMinimalPerf.default	564	591	0.95:1

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	786	779	5000
Breadcrumb	mount	2277	2240	1000
Checkbox	mount	1245	1272	5000
CheckboxBase	mount	1082	1079	5000
ChoiceGroup	mount	3940	3918	5000
ComboBox	mount	782	758	1000
CommandBar	mount	8774	8775	1000
ContextualMenu	mount	9221	9276	1000
DefaultButton	mount	935	939	5000
DetailsRow	mount	3044	3028	5000
DetailsRowFast	mount	3160	3049	5000
DetailsRowNoStyles	mount	2865	2886	5000
Dialog	mount	2292	2312	1000
DocumentCardTitle	mount	154	145	1000
Dropdown	mount	2811	2818	5000
FocusTrapZone	mount	1546	1590	5000
FocusZone	mount	1515	1526	5000
IconButton	mount	1399	1402	5000
Label	mount	330	328	5000
Layer	mount	2549	2556	5000
Link	mount	436	439	5000
MenuButton	mount	1195	1203	5000
MessageBar	mount	1827	1911	5000
Nav	mount	2631	2890	1000
OverflowSet	mount	968	981	5000
Panel	mount	1824	1823	1000
Persona	mount	835	855	1000
Pivot	mount	1136	1146	1000
PrimaryButton	mount	1068	1087	5000
Rating	mount	6647	6704	5000
SearchBox	mount	1110	1116	5000
Shimmer	mount	2215	2235	5000
Slider	mount	1663	1683	5000
SpinButton	mount	3965	3951	5000
Spinner	mount	405	404	5000
SplitButton	mount	2503	2469	5000
Stack	mount	471	479	5000
StackWithIntrinsicChildren	mount	1879	1865	5000
StackWithTextChildren	mount	4651	4634	5000
SwatchColorPicker	mount	8973	8983	5000
TagPicker	mount	2016	2057	5000
TeachingBubble	mount	71805	72721	5000
Text	mount	389	406	5000
TextField	mount	1187	1160	5000
ThemeProvider	mount	945	946	5000
ThemeProvider	virtual-rerender	596	605	5000
ThemeProvider	virtual-rerender-with-unmount	1427	1429	5000
Toggle	mount	720	727	5000
buttonNative	mount	97	106	5000