Skip to content

fix(a11y): remove deprecated css properties #34550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

tudorpopams
Copy link
Contributor

@tudorpopams tudorpopams commented May 29, 2025

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: active condition, keeping only forced-colors: active for modern browser compatibility.
  • HighContrastSelectorWhite and HighContrastSelectorBlack: Updated to remove -ms-high-contrast conditions and retain only forced-colors: active with appropriate prefers-color-scheme conditions.
  • EdgeChromiumHighContrastSelector: Deprecated and simplified by removing the -ms-high-contrast: active condition, leaving only forced-colors: active.

@tudorpopams tudorpopams requested review from phkuo, dzearing and a team as code owners May 29, 2025 15:50
@tudorpopams tudorpopams requested a review from micahgodbolt May 29, 2025 15:51
@tudorpopams tudorpopams enabled auto-merge (squash) May 29, 2025 15:53
@tudorpopams tudorpopams force-pushed the fix/v8-docsite-deprecated-css branch from 189919b to b1d47f7 Compare May 29, 2025 16:02
Copy link

github-actions bot commented May 29, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
ActivityItem
71.196 kB
23.345 kB
71.156 kB
23.328 kB
-40 B
-17 B
react
Breadcrumb
200.693 kB
59.585 kB
200.653 kB
59.57 kB
-40 B
-15 B
react
Button
194.242 kB
55.873 kB
194.202 kB
55.857 kB
-40 B
-16 B
react
ButtonGrid
179.13 kB
53.878 kB
179.09 kB
53.86 kB
-40 B
-18 B
react
Calendar
121.126 kB
36.821 kB
121.086 kB
36.806 kB
-40 B
-15 B
react
Callout
84.233 kB
27.586 kB
84.193 kB
27.569 kB
-40 B
-17 B
react
Check
53.182 kB
17.832 kB
53.142 kB
17.815 kB
-40 B
-17 B
react
Checkbox
59.948 kB
19.872 kB
59.908 kB
19.857 kB
-40 B
-15 B
react
ChoiceGroup
65.458 kB
21.462 kB
65.418 kB
21.447 kB
-40 B
-15 B
react
ChoiceGroupOption
58.745 kB
19.351 kB
58.705 kB
19.336 kB
-40 B
-15 B
react
Coachmark
92.652 kB
29.303 kB
92.612 kB
29.289 kB
-40 B
-14 B
react
ColorPicker
134.856 kB
42.11 kB
134.816 kB
42.094 kB
-40 B
-16 B
react
ComboBox
250.575 kB
71.498 kB
250.535 kB
71.482 kB
-40 B
-16 B
react
CommandBar
201.749 kB
59.376 kB
201.709 kB
59.361 kB
-40 B
-15 B
react
ContextualMenu
154.117 kB
47.553 kB
154.077 kB
47.539 kB
-40 B
-14 B
react
DatePicker
183.167 kB
55.873 kB
183.127 kB
55.857 kB
-40 B
-16 B
react
DetailsList
229.851 kB
65.756 kB
229.811 kB
65.741 kB
-40 B
-15 B
react
Dialog
210.048 kB
62.348 kB
210.008 kB
62.335 kB
-40 B
-13 B
react
DocumentCard
215.731 kB
63.643 kB
215.691 kB
63.625 kB
-40 B
-18 B
react
Dropdown
232.997 kB
67.932 kB
232.909 kB
67.89 kB
-88 B
-42 B
react
Facepile
209.259 kB
62.362 kB
209.219 kB
62.348 kB
-40 B
-14 B
react
FloatingPicker
240.753 kB
68.209 kB
240.713 kB
68.195 kB
-40 B
-14 B
react
Grid
179.13 kB
53.878 kB
179.09 kB
53.86 kB
-40 B
-18 B
react
GroupedList
135.012 kB
40.665 kB
134.972 kB
40.651 kB
-40 B
-14 B
react
GroupedListV2
122.629 kB
37.753 kB
122.589 kB
37.737 kB
-40 B
-16 B
react
HoverCard
96.718 kB
30.685 kB
96.678 kB
30.672 kB
-40 B
-13 B
react
Keytip
81.241 kB
26.671 kB
81.201 kB
26.654 kB
-40 B
-17 B
react
KeytipLayer
103.029 kB
31.896 kB
102.989 kB
31.88 kB
-40 B
-16 B
react
Keytips
105.801 kB
32.898 kB
105.761 kB
32.88 kB
-40 B
-18 B
react
Label
38.318 kB
13.239 kB
38.278 kB
13.224 kB
-40 B
-15 B
react
Link
39.659 kB
13.651 kB
39.619 kB
13.636 kB
-40 B
-15 B
react
MarqueeSelection
74.484 kB
22.396 kB
74.444 kB
22.373 kB
-40 B
-23 B
react
MessageBar
189.276 kB
56.315 kB
189.188 kB
56.275 kB
-88 B
-40 B
react
Modal
93.678 kB
30.217 kB
93.638 kB
30.196 kB
-40 B
-21 B
react
Nav
186.713 kB
55.706 kB
186.673 kB
55.692 kB
-40 B
-14 B
react
Overlay
40.879 kB
14.075 kB
40.839 kB
14.057 kB
-40 B
-18 B
react
Panel
200.215 kB
59.319 kB
200.175 kB
59.304 kB
-40 B
-15 B
react
Persona
114.513 kB
36.43 kB
114.473 kB
36.412 kB
-40 B
-18 B
react
PersonaCoin
114.513 kB
36.43 kB
114.473 kB
36.412 kB
-40 B
-18 B
react
PersonaPresence
58.052 kB
19.371 kB
58.012 kB
19.356 kB
-40 B
-15 B
react
Pickers
297.712 kB
82.962 kB
297.672 kB
82.945 kB
-40 B
-17 B
react
Pivot
187.61 kB
56.481 kB
187.57 kB
56.466 kB
-40 B
-15 B
react
PositioningContainer
73.415 kB
23.685 kB
73.375 kB
23.667 kB
-40 B
-18 B
react
ProgressIndicator
39.471 kB
13.526 kB
39.431 kB
13.51 kB
-40 B
-16 B
react
Rating
82.056 kB
26.085 kB
82.016 kB
26.069 kB
-40 B
-16 B
react
Fluent UI React (entire library)
1.019 MB
283.07 kB
1.019 MB
283.032 kB
-176 B
-38 B
react
ScrollablePane
55.535 kB
17.715 kB
55.495 kB
17.698 kB
-40 B
-17 B
react
SearchBox
187.512 kB
55.908 kB
187.472 kB
55.891 kB
-40 B
-17 B
react
SelectedItemsList
231.238 kB
67.163 kB
231.198 kB
67.148 kB
-40 B
-15 B
react
Separator
35.359 kB
12.13 kB
35.319 kB
12.114 kB
-40 B
-16 B
react
Shimmer
49.237 kB
16.255 kB
49.197 kB
16.24 kB
-40 B
-15 B
react
ShimmeredDetailsList
240.633 kB
68.511 kB
240.593 kB
68.498 kB
-40 B
-13 B
react
Slider
57.615 kB
19.194 kB
57.575 kB
19.179 kB
-40 B
-15 B
react
SpinButton
191.185 kB
56.991 kB
191.145 kB
56.977 kB
-40 B
-14 B
react
Spinner
41.753 kB
14.466 kB
41.713 kB
14.45 kB
-40 B
-16 B
react
Styling
46.033 kB
15.135 kB
45.857 kB
15.099 kB
-176 B
-36 B
react
SwatchColorPicker
189.525 kB
57.405 kB
189.485 kB
57.39 kB
-40 B
-15 B
react
TeachingBubble
204.527 kB
60.294 kB
204.487 kB
60.281 kB
-40 B
-13 B
react
TextField
80.768 kB
25.3 kB
80.728 kB
25.282 kB
-40 B
-18 B
react
TimePicker
240.403 kB
69.296 kB
240.363 kB
69.281 kB
-40 B
-15 B
react
Toggle
46.189 kB
15.954 kB
46.149 kB
15.94 kB
-40 B
-14 B
react
Tooltip
87.013 kB
28.144 kB
86.973 kB
28.126 kB
-40 B
-18 B
react
WeeklyDayPicker
101.318 kB
31.637 kB
101.278 kB
31.622 kB
-40 B
-15 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
Announced
38.466 kB
13.274 kB
react
Autofill
15.42 kB
4.766 kB
react
Color
7.789 kB
3.127 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
Divider
19.582 kB
6.838 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.28 kB
11.488 kB
react
ExtendedPicker
96.823 kB
27.867 kB
react
Fabric
41.722 kB
14.34 kB
react
FocusTrapZone
16.978 kB
5.889 kB
react
FocusZone
55.1 kB
17.451 kB
react
Icon
51.863 kB
17.261 kB
react
Icons
66.339 kB
24.386 kB
react
Image
46.877 kB
15.692 kB
react
KeytipData
14.032 kB
4.582 kB
react
Layer
48.077 kB
16.346 kB
react
List
39.346 kB
12.454 kB
react
OverflowSet
33.336 kB
11.279 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.764 kB
7.683 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
SelectableOption
724 B
413 B
react
Selection
42.418 kB
12.26 kB
react
Stack
42.03 kB
14.386 kB
react
Sticky
32.577 kB
10.488 kB
react
Text
36.886 kB
12.806 kB
react
Theme
43.486 kB
14.168 kB
react
ThemeGenerator
12.384 kB
4.116 kB
react
Utilities
82.932 kB
25.149 kB
react
Viewport
23.872 kB
7.642 kB
react
WindowProvider
1.059 kB
541 B
🤖 This report was generated against 911ee445ed73de1968633cce7bf6914230db2b89

@tudorpopams tudorpopams disabled auto-merge May 29, 2025 16:12
Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests/Callout 5 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.No callout width specified.default.chromium.png 2126 Changed
vr-tests/Callout.Bottom right edge.default.chromium.png 1120 Changed
vr-tests/Callout.Left bottom edge.default.chromium.png 3123 Changed
vr-tests/Callout.Bottom left edge.default.chromium.png 2181 Changed
vr-tests/Callout.Bottom left edge - RTL.default.chromium.png 2186 Changed
vr-tests/react-charting-GaugeChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-GaugeChart.Basic.default.chromium.png 2 Changed
vr-tests/react-charting-VerticalBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed

There were 2 duplicate changes discarded. Check the build logs for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants