a11y high contrast mode and focus state bug fixes for web components #28717

brianchristopherbrady · 2023-08-03T01:29:21Z

This pull request addresses several accessibility issues related to the visibility of components in Windows high contrast modes. The following fixes have been implemented:

Fixed the issue where the accordion item icon was not visible in Windows high contrast mode.
Resolved the problem with the divider component being invisible in Windows high contrast mode.
Implemented a visible pressed state for the toggle button in Windows high contrast mode.
Ensured the progress bar is now visible in Windows high contrast mode.
Fixed the slider component to be visible in Windows high contrast mode.
Improved the visibility of the tab active indicator in Windows high contrast mode.
Added focus state to Switch

Examples:
Slider before:

Slider after:

Divider before:

Divider after:

Tabs before:

Tabs after:

By specifying appropriate Windows system colors for these components, they are now displaying correctly and meeting the contrast requirements in Windows high contrast mode. These improvements enhance the accessibility of the application for users with accessibility needs, ensuring a more inclusive user experience.

…erbrady/fluentui-fork into web-components-v3

fabricteam · 2023-08-03T01:36:20Z

📊 Bundle size report

_{🤖 This report was generated against 5e205bc242bef175275d73d3ca5c52243782f589}

size-auditor · 2023-08-03T01:40:37Z

Asset size changes

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

Baseline commit: 5e205bc242bef175275d73d3ca5c52243782f589 (build)

codesandbox-ci · 2023-08-03T01:44:15Z

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

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

…tFixes

chrisdholt

This looks good @brianchristopherbrady - one change I'd like to see is using the forcedColorsStylesheetBehavior from fast-foundation which allows the stylesheets to be conditionally applied only in forced colors scenarios.

chrisdholt · 2023-08-07T19:03:44Z

packages/web-components/src/toggle-button/toggle-button.styles.ts

+    :host([aria-pressed='false'][appearance='transparent']) .control {
+      border-color: ActiveBorder;
+    }
+  }


I'd suggest we use the forcedColorsStylesheetBehavior() for these which are exported from @microsoft/fast-foundation. This would only load the styles when forced colors is active which will save slightly on parsing stylesheets when it's not.

chrisdholt · 2023-08-07T20:07:21Z

packages/web-components/src/toggle-button/toggle-button.styles.ts

+    :host([aria-pressed='false'][appearance='outline']) .control,
+    :host([aria-pressed='false'][appearance='transparent']) .control,
+    :host([aria-pressed='false'][appearance='transparent']) .control {
+      border-color: ActiveBorder;


active border on pressed being falsed?

…ColorsStylesheetBehavior

chrisdholt · 2023-08-07T21:38:16Z

packages/web-components/src/radio/radio.styles.ts

+    :host([aria-checked='false']:active) .control,
+    :host([aria-checked='false']:hover) .control {
+      border-color: ActiveBorder;
+    }


Another instance where it's odd for active border to be on the non checked.

chrisdholt · 2023-08-07T21:38:51Z

packages/web-components/src/switch/switch.styles.ts

+    :host([aria-checked='true']:active) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }


I think all of these can be a single selector can they not?

chrisdholt · 2023-08-07T21:39:14Z

packages/web-components/src/switch/switch.styles.ts

+    }
+    :host(:active) .checked-indicator {
+      background-color: ActiveCaption;
+    }


Likewise can these also be a single selector? Let's look for duplication like this elsewhere and fix as well please :)

chrisdholt · 2023-08-07T21:39:42Z

packages/web-components/src/toggle-button/toggle-button.styles.ts

+    }
+    :host(:hover) .control {
+      border-color: Highlight;
+    }


Combine with the first block which shares the same styles

…tFixes

…b.com/brianchristopherbrady/fluentui-fork into user/brianbrady/a11yHighContrastFixes

chrisdholt · 2023-08-08T00:08:57Z

Approving this - though we may have follow-ups once the trusted test team validates.

…28717) * radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * high contrast mode color fixes * removes file * yarn change * high contrast visual fixes * high contrast a11y fixes: optimizes high contrast styles using forcedColorsStylesheetBehavior * hc a11y: addresses feedback * hc a11y: removes dead code * hc a11y: fixes radio colors * hc a11y: fixes switch, togglebutton styles * hc a11y: combines css selectors * hc a11y: updates button styles * hc a11y: updates toggle button styles * hc a11y: fixes button styles --------- Co-authored-by: Chris Holt <chhol@microsoft.com>

…icrosoft#28717) * radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * high contrast mode color fixes * removes file * yarn change * high contrast visual fixes * high contrast a11y fixes: optimizes high contrast styles using forcedColorsStylesheetBehavior * hc a11y: addresses feedback * hc a11y: removes dead code * hc a11y: fixes radio colors * hc a11y: fixes switch, togglebutton styles * hc a11y: combines css selectors * hc a11y: updates button styles * hc a11y: updates toggle button styles * hc a11y: fixes button styles --------- Co-authored-by: Chris Holt <chhol@microsoft.com>

…28717) * radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * high contrast mode color fixes * removes file * yarn change * high contrast visual fixes * high contrast a11y fixes: optimizes high contrast styles using forcedColorsStylesheetBehavior * hc a11y: addresses feedback * hc a11y: removes dead code * hc a11y: fixes radio colors * hc a11y: fixes switch, togglebutton styles * hc a11y: combines css selectors * hc a11y: updates button styles * hc a11y: updates toggle button styles * hc a11y: fixes button styles --------- Co-authored-by: Chris Holt <chhol@microsoft.com>

