2024-03-06 Meeting notes

 Date

Mar 6, 2024

 Participants

  • @Adam Stankiewicz

 Goals

  •  

 Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

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:

 

image-20240306-135032.png
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.









 Action items

 Decisions

Looking for labels? They can now be found in the details panel on the floating action bar.

Related content