a11y_styled_form_controls
a11y_styled_form_controls copied to clipboard
scottaohara
Various styled accessible form controls
the `output` element is part of the form elements family and maps to `role=status`, or at the very least a polite live region for most browsers. Create an explainer on...
Since native implementations of `input[type=file]` are quite varied, making for potentially unexpected announcements for a styled native file upload, based on its custom visual design, a new 'more custom' pattern...
Add a page to reference other people who have done / are covering similar ground. See Adrian’s posts on similar components https://codepen.io/smhigley/pen/yVaGGa Etc
Today some initial styling and documentation were added for single `select` elements, using the `required` attribute and `:invalid` CSS. The styling defaults the invalid Select element to appear red on...
There's not a whole lot that can be done here, but Firefox, Chrome and Edge all support some pseudo-element selectors for the input, e.g. `::-webkit-color-swatch-wrapper` and `::-webkit-color-swatch` Create an example...
Create / test for dark mode styles - [ ] checkboxes - [ ] radio buttons - [ ] radio star rating - [ ] radio pill - [ ]...
Following [adding support for `rtl` for `select` elements](https://github.com/scottaohara/a11y_styled_form_controls/commit/d22e0b30f3ed0e4905cfc91c63f9740ae53f1e76), retest other patterns to make sure they work with `rtl`. - [ ] checkboxes & radio buttons - [ ] switches and...
The current ARIA toggle button examples are all styled like switches, which is ok if switches were the only type of toggle buttons... but that's not true. This is a...
Create examples of various styles for text inputs and textareas. Document any potential pain points for the UX of certain styles. consider - float label inputs (and the issues they...
Fresh start for #7 Add examples of styling a multi-`select` element. - [ ] Multiple options viewable at once (max height / scrollable) - [ ] Single option viewable at...