Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Study usage of <fieldset> around .quantity-selector #2303

Open
2 tasks done
louismaximepiton opened this issue Oct 11, 2023 · 0 comments
Open
2 tasks done

Study usage of <fieldset> around .quantity-selector #2303

louismaximepiton opened this issue Oct 11, 2023 · 0 comments

Comments

@louismaximepiton
Copy link
Member

Prerequisites

Proposal

Study a11y of this component and transform the HTML of the Quantity Selector if agreed by a11y experts to:

<fieldset class="quantity-selector">
  <legend>Blah blah</legend>
  <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
    <span class="visually-hidden">Step down</span>
  </button>
  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
    <span class="visually-hidden">Step up</span>
  </button>
</fieldset>

Motivation and context

Easier to use from an end-user pov (disabled state on QS only will make it work).
Better Accessibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant