numericRangeInput ADA improvements

[carlganz]

library(shinyWidgets)

numericRangeInput(inputId = "age", label = "Age", min = 0, max = 100, step = 5, value = c(0, 100))

Produces

<div id="age" class="shiny-numeric-range-input form-group shiny-input-container">
  <label class="control-label" id="age-label" for="age">Age</label>
  <div class="input-numeric-range input-group">
    <input type="number" class="form-control" value="0" min="0" max="100" step="5"/>
    <span class="input-group-addon input-group-text rounded-0"> to </span>
    <input type="number" class="form-control" value="100" min="0" max="100" step="5"/>
  </div>
</div>

For ADA purposes, each of the input elements need to have their own labels.
The label element, in this case is orphaned. Meaning, it points to an element with id of age but there are no input element using that id. We usually use a fieldset to group related form elements.

[carlganz]

alternatively adding aria-label attributes to each individual input element would suffice perhaps with dynamic labels like {id} Minimum and {id} Maximum

[pvictor]

Hello,
Does adding aria-labelledby="age-label" to each input will solve the issue ? Similar to what is done in shiny::dateRangeInput("ID", "LABEL").

[carlganz]

Maybe, I was told each input needs a unique label so I don't think you can have both inputs aria-labelledbby="age-label", but I am not the expert unfortunately