brianchristopherbrady and others added 19 commits March 3, 2023 10:45

radio init

7f9af9e

styles radio

70c55e0

Merge branch 'microsoft:web-components-v3' into web-components-v3

f3cb7f4

reverts branch

a72d10f

Merge branch 'web-components-v3' of https://github.com/brianchristoph…

2941fa7

…erbrady/fluentui-fork into web-components-v3

Merge branch 'microsoft:web-components-v3' into web-components-v3

9b350fc

input spec init

2cf59ce

cleans up spec

79b6bff

formatting

5558b93

updates component name to text input

3c045c3

updates component name in spec

2370967

Merge branch 'microsoft:web-components-v3' into web-components-v3

9c4eb6b

Merge branch 'microsoft:web-components-v3' into web-components-v3

056b82e

Merge branch 'microsoft:web-components-v3' into web-components-v3

196ed30

Merge branch 'microsoft:web-components-v3' into web-components-v3

2a9ae23

Merge branch 'microsoft:web-components-v3' into web-components-v3

677a59c

Merge branch 'microsoft:web-components-v3' into web-components-v3

17819f9

high contrast mode color fixes

dfe1311

removes file

dd472a4

brianchristopherbrady requested a review from a team as a code owner August 3, 2023 01:29

brianchristopherbrady added 3 commits August 2, 2023 19:08

yarn change

d1b6af5

Merge branch 'web-components-v3' into user/brianbrady/a11yHighContras…

658f7f8

…tFixes

high contrast visual fixes

4af2957

brianchristopherbrady changed the title ~~a11y high contrast mode bug fixes for web components~~ a11y high contrast mode and focus state bug fixes for web components Aug 4, 2023

chrisdholt reviewed Aug 7, 2023

View reviewed changes

high contrast a11y fixes: optimizes high contrast styles using forced…

3d50372

…ColorsStylesheetBehavior

chrisdholt reviewed Aug 7, 2023

View reviewed changes

hc a11y: removes dead code

27a2c1e

chrisdholt reviewed Aug 7, 2023

View reviewed changes

brianchristopherbrady added 3 commits August 7, 2023 14:46

hc a11y: fixes radio colors

d9cf80e

hc a11y: fixes switch, togglebutton styles

48220af

hc a11y: combines css selectors

26f8be1

brianchristopherbrady requested a review from chrisdholt August 7, 2023 22:00

chrisdholt and others added 5 commits August 7, 2023 15:03

Merge branch 'web-components-v3' into user/brianbrady/a11yHighContras…

44082c1

…tFixes

hc a11y: updates button styles

b9d268d

hc a11y: updates toggle button styles

2fb2cfa

hc a11y: fixes button styles

22323ce

Merge branch 'user/brianbrady/a11yHighContrastFixes' of https://githu…

1533572

…b.com/brianchristopherbrady/fluentui-fork into user/brianbrady/a11yHighContrastFixes

chrisdholt approved these changes Aug 8, 2023

View reviewed changes

chrisdholt merged commit 54df8d3 into microsoft:web-components-v3 Aug 8, 2023
20 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

a11y high contrast mode and focus state bug fixes for web components #28717

a11y high contrast mode and focus state bug fixes for web components #28717

brianchristopherbrady commented Aug 3, 2023 •

edited

Loading

fabricteam commented Aug 3, 2023 •

edited

Loading

size-auditor bot commented Aug 3, 2023 •

edited

Loading

codesandbox-ci bot commented Aug 3, 2023 •

edited

Loading

chrisdholt left a comment

chrisdholt Aug 7, 2023

chrisdholt Aug 7, 2023

brianchristopherbrady Aug 7, 2023

chrisdholt Aug 7, 2023

chrisdholt Aug 7, 2023

chrisdholt Aug 7, 2023

chrisdholt Aug 7, 2023

chrisdholt commented Aug 8, 2023

a11y high contrast mode and focus state bug fixes for web components #28717

a11y high contrast mode and focus state bug fixes for web components #28717

Conversation

brianchristopherbrady commented Aug 3, 2023 • edited Loading

fabricteam commented Aug 3, 2023 • edited Loading

📊 Bundle size report

size-auditor bot commented Aug 3, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented Aug 3, 2023 • edited Loading

chrisdholt left a comment

Choose a reason for hiding this comment

chrisdholt Aug 7, 2023

Choose a reason for hiding this comment

chrisdholt Aug 7, 2023

Choose a reason for hiding this comment

brianchristopherbrady Aug 7, 2023

Choose a reason for hiding this comment

chrisdholt Aug 7, 2023

Choose a reason for hiding this comment

chrisdholt Aug 7, 2023

Choose a reason for hiding this comment

chrisdholt Aug 7, 2023

Choose a reason for hiding this comment

chrisdholt Aug 7, 2023

Choose a reason for hiding this comment

chrisdholt commented Aug 8, 2023

brianchristopherbrady commented Aug 3, 2023 •

edited

Loading

fabricteam commented Aug 3, 2023 •

edited

Loading

size-auditor bot commented Aug 3, 2023 •

edited

Loading

codesandbox-ci bot commented Aug 3, 2023 •

edited

Loading