Back to Accessibility Report

Axe-core® Accessibility Results

axe-core found 4 violations

# Description Axe rule ID WCAG Impact Count
1 Certain ARIA roles must be contained by particular parents aria-required-parent WCAG 2 Level A, WCAG 1.3.1 critical 2
2 ARIA toggle fields must have an accessible name aria-toggle-field-name WCAG 2 Level A, WCAG 4.1.2 serious 2

Failed

1. Certain ARIA roles must be contained by particular parents

Learn more

aria-required-parent

WCAG 2 Level A, WCAG 1.3.1

Ensure elements with an ARIA role that require parent roles are contained by them

critical

Issue Tags: cat.aria wcag2a wcag131 EN-301-549 EN-9.1.3.1

# Issue Description To solve this violation, you need to...
1

Element location

.ColorSelector-module-dotContainer-XuQhO[role="option"]:nth-child(1)

Element source

<div class="ColorSelector-module-dotContainer-XuQhO" role="option">

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
2

Element location

.ColorSelector-module-dotContainer-XuQhO[role="option"]:nth-child(2)

Element source

<div class="ColorSelector-module-dotContainer-XuQhO" role="option"><div class="ColorSelector-module-dot-eWrwf"><div style="background-color: rgb(28, 10, 28);"><span class="ColorSelector-module-dotLine-+6PPB" style="border-top-color: rgb(28, 10, 28);"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox

2. ARIA toggle fields must have an accessible name

Learn more

aria-toggle-field-name

WCAG 2 Level A, WCAG 4.1.2

Ensure every ARIA toggle field has an accessible name

serious

Issue Tags: cat.aria wcag2a wcag412 TTv5 TT5.c EN-301-549 EN-9.4.1.2 ACT

# Issue Description To solve this violation, you need to...
1

Element location

.ColorSelector-module-dotContainer-XuQhO[role="option"]:nth-child(1)

Element source

<div class="ColorSelector-module-dotContainer-XuQhO" role="option">

Fix any of the following:

  • Element does not have 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
2

Element location

.ColorSelector-module-dotContainer-XuQhO[role="option"]:nth-child(2)

Element source

<div class="ColorSelector-module-dotContainer-XuQhO" role="option"><div class="ColorSelector-module-dot-eWrwf"><div style="background-color: rgb(28, 10, 28);"><span class="ColorSelector-module-dotLine-+6PPB" style="border-top-color: rgb(28, 10, 28);"></span></div></div></div>

Fix any of the following:

  • Element does not have 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