Quantity selector
Sizes
Please know that the small version is not really supposed to be used on touch devices to avoid misclicking. We recommend some blank space before and after the quantity selector to have the best user experience possible.
Accessibility and semantic
The input field element must always have an attribute id
Use the aria-label attribute on the input element to defines the accessible name of the quantity selector.
Use the aria-valuenow attribute on the input element to indicate the current numeric value of the quantity selector.
Use the aria-valuemin attribute on the input element to set the minimum value allowed for the quantity selector.
Use the aria-valuemax attribute on the input element to set the maximum value allowed for the quantity selector.
The buttons elements (mc-button) must always have an aria-controls attribute whose value corresponds to the value of the id attribute of the input field element.
The buttons elements (mc-button) must always have an aria-label attribute whose value defines the accessible name for each increase and decrease button.
The buttons elements (mc-button) must always have an aria-hidden="true" attribute to hide them for assistive technology users.