system/components/banners

ID:: system/components/banners
Automated score:: 95.9
URL:: https://stackoverflow.design/system/components/banners

5 violations: Light: 1Dark: 2HC Light: 1HC Dark: 1

button-name

Light Critical Go to issue button-name-light

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .is-pinned[role="presentation"][aria-hidden="false"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .mt8.s-banner__important.is-pinned > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

button-name

Dark Critical Go to issue button-name-dark

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .is-pinned[role="presentation"][aria-hidden="false"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .mt8.s-banner__important.is-pinned > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

button-name

HC Light Critical Go to issue button-name-light-highcontrast

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .is-pinned[role="presentation"][aria-hidden="false"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .mt8.s-banner__important.is-pinned > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

button-name

HC Dark Critical Go to issue button-name-dark-highcontrast

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .is-pinned[role="presentation"][aria-hidden="false"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.docs-preview:nth-child(4) > .docs-preview--example.ps-relative > .mt8.s-banner__important.is-pinned > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__info.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__success.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__warning.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__danger.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__featured.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link

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"

HTML

<button class="s-link s-banner--dismiss"><svg width="20" height="20" viewBox="0 0 20 20" class="svg-icon IconCross" aria-hidden="true"><path d="m9.75 8.69 1.06 1.06 4.9 4.9-1.06 1.06-4.9-4.9-4.9 4.9-1.06-1.06 4.9-4.9-4.9-4.9 1.06-1.06zm4.9-4.9 1.06 1.06-4.07 4.08-1.07-1.07z"></path></svg></button>

Target

.s-banner__activity.mt8.s-banner__important > .s-banner--actions > .s-banner--dismiss.s-link

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"

color-contrast-apca-custom

Dark Serious Go to issue color-contrast-apca-custom-dark

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

<em class="fc-black-350">N/A</em>

Target

#docs-table > table > tbody > tr:nth-child(1) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(1) > td:nth-child(3) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(2) > td:nth-child(3) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(3) > td:nth-child(3) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(4) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(5) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(6) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(7) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(8) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(9) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(10) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

tr:nth-child(11) > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

#banners-event-details-table > table > tbody > tr > td:nth-child(2) > em

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc