booc0mtaco / start Goto Github PK

Handle Navigation

With this site, there will be a grid of buttons to navigate to a new page. We expect by default that tabbing thru the results should highlight each option, and describe the option at the cursor, and tell the user what that option is (for screen reader support). Further, we should allow for keyboard navigation to work.

• Arrow keys will move between each option until the edges of the grid are hit. Once the edge is hit, no wrapping will occur
• However, when tabbing, it should wrap back around to the initial option on the page (depending on the layout, the first button, or the first page control (for edit, etc.))

TODO

• enable support for tabbing thru buttons
• enable support for using arrow keys to navigate thru buttons with wrap prevention (down/right are forward, up/left are back)
• enable visual indicators for focused button
• enable handling for activation keys on focused button (enter/space keys, or VO-activation)
• enable appropriate roles for buttons

User Notification

We should provide a notice to the user for buttons, by adding a target for AX messaging. When a button is activated, it should tell the user what is being opened while (or before) opening it.

TODO

• support screen readers with hidden container set to aria-live="polite" (e.g., role="alert")

Initial State

When the page loads, it should automatically target the initial start point. In this case, We should make sure that when the user is able to press any control, it will land on the top-left button to start.

TODO

• upon load, make sure that the first tab or arrow starts on the first button
• reloads should preserve this

is the button component following the proper rules?

preferably on buttons directly, BUT also at app level in case that doesn't cut it.

• handles QWERTY keyboard layout

q w e r
a s d f
z x c v

Now that I have switched to Colemak, having a QWERTY layout for the shortcut keys no longer cuts it. allow shortcuts to be configured as well.

Put together a roadmap for myself so I can make meaningful progress in an orderly fashion.

Gulp has grown stale and has security issues. Move from it, and on to Parcel.

https://parceljs.org/

either do some FTP action to push files to /start, or host it via one of these newer, fancier containers out there b/c why not?

e.g., https://devcenter.heroku.com/articles/github-integration

requires:

• adding some CSS for edit components
• binding fields for each input
• toggling editing modes
• show/hide for app and buttons

Note:

• does not include any editing options outside of the current app's behavior (individually changing each option via clicks)

Using mocha or similar (jest, ava, etc.)