Some buttons don't visually indicate state in an accessible manner.
type: bugneeds-redesignaccessibility
### Describe the bug
Many buttons visually indicate state by both a slight background change and an icon change, such as the emoji button which becomes solid instead of line art when activated. Not all buttons follow this scheme though, which is both confusing sometimes and inaccessible.
The accessibility problem is that the button background color has a less than 3:1 contrast ratio against the area background in some areas (such as the strikethrough button in the WYSIWYG editor), which violates [WCAG 2.2 SC 1.4.1 Use of Color (Level A)](https://www.w3.org/TR/WCAG22/#use-of-color) (see [How to Meet Use of Color](https://www.w3.org/WAI/WCAG22/quickref/#use-of-color) for why).
Themes tested:
- Dark
- Butter
- Light
- Silver
### Reproduction
As one example:
1. Enable the WYSIWYG editor by pressing the `Aa` button in the message input box.
2. Observe that the Aa icon itself changes.
3. Press the strikethrough button (make sure you haven't typed anything yet).
4. Observe that the button has no visual change.
### Expected behavior
Sometimes, this results in buttons not visually indicating their state at all, such as the strikethrough and and Markdown toggle buttons. Other times, it results in the button visually indicating in a different element, such as the Show/Hide Members button, which does not indicate state in its own right, but can be inferred through the presence or absence of the members list. All of the time, this leads to a mismatched user experience where some icons change to indicate button state and others do not.
### Platform and versions
```shell
1. OS: Windows 10
2. Broswer: Helium version 0.9.4.1
3. Cinny version: v1.11.1 PWA
```
### Additional context
In some cases, such as the emoji and sticker buttons, the icons themselves change from line to solid in addition to the background color changing. I think this would be a good approach everywhere because it's very hard to keep track of all possible contrast ratios across all the background shades in the interface.
See also [Markdown toggle button in WYSIWYG editor doesn't visually indicate state · Issue #2822 · cinnyapp/cinny](https://github.com/cinnyapp/cinny/issues/2822) ([Farside](https://farside.link/https://github.com/cinnyapp/cinny/issues/2822))
0 条评论