product/components/editor

ID:
product/components/editor
Automated score:
92.3
URL:
https://stackoverflow.design/product/components/editor
View JSON file

9 violations: Light: 2 Dark: 3 HC Light: 2 HC Dark: 2

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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.overflow-auto.hmn2 > .outline-none.p12.pt6

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

<div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-350 js-language-indicator" contenteditable="false">xml</div>

Target

.ow-normal.p0.ws-normal:nth-child(2) > .t2.r4.us-none

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 39.26Lc (foreground color: #a7adb4, background color: #f6f6f6, font size: 8.3pt (11px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-350 js-language-indicator" contenteditable="false">javascript</div>

Target

.ow-normal.p0.ws-normal:nth-child(26) > .t2.r4.us-none

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 39.26Lc (foreground color: #a7adb4, background color: #f6f6f6, font size: 8.3pt (11px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<code>stackexchange/stacks</code>

Target

a > code

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.8Lc (foreground color: #1b75d0, background color: #e3e6e8, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

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

<span class="hljs-comment">// Don’t forget to include the styles as well</span>

Target

.language-js.s-code-block > .hljs-comment

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- Include the bundled styles --&gt;</span>

Target

.hljs-comment:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- highlight.js is not included in the bundle, so include it as well if you want it --&gt;</span>

Target

.hljs-comment:nth-child(10)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- Include the bundle --&gt;</span>

Target

.hljs-comment:nth-child(16)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- Initialize the editor --&gt;</span>

Target

.hljs-comment:nth-child(22)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-350 js-language-indicator" contenteditable="false">xml</div>

Target

.ow-normal.p0.ws-normal:nth-child(2) > .t2.r4.us-none

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 59.14Lc (foreground color: #acb3b9, background color: #1d1b1b, font size: 8.3pt (11px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- ... --&gt;</span>

Target

.content-dom > .hljs-comment

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-350 js-language-indicator" contenteditable="false">javascript</div>

Target

.ow-normal.p0.ws-normal:nth-child(26) > .t2.r4.us-none

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 59.14Lc (foreground color: #acb3b9, background color: #1d1b1b, font size: 8.3pt (11px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<code>stackexchange/stacks</code>

Target

a > code

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57Lc (foreground color: #90c4f9, background color: #424548, font size: 9.8pt (13px), font weight: 400). 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.87 (foreground color: #145799, background color: #e3e6e8, font size: 9.8pt (13px), 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.98 (foreground color: #8cbff2, background color: #424548, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://stackoverflow.com">Stack Overflow</a>

Target

p:nth-child(35) > a[href$="stackoverflow.com"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.75:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #f9fafa)
  • The link has no styling (such as underline) to distinguish it from the surrounding text