Back to Accessibility Report

Axe-core® Accessibility Results

axe-core found 18 violations

# Description Axe rule ID WCAG Impact Count
1 ARIA role should be appropriate for the element aria-allowed-role Best practice minor 1
2 ARIA input fields must have an accessible name aria-input-field-name WCAG 2 Level A, WCAG 4.1.2 serious 1
3 Certain ARIA roles must contain particular children aria-required-children WCAG 2 Level A, WCAG 1.3.1 critical 1
4 Buttons must have discernible text button-name WCAG 2 Level A, WCAG 4.1.2 critical 10
5 Form elements must have labels label WCAG 2 Level A, WCAG 4.1.2 critical 5

Failed

1. ARIA role should be appropriate for the element

Learn more

aria-allowed-role

Best practice

Ensure role attribute has an appropriate value for the element

minor

Issue Tags: cat.aria best-practice

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

Element location

.MultipleFlavorsSelector-module-main-OpCz1

Element source

<section class="MultipleFlavorsSelector-module-main-OpCz1" data-testid="MultipleFlavorsSelector" role="listbox" aria-invalid="true">

Fix any of the following:

  • ARIA role listbox is not allowed for given element

2. ARIA input fields must have an accessible name

Learn more

aria-input-field-name

WCAG 2 Level A, WCAG 4.1.2

Ensure every ARIA input 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

.MultipleFlavorsSelector-module-main-OpCz1

Element source

<section class="MultipleFlavorsSelector-module-main-OpCz1" data-testid="MultipleFlavorsSelector" role="listbox" aria-invalid="true">

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

3. Certain ARIA roles must contain particular children

Learn more

aria-required-children

WCAG 2 Level A, WCAG 1.3.1

Ensure elements with an ARIA role that require child roles contain 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

.MultipleFlavorsSelector-module-main-OpCz1

Element source

<section class="MultipleFlavorsSelector-module-main-OpCz1" data-testid="MultipleFlavorsSelector" role="listbox" aria-invalid="true">

Fix any of the following:

  • Element has children which are not allowed: [role=button], header[tabindex], footer[tabindex], ul[tabindex]

Related node:

.MultipleFlavorSelectorToggler-module-container-T2mS8[role="button"][type="button"]
.Drawer-module-drawerHeader-Rhr3k
footer
.Drawer-module-drawerBody-pc1Km > ul

4. Buttons must have discernible text

Learn more

button-name

WCAG 2 Level A, WCAG 4.1.2

Ensure buttons have discernible text

critical

Issue Tags: cat.name-role-value wcag2a wcag412 section508 section508.22.a TTv5 TT6.a EN-301-549 EN-9.4.1.2 ACT

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

Element location

ul > li:nth-child(1) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityMinus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityMinus" disabled="">

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 an empty 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"
2

Element location

ul > li:nth-child(1) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityPlus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityPlus">

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 an empty 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"
3

Element location

ul > li:nth-child(2) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityMinus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityMinus" disabled="">

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 an empty 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"
4

Element location

ul > li:nth-child(2) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityPlus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityPlus">

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 an empty 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"
5

Element location

ul > li:nth-child(3) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityMinus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityMinus" disabled="">

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 an empty 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"
6

Element location

ul > li:nth-child(3) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityPlus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityPlus">

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 an empty 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"
7

Element location

ul > li:nth-child(5) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityMinus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityMinus" disabled="">

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 an empty 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"
8

Element location

ul > li:nth-child(5) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityPlus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityPlus">

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 an empty 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"
9

Element location

ul > li:nth-child(6) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityMinus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityMinus" disabled="">

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 an empty 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"
10

Element location

ul > li:nth-child(6) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .QuantityInput-module-button-SAgKH[data-testid="quantityPlus"][type="button"]

Element source

<button type="button" title="" class="QuantityInput-module-button-SAgKH" data-testid="quantityPlus">

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 an empty 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"

5. Form elements must have labels

Learn more

label

WCAG 2 Level A, WCAG 4.1.2

Ensure every form element has a label

critical

Issue Tags: cat.forms wcag2a wcag412 section508 section508.22.n TTv5 TT5.c EN-301-549 EN-9.4.1.2 ACT

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

Element location

ul > li:nth-child(1) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .InputWrapper-module-container-3AbF2.QuantityInput-module-input-0V\+dc[data-testid="cartQuantity-container"] > .InputWrapper-module-wrapper-SGLx2[data-testid="textInputWrapper"] > input

Element source

<input class="TextInput-module-input-FNjui light-theme" data-testid="cartQuantity" title="" value="0">

Fix any of the following:

  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • 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 an empty title attribute
  • Element has no placeholder attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"
2

Element location

ul > li:nth-child(2) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .InputWrapper-module-container-3AbF2.QuantityInput-module-input-0V\+dc[data-testid="cartQuantity-container"] > .InputWrapper-module-wrapper-SGLx2[data-testid="textInputWrapper"] > input

Element source

<input class="TextInput-module-input-FNjui light-theme" data-testid="cartQuantity" title="" value="0">

Fix any of the following:

  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • 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 an empty title attribute
  • Element has no placeholder attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"
3

Element location

ul > li:nth-child(3) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .InputWrapper-module-container-3AbF2.QuantityInput-module-input-0V\+dc[data-testid="cartQuantity-container"] > .InputWrapper-module-wrapper-SGLx2[data-testid="textInputWrapper"] > input

Element source

<input class="TextInput-module-input-FNjui light-theme" data-testid="cartQuantity" title="" value="0">

Fix any of the following:

  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • 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 an empty title attribute
  • Element has no placeholder attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"
4

Element location

ul > li:nth-child(5) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .InputWrapper-module-container-3AbF2.QuantityInput-module-input-0V\+dc[data-testid="cartQuantity-container"] > .InputWrapper-module-wrapper-SGLx2[data-testid="textInputWrapper"] > input

Element source

<input class="TextInput-module-input-FNjui light-theme" data-testid="cartQuantity" title="" value="0">

Fix any of the following:

  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • 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 an empty title attribute
  • Element has no placeholder attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"
5

Element location

ul > li:nth-child(6) > .MultipleFlavorSelectorSticksBlock-module-block-dg49s > .MultipleFlavorSelectorSticksBlock-module-actions-YDKRC > .QuantityInput-module-container-5omIN > .InputWrapper-module-container-3AbF2.QuantityInput-module-input-0V\+dc[data-testid="cartQuantity-container"] > .InputWrapper-module-wrapper-SGLx2[data-testid="textInputWrapper"] > input

Element source

<input class="TextInput-module-input-FNjui light-theme" data-testid="cartQuantity" title="" value="0">

Fix any of the following:

  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • 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 an empty title attribute
  • Element has no placeholder attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"