USWDS - Range: add ARIA attribute.

[mejiaj]

Preview

Range slider →

Description

Fixes #4265; add missing range attributes.

Added the last four values.

<label class="usa-label" for="usa-range">Range slider</label>
<input
  id="usa-range"
  class="usa-range"
  type="range"
  min="0"
  max="100"
  step="10"
  value="20"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="20"
  role="slider"
>

Additional information

Alternatively, we could enhance the component by adding an output element after: example →

This uses nextElementSibling to select the output element. We could improve it further if we changed the markup. Something like:

<div class="usa-range">
  <label for="" class="usa-range__label usa-label">Range input</label>
  <input type="range" class="usa-range__input" value="20">
  <output class="usa-range__output">20</output>
</div>

But this would be a breaking change.

---

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.