system/components/editor

ID:
system/components/editor
Automated score:
87.8
URL:
https://stackoverflow.design/system/components/editor
View JSON file

15 violations: Light: 4Dark: 3HC Light: 4HC Dark: 4

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

Ensure every ARIA input field has an accessible name. ARIA input fields must have an accessible name. Help URL

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no"><p><br class="ProseMirror-trailingBreak"></p></div>

Target

#editor-example-1 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no">

Target

#editor-example-2 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

Ensure every ARIA input field has an accessible name. ARIA input fields must have an accessible name. Help URL

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no"><p><br class="ProseMirror-trailingBreak"></p></div>

Target

#editor-example-1 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no">

Target

#editor-example-2 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

Ensure every ARIA input field has an accessible name. ARIA input fields must have an accessible name. Help URL

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no"><p><br class="ProseMirror-trailingBreak"></p></div>

Target

#editor-example-1 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no">

Target

#editor-example-2 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

Ensure every ARIA input field has an accessible name. ARIA input fields must have an accessible name. Help URL

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no"><p><br class="ProseMirror-trailingBreak"></p></div>

Target

#editor-example-1 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

HTML

<div class="fl-grow1 outline-none p12 pt6 w100 s-prose js-editor ProseMirror" role="textbox" aria-multiline="true" contenteditable="true" translate="no">

Target

#editor-example-2 > .z-base.s-textarea.hmn2 > .outline-none.pt6.js-editor

Summary

Fix any of the following:

  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<code>stackexchange/stacks</code>

Target

a > code

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.3Lc (foreground color: #6b6d73, background color: #dee0e3, font size: 9.2pt (12.25px), font weight: 500). Expected minimum APCA lightness contrast of 60Lc

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<code>stackexchange/stacks</code>

Target

a > code

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.85 (foreground color: #505355, background color: #dee0e3, font size: 9.2pt (12.25px), font weight: normal). Expected contrast ratio of 7:1

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<code>stackexchange/stacks</code>

Target

a > code

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.87 (foreground color: #d9d3ce, background color: #575757, font size: 9.2pt (12.25px), font weight: normal). Expected contrast ratio of 7:1

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="s-code-block js-code-view js-code-mode">

Target

.ow-normal.ws-normal.p0:nth-child(2) > .js-code-view.js-code-mode

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="s-code-block js-code-view js-code-mode">

Target

.ow-normal.ws-normal.p0:nth-child(2) > .js-code-view.js-code-mode

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="s-code-block js-code-view js-code-mode">

Target

.ow-normal.ws-normal.p0:nth-child(2) > .js-code-view.js-code-mode

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="s-code-block js-code-view js-code-mode">

Target

.ow-normal.ws-normal.p0:nth-child(2) > .js-code-view.js-code-mode

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable