microsoft
fix(a11y): remove deprecated css properties
This pull request updates the high-contrast media query selectors in CommonStyles.ts to remove legacy support for the -ms-high-contrast feature, which is specific to older versions of Microsoft browsers.
These selectors are showing up on the v8 docsite and they were flagged by our a11y team.
Updates to high-contrast media queries:
HighContrastSelector: Removed the-ms-high-contrast: activecondition, keeping onlyforced-colors: activefor modern browser compatibility.HighContrastSelectorWhiteandHighContrastSelectorBlack: Updated to remove-ms-high-contrastconditions and retain onlyforced-colors: activewith appropriateprefers-color-schemeconditions.EdgeChromiumHighContrastSelector: Deprecated and simplified by removing the-ms-high-contrast: activecondition, leaving onlyforced-colors: active.
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react ActivityItem |
71.196 kB23.345 kB |
71.156 kB23.328 kB |
-40 B -17 B |
| react Breadcrumb |
200.693 kB59.585 kB |
200.653 kB59.57 kB |
-40 B -15 B |
| react Button |
194.242 kB55.873 kB |
194.202 kB55.857 kB |
-40 B -16 B |
| react ButtonGrid |
179.13 kB53.878 kB |
179.09 kB53.86 kB |
-40 B -18 B |
| react Calendar |
121.126 kB36.821 kB |
121.086 kB36.806 kB |
-40 B -15 B |
| react Callout |
84.233 kB27.586 kB |
84.193 kB27.569 kB |
-40 B -17 B |
| react Check |
53.182 kB17.832 kB |
53.142 kB17.815 kB |
-40 B -17 B |
| react Checkbox |
59.948 kB19.872 kB |
59.908 kB19.857 kB |
-40 B -15 B |
| react ChoiceGroup |
65.458 kB21.462 kB |
65.418 kB21.447 kB |
-40 B -15 B |
| react ChoiceGroupOption |
58.745 kB19.351 kB |
58.705 kB19.336 kB |
-40 B -15 B |
| react Coachmark |
92.652 kB29.303 kB |
92.612 kB29.289 kB |
-40 B -14 B |
| react ColorPicker |
134.856 kB42.11 kB |
134.816 kB42.094 kB |
-40 B -16 B |
| react ComboBox |
250.575 kB71.498 kB |
250.535 kB71.482 kB |
-40 B -16 B |
| react CommandBar |
201.749 kB59.376 kB |
201.709 kB59.361 kB |
-40 B -15 B |
| react ContextualMenu |
154.117 kB47.553 kB |
154.077 kB47.539 kB |
-40 B -14 B |
| react DatePicker |
183.167 kB55.873 kB |
183.127 kB55.857 kB |
-40 B -16 B |
| react DetailsList |
229.851 kB65.756 kB |
229.811 kB65.741 kB |
-40 B -15 B |
| react Dialog |
210.048 kB62.348 kB |
210.008 kB62.335 kB |
-40 B -13 B |
| react DocumentCard |
215.731 kB63.643 kB |
215.691 kB63.625 kB |
-40 B -18 B |
| react Dropdown |
232.997 kB67.932 kB |
232.909 kB67.89 kB |
-88 B -42 B |
| react Facepile |
209.259 kB62.362 kB |
209.219 kB62.348 kB |
-40 B -14 B |
| react FloatingPicker |
240.753 kB68.209 kB |
240.713 kB68.195 kB |
-40 B -14 B |
| react Grid |
179.13 kB53.878 kB |
179.09 kB53.86 kB |
-40 B -18 B |
| react GroupedList |
135.012 kB40.665 kB |
134.972 kB40.651 kB |
-40 B -14 B |
| react GroupedListV2 |
122.629 kB37.753 kB |
122.589 kB37.737 kB |
-40 B -16 B |
| react HoverCard |
96.718 kB30.685 kB |
96.678 kB30.672 kB |
-40 B -13 B |
| react Keytip |
81.241 kB26.671 kB |
81.201 kB26.654 kB |
-40 B -17 B |
| react KeytipLayer |
103.029 kB31.896 kB |
102.989 kB31.88 kB |
-40 B -16 B |
| react Keytips |
105.801 kB32.898 kB |
105.761 kB32.88 kB |
-40 B -18 B |
| react Label |
38.318 kB13.239 kB |
38.278 kB13.224 kB |
-40 B -15 B |
| react Link |
39.659 kB13.651 kB |
39.619 kB13.636 kB |
-40 B -15 B |
| react MarqueeSelection |
74.484 kB22.396 kB |
74.444 kB22.373 kB |
-40 B -23 B |
| react MessageBar |
189.276 kB56.315 kB |
189.188 kB56.275 kB |
-88 B -40 B |
| react Modal |
93.678 kB30.217 kB |
93.638 kB30.196 kB |
-40 B -21 B |
| react Nav |
186.713 kB55.706 kB |
186.673 kB55.692 kB |
-40 B -14 B |
| react Overlay |
40.879 kB14.075 kB |
40.839 kB14.057 kB |
-40 B -18 B |
| react Panel |
200.215 kB59.319 kB |
200.175 kB59.304 kB |
-40 B -15 B |
| react Persona |
114.513 kB36.43 kB |
114.473 kB36.412 kB |
-40 B -18 B |
| react PersonaCoin |
114.513 kB36.43 kB |
114.473 kB36.412 kB |
-40 B -18 B |
| react PersonaPresence |
58.052 kB19.371 kB |
58.012 kB19.356 kB |
-40 B -15 B |
| react Pickers |
297.712 kB82.962 kB |
297.672 kB82.945 kB |
-40 B -17 B |
| react Pivot |
187.61 kB56.481 kB |
187.57 kB56.466 kB |
-40 B -15 B |
| react PositioningContainer |
73.415 kB23.685 kB |
73.375 kB23.667 kB |
-40 B -18 B |
| react ProgressIndicator |
39.471 kB13.526 kB |
39.431 kB13.51 kB |
-40 B -16 B |
| react Rating |
82.056 kB26.085 kB |
82.016 kB26.069 kB |
-40 B -16 B |
| react Fluent UI React (entire library) |
1.019 MB283.07 kB |
1.019 MB283.032 kB |
-176 B -38 B |
| react ScrollablePane |
55.535 kB17.715 kB |
55.495 kB17.698 kB |
-40 B -17 B |
| react SearchBox |
187.512 kB55.908 kB |
187.472 kB55.891 kB |
-40 B -17 B |
| react SelectedItemsList |
231.238 kB67.163 kB |
231.198 kB67.148 kB |
-40 B -15 B |
| react Separator |
35.359 kB12.13 kB |
35.319 kB12.114 kB |
-40 B -16 B |
| react Shimmer |
49.237 kB16.255 kB |
49.197 kB16.24 kB |
-40 B -15 B |
| react ShimmeredDetailsList |
240.633 kB68.511 kB |
240.593 kB68.498 kB |
-40 B -13 B |
| react Slider |
57.615 kB19.194 kB |
57.575 kB19.179 kB |
-40 B -15 B |
| react SpinButton |
191.185 kB56.991 kB |
191.145 kB56.977 kB |
-40 B -14 B |
| react Spinner |
41.753 kB14.466 kB |
41.713 kB14.45 kB |
-40 B -16 B |
| react Styling |
46.033 kB15.135 kB |
45.857 kB15.099 kB |
-176 B -36 B |
| react SwatchColorPicker |
189.525 kB57.405 kB |
189.485 kB57.39 kB |
-40 B -15 B |
| react TeachingBubble |
204.527 kB60.294 kB |
204.487 kB60.281 kB |
-40 B -13 B |
| react TextField |
80.768 kB25.3 kB |
80.728 kB25.282 kB |
-40 B -18 B |
| react TimePicker |
240.403 kB69.296 kB |
240.363 kB69.281 kB |
-40 B -15 B |
| react Toggle |
46.189 kB15.954 kB |
46.149 kB15.94 kB |
-40 B -14 B |
| react Tooltip |
87.013 kB28.144 kB |
86.973 kB28.126 kB |
-40 B -18 B |
| react WeeklyDayPicker |
101.318 kB31.637 kB |
101.278 kB31.622 kB |
-40 B -15 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react Announced |
38.466 kB13.274 kB |
| react Autofill |
15.42 kB4.766 kB |
| react Color |
7.789 kB3.127 kB |
| react DateTimeUtilities |
5.244 kB1.849 kB |
| react Divider |
19.582 kB6.838 kB |
| react DragDrop |
8.343 kB2.724 kB |
| react DraggableZone |
34.28 kB11.488 kB |
| react ExtendedPicker |
96.823 kB27.867 kB |
| react Fabric |
41.722 kB14.34 kB |
| react FocusTrapZone |
16.978 kB5.889 kB |
| react FocusZone |
55.1 kB17.451 kB |
| react Icon |
51.863 kB17.261 kB |
| react Icons |
66.339 kB24.386 kB |
| react Image |
46.877 kB15.692 kB |
| react KeytipData |
14.032 kB4.582 kB |
| react Layer |
48.077 kB16.346 kB |
| react List |
39.346 kB12.454 kB |
| react OverflowSet |
33.336 kB11.279 kB |
| react Popup |
12.294 kB4.195 kB |
| react Positioning |
22.764 kB7.683 kB |
| react ResizeGroup |
13.338 kB4.377 kB |
| react ResponsiveMode |
8.13 kB2.966 kB |
| react SelectableOption |
724 B413 B |
| react Selection |
42.418 kB12.26 kB |
| react Stack |
42.03 kB14.386 kB |
| react Sticky |
32.577 kB10.488 kB |
| react Text |
36.886 kB12.806 kB |
| react Theme |
43.486 kB14.168 kB |
| react ThemeGenerator |
12.384 kB4.116 kB |
| react Utilities |
82.932 kB25.149 kB |
| react Viewport |
23.872 kB7.642 kB |
| react WindowProvider |
1.059 kB541 B |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
this seems like breaking change which will affect every user of v8.
can you please double check @dzearing @AtishayMsft ? ty
this seems like breaking change which will affect every user of v8.
can you please double check @dzearing @AtishayMsft ? ty
Changes are good from charting team side. In our testing, we’ve never seen it match in any browser. Usually, only the latter part of high contrast media queries - separated by , ("or") - gets matched.
And they also have good browser compatibility overall.
CSS at-rule: @media: forced-colors media feature | Can I use... Support tables for HTML5, CSS3, etc
CSS at-rule: @media: prefers-color-scheme media feature | Can I use... Support tables for HTML5, CSS3, etc
CC @krkshitij
For more context: this change is applied to fix an a11y issue filed by the Trusted Tester team which marked the -ms-high-contrast property as a must-have deprecation for the v8 docsite. Unfortunately, the docsite uses the CommonStyles.ts file as well. I hoped this would be a low hanging fruit, but it seems that it's probably not, as that file is also used by all v8 components.
We'll probably have to do more refactoring. cc @micahgodbolt