adobe / adobe/react-spectrum

Windows High Contrast issues

Open
#2,949 3 comments 0 reactions 0 assignees View on GitHub
accessibility bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

These were found in the initial testing session, before #2830 was merged. I've tried to omit the ones that are fixed in that PR, but we will need to test the changes there as well.

- [ ] ActionButton – Hover state missing in static color variants
- [ ] ActionGroup – compact ActionGroup selected button is thinner than the non selected button
- [ ] ActionGroup – Selected button is missing border
- [ ] ActionGroup/ToggleButton – isEmphasized hover state is the same as selection
- [x] Button – CTA button grows by 2px on hover
- [ ] Button – no active state. Do we need one?
- [ ] Button – overBackground hover state is dimmed
- [ ] ClearButton - no overBackground hover state
- [ ] DialogTrigger – Popover arrow is really hard to see
- [ ] Divider – Is invisible
- [ ] IllustratedMessage – In WHCM, the illustration is dim in Chrome/Edge, but bold in Firefox
- [ ] LogicButton – "and" and "or" variants are the same in WHCM
- [ ] Menu – missing hover state
- [ ] Meter – Colors are not visible at all in Firefox
- [ ] Meter – colors of meter might not be high contrast enough?
- [x] ProgressCircle – Indeterminate over background is not visible
- [ ] SearchField/SearchAutocomplete – "x" button has a background that overlaps the focus ring
- [ ] SearchField – Icon is bold in Chrome/Edge but dim in Firefox
- [ ] StatusLight – Colors are not visible at all in Firefox
- [ ] StatusLight – The colors might not pass contrast in WHCM
- [x] Switch - Missing hover state for selected
- [x] TableView/ListView - missing keyboard focus and selection states
- [ ] Tabs – In firefox, selected tab text is not visible
- [ ] Tabs – transition on icon between selected and unselected states looks silly
- [ ] Tabs – with flex container story, first tab is not rounded
- [ ] Tabs - Missing hover state
- [ ] TextField – Validation icon is red/green in Firefox, but white in Edge
- [ ] TextField/TextArea/etc. – Disabled state in Firefox is not right
- [ ] Toast – Clear button does not have a hover state
- [ ] Tooltip – Arrow is a square in Firefox
- [ ] Tooltip – positive/negative/info variants have different colored tip, but not a different colored border

From 2nd testing session:
- [ ] ActionButton - Keyboard focus state should be blue like other components
- [ ] Calendar – Invalid state isn't very obvious. Invalid selected date is the same color as a normal selected date and the error message text is the same color
- [ ] Calendar - remove the highlight for today's date in WHCM, it is confusing since it looks the same as a selected date
- [ ] ColorArea - ColorArea should have a border around it to help contrast it against the background (see ColorSlider and ColorWheel)
- [ ] ColorSlider - Color thumb should have a white outline in light HCM themes
- [ ] ColorThumb - Color preview (tear drop) needs a thicker white outline
- [ ] DateField - Field doesn't get the proper hover state (no outline change), compare with DatePicker
- [ ] DateField - Missing styles for mouse focus state.
- [ ] NumberField - gets the keyboard focus style on mouse focus.
- [ ] NumberField/ComboBox - validationState=invalid has focus state by default
- [ ] Picker - placeholder text should look the same as normal text. Right now it is green like disabled text
- [ ] RangeCalendar - Keyboard focus ring isn't very visible when displayed on a selected date. Consider making it thicker or adding a black ring as well
- [ ] TableView - In highlight selection, the selected rows are not very visible compared to keyboard focused.
- [ ] Tabs - A border is added around the TabPanel in WHCM, is that intentional?
- [ ] Tabs - focus ring around the tab is hard to distinguish from the tab itself. should it be a halo ring?
- [ ] Tabs - icons in tabs flash weirdly when the tab is selected
- [ ] Tabs - faint blue tab line is still visible with isEmphasized style.
- [ ] Tabs - icons are white in isEmphasized tabs.
- [ ] TextField - validationState=invalid lacks hover state

For WHCM FF, there are many issues captured here: https://docs.google.com/spreadsheets/d/1p4VJnyVTab5BZE-iY9isv0NuZv6vx3W3ghzNWJN0HMY/edit#gid=515442378

Additonal FF issue:
- [ ] Checkbox - Focus ring is not visible in WHCM
- [ ] ComboBox chevron is hard to see in WHCM

Added [Chromatic Forced Colors Project](https://www.chromatic.com/builds?appId=651b502f6b74abaae4ee734c) and identified a few issues:
- [ ] [Action Group Emphasized outline](https://www.chromatic.com/test?appId=651b502f6b74abaae4ee734c&id=65286b7fda0594c86d013039)
- [ ] [Toggle Button Emphasized outline](https://www.chromatic.com/test?appId=651b502f6b74abaae4ee734c&id=65286b7fda0594c86d013040)
- [ ] [Logic Button background colors](https://www.chromatic.com/test?appId=651b502f6b74abaae4ee734c&id=65286b7fda0594c86d01303f)
- [ ] [Focused, Selected Calendar Cells](https://www.chromatic.com/component?appId=651b502f6b74abaae4ee734c&csfId=calendarcell&buildNumber=10&k=652877b35dc1e1b36ea8525f-1200px-snapshot-true&h=8&b=-2)
- [ ] Needs more stories migrated to forced colors

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.