Open mootari opened 2 years ago
For reference: both the blue text (font:13px...
) and the red text (div
) fail to meet WCAG contrast guidelines. The blue has a contrast of 2.42 and the red 3.82. The WCAG standard for accessible text is a contrast of 4.5 for body text, which I think this counts as.
The highlighting is also inconsistent:
Describe the bug
When a non-empty element without a closing tag is edited inside a Markdown or HTML cell, the opening tag is highlighted in red(-dish) while the cursor is between
<
and>
. The resulting contrast makes the edited text barely legible.Suggested solution
Highlight only the tag name, or highlight the tag only while the cursor is within the tag name.
Additional context
While Observable's editor automatically adds closing tags, this autocompletion rarely kicks in (in the intended way) during my editing behavior. I often edit large chunks of attributes where the highlight background becomes a major annoyance. I also skip the closing tag most of the time, because
htl
takes care of it automatically.