NightCatSama/vue-slider-component

Accessibility failure on vue-slider-dot class.

adholland opened this issue · 2 comments

Using lib version 3.2.23.

AXE accessibility tool generates a report failure for the aria-valuetext on the vue-slider-dot class. This is due to the associated value being 0, which results in an empty aria-valuetext attribute. It seems that it should be a relatively straight forward fix. However, it is high priority, as its a critical failure of our Accessibility tests.

The report:
image

For example: -
<div aria-valuetext="" class="vue-slider-dot" role="slider" aria-valuenow="0" aria-valuemin="0" aria-valuemax="78" aria-orientation="horizontal" tabindex="0" aria-label="Select time" style="width: 14px; height: 14px; transform: translate(-50%, -50%); top: 50%; transition: left 0.5s ease 0s; left: 0%;"><div class="vue-slider-dot-handle"></div></div>

In the above failure case the aria-valuetext="", it should be aria-valuetext="0".

If the associated value is greater than 0 then the aria-valuetext has the value (this is correct): -
<div aria-valuetext="78" class="vue-slider-dot" role="slider" aria-valuenow="78" aria-valuemin="0" aria-valuemax="78" aria-orientation="horizontal" tabindex="0" aria-label="Select time" style="width: 14px; height: 14px; transform: translate(-50%, -50%); top: 50%; transition: left 0.5s ease 0s; left: 0%;"><div class="vue-slider-dot-handle"></div></div>

Thanks
Ashley

fix in 3.2.24