mdn / mdn/fred

Drop-Down notes in Browser compatibility table use graphic symbols with a meaning *opposite* the intent

Open
#968 1 comment 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.