Usability / Accessibility Improvements

[oncode]

Hello AdVendureRes 😛

I've used the Vendure admin area quite a lot in the last few months to fill up data and move around. I feel especially the often used areas catalog/sales/customer could be enhanced in terms of usability & accessibility to speed up the workflow. Maybe we don't want to achieve full access for users with limitations like blindness, but tabbable users are very common. I though I start a discussion here, to see how others feel and gather some feedback. Afterwards I could start a pull request.

Here some of the usability improvements I see:

• Skip Links would be nice to get faster to the content area and side navigation (see: https://res.cloudinary.com/practicaldev/image/fetch/s--fBGbLEUn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/d2hhn3iqsuq12jh0iura.gif).
• Some links (e.g. "View Contents" on collections page) and buttons (e.g. "View Details", "View as Table" on product variants) are tabbable, but they don't work with the Enter key, some work with Space key, others not (e.g. "Manage Variants").
• Implementing shortcuts like CTRL/ALT/CMD + S for saving entities, switching between detail and variants, etc.
• If no picture is selected on a product (variant), it would be nice if the "Select assets" dialog would be opened, if the placeholder image is clicked (also in table view of product variants).
• In the "Select assets" dialog, it would be nice if a double click on an image would select and confirm the image right away or/and if the user selects one or multiple pictures and presses the Enter key. On the "Assets" page, double click or/and Enter should open the preview or edit.
• Another handy edit feature would be, that when I'm tabbing inside a table, I could use a key combination, to focus the next element on the next row in the same column, so when I'm e.g. changing the price of every variant I could move quickly between price fields of every row (e.g. ALT + Up/Down Arrow).
• Button Groups like on "Orders" page are not reachable with arrow keys (could be implemented with hidden radio inputs).
• Readonly fields have the same styling as normal ones (could be confusing, e.g. when editing customers and trying to edit a field without click the edit button first).
• The side navigation has focusable titles like "Catalog" or "Sales" even though they are not expandable, they should be skipped when the user tabs through.
• Dropdowns are not tabbable or/and usabble with arrow keys.
• ...

[michaelbromley]

This is really good feedback, thanks.

I'd like the Admin UI to be as accessible as possible. So far I've not done any specific work on accessibility, as I have noticed that the underlying Clarity lib already does a decent job of this as far as I can tell. What I intend to do right now is focus on getting the remaining issues resolved for v1.0, and the issues you outline above (and other similar ones) I will get to after that, as they are not breaking changes and can be done as we refine the v1 product.

Of course, I am always open to PRs implementing accessibility/usability improvements at any time.