Color contrast checking of unicode private use characters #2101
Comments
|
Also, thanks for all your work on axe-core! We use it extensively at Airbnb. For example, we've ran axe on around 16,840 CI builds so far this year. It's been instrumental to helping scale our accessibility efforts. |
Resolves #2101. Characters in this range are not in the Basic Multilingual Plane [1]. 1. https://en.wikipedia.org/wiki/Private_Use_Areas
I originally added an additional range to the regex in #2102 while working on #2101. The purpose of it was to match unicode characters in Supplementary Private Use Area A, and I got the regex itself from https://apps.timwhitlock.info/js/regex. However, upon further review, it's clear that - for the most part - the added regex is the same as what was previously there. The existing part was: [\uDB80-\uDBBF][\uDC00-\uDFFD] The part I added (with an "or") was: [\uDB80-\uDBBE][\uDC00-\uDFFF]|\uDBBF[\uDC00-\uDFFD] Note the overlap in the ranges. In fact, as far as I can tell, they're equivalent, except the previous part excluded anything where the low surrogate was DFFE or DFFF. In this commit I've removed the unnecessary added portion after the "or", and fixed the original regex so that it correctly captures all characters in the range.
|
Hi, it looks like my team is also having an issue here because of the nonBmp rule. We are also using a custom font to render icons and some of our tests are broken. Is there a way to turn off the rule or to modify the rule? |
|
You can disable color-contrast completely, buy I don't think there's a way to modify the rule to flag icons. Would you be able to provide an example of the problem? Would love to see what's going on and maybe we can look into fixing it. |
|
Yes, of course. We are using FluentUI's IconButton to build our UI and therefore we render non-text only on our buttons. FluentUI provides also some mecanisms to provide a custom icon font. We don't want to disable all the color contrast rules because they are important, but only this particular rule. |
Axe version: 3.5.2
OS: MacOS and Linux
Browsers: Firefox and Chrome
My company uses a custom font to render various icons for certain unicode characters. It looks like #2005 fixed the color-contrast rule for non-BMP characters, and now I'm getting color-contrast failures that I don't expect.
I believe this is caused by the non-BMP regex not matching characters in Supplementary Private Use Area-A
Changing this would solve our issue, and I'd be happy contribute fixes for either or both of them, if this seem reasonable.
Our setup
We use a custom font to show icons for unicode characters in Supplementary Private Use Area-A. For example:
The red star, checkmark, and medal icons are the characters in question, and are now failing color-contrast checks. I believe they meet the "incidental" exception to the minimum contrast success criteria.
Possible fix
The characters in question are in the range F0000–FFFFD, and outside the Basic Multilingual Plane range. We could add this range to the regex for testing non-BMP characters.
Let me know if this makes sense, and I'd be happy to contribute a fix.
The text was updated successfully, but these errors were encountered: