Skip to content

EuiDualRange inputs are missing aria labels #2737

@cjcenizal

Description

@cjcenizal

This comment regards this type of range:

image

I'm not sure what the norm is for this type of input, but when I focus the left input VoiceOver reads aloud "20" followed by the help text, and when I focus the right input "100" followed by the help text. It seems like the user would need some additional information to tell the two inputs apart.

One way we could address this would be by applying default aria-label attributes of "Minimum" and "Maximum" to each input. Then we could also add an ariaLabels prop that could mirror the format of the value prop, which would be applied over these defaults.

<EuiDualRange
  value={[min.value as number, max.value as number]}
  ariaLabels={["Mininum number of midi-chlorians", "Maximum number of midi-chlorians"]}
/>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions