2024-03-06 Meeting notes

Missing official support for range input types

@Adam Stankiewicz

(on behalf of Maham Akif)

Form.Control (docs) supports several native input types:

• text

• textarea

• select

• password

• date

• number

• time

However, there exists at least one use case for an accessible range input type:

Open

Use case for range input

<input type="range"> - HTML: HyperText Markup Language | MDN

Form.Control technically does support passing type="range", however it provides no theming support as it renders a natively styled range control.

Playground Demo

Notes:

• Usability issues?

• What other theming concerns?

  • Accent color

  • Background color of slider

    • A11y

      • Filled state needs to have minimum 3:1 contrast vs. non-filled state.

• Other use cases?

  • Labels positioned above vs. below range input.

• What’s built-in to the component vs. up to the consumer?

• [Jeff] We might have had a range slider use case before. We should try to dig it up.

  • a11y

    • Numeric value might not always be user-friendly (e.g., for screen readers).

    • Ideally can provide a user-friendly label instead of the numeric value.

      • [Adam] Tried this with VoiceOver with the above POC, but couldn’t get it to read the user-friendly label (would always read the numeric value instead, even with aria-valuenow (or the related attribute).

    • General preference for native HTML types over custom element with aria attributes.

    • Focus styling?

Next steps

• Create Paragon issue, that we do want this to be officially supported.

• Check in if we can link the new issue to a relevant PR for future reference, to ensure it suits the needs.