[Fixes #448] Draft PR for VPAT Compliance

[omargfh]

No description provided.

[TheBizzle]

😎

Thanks for taking care of this! 🙇‍♂️

I left a ton of comments here, but it's nearly all code style stuff. I'm not sure if you did or didn't do this, but always make sure to go over the diffs of your changes before submitting, to check for errors and see if you can think of any ways you might have been able to do things better.

Regardless, the substance of the functionality seems pretty good. I like that you were able to isolate most of the CoffeeScript changes to a separate accessibility package. keybinds.coffee seems particularly nice. I really like it when powerful things can just be simple and declarative.

There's no rush for addressing these things, I think, as I am not trying to get it into the NLW bundle for 7.0.1.

[TheBizzle]

My first read of this is "keyStringTable is an object with only one key: String, which is of type String". On the second or third parse, my brain understood that you were specifying that the keys are strings, but, generally, you don't have to do that, because JavaScript demands that the keys of all objects are strings, regardless. Sometimes, I'll explicitly point out that I'm trying to only put numbers in as keys (for example), but a key type of String should be the first assumption, since it's the only true reality. I'd just write this type as Object[String].

[omargfh]

Object keys in JavaScript need not be only strings: since ES6, keys are of type string | Symbol. Further, object notation coalesces anything that is not a string to a string using its prototype.toString method. A common pattern is custom classes that evaluate keys internally using toString, and its useful to specify those as well. One can say that keys are of type string | Symbol | object noting that objects are not keyed on object identity (but they could be*).

function id() {
  return Math.random().toString(36).slice(2); // simple unique ID
}

class ObjectWithIdentity {
  constructor(...args) {
    Object.assign(this, ...args); // if you want to merge props
    this.id = id();
  }

  toString() {
    return String(this.id);
  }
}

const x = new ObjectWithIdentity({ ... })
const y = new ObjectWithIdentity({ ... })

const z = { [x]: ..., [y]: ...} // <= This is valid

Regarding semantic, TypeScript types these as either Record<K, V> where K is the key and V is the value type using the generic pattern or

{
  [k: K]: V
}

using the indexing pattern. I'll use one of these because Object[String] is ambigious.

[LaCuneta]

This is all just functionality testing, I didn't review the code yet. Most of the testing is in Chrome, some in Firefox as noted.

• When I tab to the go button of a model and hit space bar or enter, nothing happens. On Firefox, space bar does a page down. I assume this is something particular to forever buttons, since the setup buttons work fine.
• When I click on a button widget with the mouse, it doesn't get the focus highlight but the button is set as the current element for keyboard access. As such I don't know what will happen if I start trying to tab around. I think it should get the visual focus, too.
• When I Tab through a slider, it lets me adjust the actual slider with left-right arrows. But I cannot tab to the number entry to type in a number. It feels like I should be able to do either, tab through both slider controls.
• "You should be able to escape text areas (e.g. the Code tab's editor) to resume tabbing through the page" - this is marked as complete in the issue, but doesn't work for me. Hitting Esc doesn't do anything in the model code editor.
• If I open the code tab, hit Ctrl-1 to go to the command center, things work as expected, it opens and I can type a command. If I hit Ctrl-2 to go back to the still-open code tab, the code tab closes instead.
• If I have the command center open and then start trying to tab to the model widgets, focus can bounce over to the Clear button in the command center. With Wave Machine it went from the setup button to Clear. This didn't occur every time, but it definitely did happen, most common was after playing with the Ctrl-# hotkeys for a bit.
• The authoring/interactive Mode button and Commands and Code placement button are not in the tab order, I never get the chance to access them via keyboard shortcut. The Mode actually has a hotkey combination, but it still seems odd you can't get there by tabbing.
• Input widgets with type of String (reporter) and String (command) allow tabbing for focus, but you can't actually edit them; you still have to click to the edit window before can type.
  • Related: If I tab through all the widgets in the model, it then goes through many of the top buttons (powered by NetLogo, File: New, etc), but after getting through those (speed slider last), it then goes to the actual code editor control of the String (reporter) input widget! That code editor control then starts capturing tabs to turn them into, well, textual tabs, so I cannot get out of that input once I'm there. All Widgets model in demomodels is a good one to test with.
• When I load a model using Launch and it's ready, I first hit tab and it goes to setup (or the top-leftist widget) on most models I've tried. This seems totally fine. If I use Shift-Tab to go backwards from here the focus goes up to Upload a Model and then the models library drop-down, then up to the top nav-bar manu. I would've expected it to go through the model speel slider, mode button, commands and code setting, and model export/file buttons first before getting up to those other choices. Note that if I tab "down" through the widgets all the way, once I get through the last widget it does circle back to the top of the model, the powered by NetLogo link, then the model file options, etc.
• If I Shift-Tab to get up to the top nav-bar menu, Documentation isn't selectable, but the rest are. I assume this is because the docs entry pops out a dropdown, but it should still be keyboard accessible, I'd think.
• Output Widgets and Monitors are tabbable, which is fine, but you can't actually do anything when they are selected. Maybe letting Ctrl-C copy their current value when selected would be useful to users?
• We should add the new hotkeys for command center, code, and info to the quick help popup displayed when you press ?
  • We should probably add a link/button for the keyboard quick-help that also displays it's keyboard shortcut. To me it's not very discoverable.

[LaCuneta]

I'm noting these here, for now, as I noticed them in testing, but they should be split out into separate issues as they're out-of-scope:

• The new shared color input control doesn't seem very keyboard-friendly, I wasn't able to select a color using the keyboard.
• Authoring via keyboard needs some work, at a minimum I noticed that while I could open the right-click menu for a widget with the "context menu" keyboard button, nothing on the menu was selected and the arrow keys didn't make or move a selection up or down for me to choose Edit or Delete, etc.

[omargfh]

@LaCuneta I'll take a look over everything more in depth but a few notes.

• If I open the code tab, hit Ctrl-1 to go to the command center, things work as expected, it opens and I can type a command. If I hit Ctrl-2 to go back to the still-open code tab, the code tab closes instead.

Ctrl+{1,2,3} Open/Close the tabs. You are looking for Ctrl+Shift+{1,2,3} for Focus tabs 1,2,3.

• "You should be able to escape text areas (e.g. the Code tab's editor) to resume tabbing through the page" - this is marked as complete in the issue, but doesn't work for me. Hitting Esc doesn't do anything in the model code editor.

Esc could be captured by many things. Use alt+t and shift+alt+t to mock tab and shift+tab

We should add the new hotkeys for command center, code, and info to the quick help popup displayed when you press ?

It's under F1 now.

[LaCuneta]

Ctrl+{1,2,3} Open/Close the tabs. You are looking for Ctrl+Shift+{1,2,3} for Focus tabs 1,2,3.

Nice! I'd definitely consider reversing those functions (Ctrl-1 to focus, Ctrl-Shift-1 to open/close), though. I think wanting to focus will be much more common than wanting to close.

Esc could be captured by many things. Use alt+t and shift+alt+t to mock tab and shift+tab

👍 Alt-t seems to work, Shift-Alt-t does nothing for me on Chrome/Firefox+Ubuntu.

It's under F1 now.

Ah, neat! The ? key does still show the old popup, though. That should either be removed or set to show the same info as F1. Esc does not banish the popup as it did for the prior one. Ctrl-H (which I see in the new listing) also seems to do the same thing as ?, which seems odd. And on Chrome+Ubunut (not Firefox) hitting F1 does bring the new help window up, but it also brings up Chrome's help window in a new tab. The mock tab Alt-t and Shift-Alt-t should probably also be moved to the code editor list in the new popup along with find usages and comment/uncomment.

[LaCuneta]

👍 Alt-t seems to work, Shift-Alt-t does nothing for me on Chrome/Firefox+Ubuntu.

I have thought about this a bit more, and with the shortcuts to jump to command center, code, and info, I'm not sure tabbing through those in order even makes much sense, but it's fine to have the option. What I do really want when I'm "done" with the code tab or command center is usually to jump back to the widgets/interface. So I think a Ctrl-0 to jump focus to the first widget might make sense to have.

The mock tab Alt-t and Shift-Alt-t should probably also be moved to the code editor list in the new popup along with find usages and comment/uncomment.

I see that this is also used to break out of the command center input where Tab changes the context the code will run it. I think it still might be better to have the hotkey listed in both places, then.

[omargfh]

@LaCuneta

• When I tab to the go button of a model and hit space bar or enter, nothing happens. On Firefox, space bar does a page down. I assume this is something particular to forever buttons, since the setup buttons work fine.

Fixed in caebfa6.

When I click on a button widget with the mouse, it doesn't get the focus highlight but the button is set as the current element for keyboard access. As such I don't know what will happen if I start trying to tab around. I think it should get the visual focus, too.

HTML differentiates :focus and :focus-visible psuedo-selectors. Ideally, you either want to tab or use a mouse, not both. I would not like highlighting everything on focus (try it with any web app).

When I Tab through a slider, it lets me adjust the actual slider with left-right arrows. But I cannot tab to the number entry to type in a number. It feels like I should be able to do either, tab through both slider controls.

When we updated the styling of widgets, we decided that the number entry would not be focusable to allow for left-right and up-down arrows to work by default. I added Meta+I to switch between the slider and number entry.

"You should be able to escape text areas (e.g. the Code tab's editor) to resume tabbing through the page" - this is marked as complete in the issue, but doesn't work for me. Hitting Esc doesn't do anything in the model code editor.

I'm going through your entire comment, so for the sake of completeness: alt+T and shift+alt+T are mock keybinds for Tab and Shift+Tab to move focus out of the code editor. Esc is not a keybind for this action as it may be captured by the code editor itself. I did a patch for a related bug in 5c6d687.

If I open the code tab, hit Ctrl-1 to go to the command center, things work as expected, it opens and I can type a command. If I hit Ctrl-2 to go back to the still-open code tab, the code tab closes instead.

Discussed.

If I have the command center open and then start trying to tab to the model widgets, focus can bounce over to the Clear button in the command center. With Wave Machine it went from the setup button to Clear. This didn't occur every time, but it definitely did happen, most common was after playing with the Ctrl-# hotkeys for a bit.

[CANNOT REPRODUCE] [EXPECTED] I can't reproduce this. Also, from the sound of it, this is the expected behavior. Clear comes after the command center input in the tab order.

The authoring/interactive Mode button and Commands and Code placement button are not in the tab order, I never get the chance to access them via keyboard shortcut. The Mode actually has a hotkey combination, but it still seems odd you can't get there by tabbing.

Added new global on-activateClick event to toggle these buttons.

Input widgets with type of String (reporter) and String (command) allow tabbing for focus, but you can't actually edit them; you still have to click to the edit window before can type.

Fixed in 28fe74a. In particular, the code editor now receives the correct tabindex so it can be focused.

Related: If I tab through all the widgets in the model, it then goes through many of the top buttons (powered by NetLogo, File: New, etc), but after getting through those (speed slider last), it then goes to the actual code editor control of the String (reporter) input widget! That code editor control then starts capturing tabs to turn them into, well, textual tabs, so I cannot get out of that input once I'm there. All Widgets model in demomodels is a good one to test with.

Fixed in 28fe74a. The code editor used to receive to set internal tabindex of 0 at all times. In addition, Esc->Tab and Alt+Tab can be both used to exit the code editor.

When I load a model using Launch and it's ready, I first hit tab and it goes to setup (or the top-leftist widget) on most models I've tried. This seems totally fine. If I use Shift-Tab to go backwards from here the focus goes up to Upload a Model and then the models library drop-down, then up to the top nav-bar manu. I would've expected it to go through the model speel slider, mode button, commands and code setting, and model export/file buttons first before getting up to those other choices. Note that if I tab "down" through the widgets all the way, once I get through the last widget it does circle back to the top of the model, the powered by NetLogo link, then the model file options, etc.

[TODO]

If I Shift-Tab to get up to the top nav-bar menu, Documentation isn't selectable, but the rest are. I assume this is because the docs entry pops out a dropdown, but it should still be keyboard accessible, I'd think.

Fixed.

Output Widgets and Monitors are tabbable, which is fine, but you can't actually do anything when they are selected. Maybe letting Ctrl-C copy their current value when selected would be useful to users?

Added.

We should add the new hotkeys for command center, code, and info to the quick help popup displayed when you press ?

Discussed.

We should probably add a link/button for the keyboard quick-help that also displays it's keyboard shortcut. To me it's not very discoverable.

Done.

Nice! I'd definitely consider reversing those functions (Ctrl-1 to focus, Ctrl-Shift-1 to open/close), though. I think wanting to focus will be much more common than wanting to close.

Done.

Ah, neat! The ? key does still show the old popup, though. That should either be removed or set to show the same info as F1. Esc does not banish the popup as it did for the prior one. Ctrl-H (which I see in the new listing) also seems to do the same thing as ?, which seems odd. And on Chrome+Ubunut (not Firefox) hitting F1 does bring the new help window up, but it also brings up Chrome's help window in a new tab. The mock tab Alt-t and Shift-Alt-t should probably also be moved to the code editor list in the new popup along with find usages and comment/uncomment.

Done.

I have thought about this a bit more, and with the shortcuts to jump to command center, code, and info, I'm not sure tabbing through those in order even makes much sense, but it's fine to have the option. What I do really want when I'm "done" with the code tab or command center is usually to jump back to the widgets/interface. So I think a Ctrl-0 to jump focus to the first widget might make sense to have.

Done.

I see that this is also used to break out of the command center input where Tab changes the context the code will run it. I think it still might be better to have the hotkey listed in both places, then.

[TODO]

[omargfh]

Navigating between code tabs and the main widget area is still a bit unusual. Same goes for alerts and anything outside the main widget area. It is a lot more usable now though. I am pretty satisfied with the widget area. I added some shortcuts that makes it usable from the keyboard. In particular, mod+alt+a opens the add widget menu, context menu is focusable and focuses by default, edit form focuses first input by default, fixed issues with focus visibility, and added a shift+{up,down,left,right} for faster nudging.

https://streamable.com/nrqoe5

[omargfh]

@LaCuneta @TheBizzle
There are still some quirks (e.g. the model toolbar is below the widgets in tab sort order) but authoring and interacting with models is pretty much possible using only the keyboard now.

Interacting with a model (choosing a model, switching a model, setting parameters, reading the info tab, etc...):

(https://streamable.com/f73ga1)

Authoring a mode (creating and placing widgets, defining widget parameters, writing code, compiling code, testing model in action, going back and forth between tabs and widget area, setting model speed, setting tabs orientation):

(https://streamable.com/ell57k)