adamsilver / nostyle

NoStyle Design System by Adam Silver

NoStyle Design System by Adam Silver

This contains all the stlyes, components and patterns from my book Form Design Patterns published by Smashing Magazine in 2018.

Enjoy.

nostyle's Issues

Autocomplete's aria-live region should clear itself out so it can't be navigated to

This happens in any screen reader. For example, with NVDA + Firefox:

1. Go to https://nostyle.herokuapp.com/examples/autocomplete
2. Tab to the control to focus it and type "states"
3. Use NVDA + SPACE to switch out of forms mode and into browse mode
4. Press ARROW_DOWN. Virtual cursor will be moved to the little dropdown arrow, which announces as "clickable" (could be an issue in and of itself)
5. Press ARROW_DOWN again

Virtual cursor is moved to the hidden aria-live region, where user hears "3 results".

This can be fixed by clearing out the contents of the aria-live region 500ms after it's been added.

View standalone covers search button

on http://nostyle.herokuapp.com/patterns/search the link to view standalone covered the magnifier glass button. Consider adding some margin on top of the header so it clears the overlay link?

Autocomplete needs to update the select box under the hood when the user types an exact match and then blurs/tabs

Use faker for products and colour them to see updates

W3C HTML validation issue with your validation script

On pages where you use your validation script you add directly into the DOM the following:

<div tabindex="-1" role="group" class="errorSummary hidden" aria-labelledby="errorSummary-heading"></div>

Although this is hidden prior to error, it causes a W3C validation error.

You can’t have the aria-labelledby at this point because the attribute must point to an element in the same document. At this point it has not been injected into the page.

It might be worth adding this attribute at the point of an error instead of adding it directly.

Rename checkbox group to checkboxes

Rename radio buttons to radios

Create legend/label macro for consistency/reuse

Stepper touch improvement

Hi there

Just saw your form design system in the Smashing newsletter. Checked it on mobile and thought I'd let you know that adding touch-action: manipulation; to the stepper component drastically improves the user experience since tapping on the - or + button multiple times in a row will most likely trigger a browser zoom (it will see this as a double-tap).

There is 90% browser support and no problem if older browsers will ignore this:
https://caniuse.com/?search=touch-action
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Seat chooser - missing visual focus on selected seat

For the Seat Chooser component, when tabbing to a selected seat (green), it's missing a visual focus indicator (focus ring).

https://nostyle.onrender.com/components/seat-chooser

Validation page match client side rules with server side rules

Rename add another form

Add seat chooser as a component