Drop-Down notes in Browser compatibility table use graphic symbols with a meaning *opposite* the intent
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 233
- Forks
- 61
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 82
Description
The Browser compatibility table drop-down notes use graphic symbols instead of words to convey meaning. However the meaning conveyed is the opposite of the probable intent. Reading from the table legend, the ⨂︎ style symbol is described as meaning "No support", and the ✓style symbol is described as meaning "Full support". Also, the gray ●︎ style symbol is not listed at all in the legend, and thereby, apparently has no meaning in the drop-down notes.
Consider, as example of the misleading and contrary meaning of a drop-down note, reading from the Browser compatibility table at https://developer.mozilla.org/en-US/docs/Web/CSS/break-before , at the feature "page and avoid-page", for the Opera browser, then selecting the drop-down note, we see:
⨂︎ Opera 11.1 – 12 (Released 2011-04-12)
|
●︎ Removed in 12.1 and later
Based upon the interpretation of the symbols from the table legend, this note says:
"Opera 11.1 – 12 has 'No support' in 11.1 - 12", and then transitions to "[ this feature ] was 'Removed' in versions 12.1 and later",
which means that this feature went from "No support in 11.1 - 12" to a state of "No support in versions 12.1 and later", which is equivalent to saying "This feature has never had support," which renders the drop-down note meaningless.
As I have been told, this note actually is suppose to mean that the browser did have support, and that subsequently, support for the feature was removed. If that interpretation is correct, then the proper drop-down note graphic symbols should be shown instead as:
✓ Opera 11.1 – 12 (Released 2011-04-12)
|
⨂︎ Removed in 12.1 and later
where, again, the gray circle symbol has no meaning, is not included in the legend, and is not needed for any purpose.
See also the discussion at https://github.com/mdn/content/issues/39204
See also the Issue raised at https://github.com/mdn/yari/issues/12776 which addresses accessibility when graphics symbols are used in place of words.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the browser compatibility table on the linked CSS break-before page and review the related discussions in mdn/content#39204 and mdn/yari#12776. Verify how the dropdown symbols are mapped to support states and accessibility meaning; done means the symbols match the legend, the gray symbol is removed or defined, and the displayed note accurately describes support changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100