[Fixes #448] Draft PR for VPAT Compliance

.vscode/settings.json

@@ -1,5 +1,14 @@
 {
     "files.watcherExclude": {
         "**/target": true
-    }
+    },
+
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
+    "editor.formatOnSave": true,
+    "editor.insertSpaces": true,
+    "editor.rulers": [80, 100, 120],
+    "editor.trimAutoWhitespace": true,
+    "editor.renderFinalNewline": "on",
+    "editor.renderWhitespace": "all",
 }

app/assets/javascripts/beak/widgets/accessibility/events.coffee

@@ -0,0 +1,62 @@
+
+import { isMac, isToggleKeydownEvent } from "./utils.js"
+
+# (HTMLElement, (Object) => Void) => Void
+ractiveAccessibleClickEvent = (node, fire) ->
+  clickHandler = (event) ->
+    fire({ node: node, original: event })
+
+  keydownHandler = (event) ->
+    if isToggleKeydownEvent(event)
+      event.preventDefault()
+      fire({ node: node, original: event })
+
+  node.addEventListener('click', clickHandler, false)
+  node.addEventListener('keydown', keydownHandler, false)
+
+  return {
+    teardown: ->
+      node.removeEventListener('click', clickHandler, false)
+      node.removeEventListener('keydown', keydownHandler, false)
+  }
+
+# (HTMLElement, (Object) => Void) => Void
+ractiveCopyEvent = (node, fire) ->
+  keydownHandler = (event) ->
+    modKey   = if isMac then event.metaKey else event.ctrlKey
+    copyKey  = event.key is 'c'
+    matchKey = modKey and copyKey
+
+    if matchKey
+      fire({ node: node, original: event })
+
+  node.addEventListener('keydown', keydownHandler, false)
+
+  return {
+    teardown: ->
+      node.removeEventListener('keydown', keydownHandler, false)
+  }
+
+# (HTMLElement, (Object) => Void) => Void
+ractivePasteEvent = (node, fire) ->
+  keydownHandler = (event) ->
+    modKey    = if isMac then event.metaKey else event.ctrlKey
+    pasteKey  = event.key is 'v'
+    matchKey  = modKey and pasteKey
+
+    if matchKey
+      fire({ node: node, original: event })
+
+  node.addEventListener('keydown', keydownHandler, false)
+
+  return {
+    teardown: ->
+      node.removeEventListener('keydown', keydownHandler, false)
+  }
+
+
+export {
+  ractiveAccessibleClickEvent,
+  ractiveCopyEvent,
+  ractivePasteEvent
+}

app/assets/javascripts/beak/widgets/accessibility/key-combo.coffee

@@ -0,0 +1,45 @@
+import { isMac } from "./utils.js"
+
+class KeyCombo
+  # (String) => Unit
+  constructor: (comboStr) ->
+    @comboStr = comboStr
+    [@key, parts...] = comboStr.toLowerCase().split('+').map((x) => x.trim()).reverse()
+    @modifiers = {
+        ctrl:  parts.includes('ctrl')  or parts.includes('control')
+      , alt:   parts.includes('alt')   or parts.includes('option')
+      , shift: parts.includes('shift')
+      , meta:  parts.includes('meta')  or parts.includes('cmd') or parts.includes('command') or parts.includes('mod')
+    }
+
+  # { [key: String]: String }
+  keyStringTable: {
+    up: "↑",
+    down: "↓",
+    left: "←",
+    right: "→",
+    escape: "Esc",
+  }
+
+  # () => Array[String]
+  getKeys: ->
+    modifierKeys = Object.entries(@modifiers).filter(([_, v]) => v).map(([mod, _]) =>
+      switch mod
+        when 'ctrl'  then if isMac then 'Control' else 'Ctrl'
+        when 'alt'   then if isMac then '⌥'  else 'Alt'
+        when 'shift' then '⇧'
+        when 'meta'  then if isMac then '⌘'  else 'Meta'
+    )
+
+    mainKey = if Object.prototype.hasOwnProperty.call(@keyStringTable, @key)
+      @keyStringTable[@key]
+    else
+      @key[0].toUpperCase() + @key.slice(1).toLowerCase()
+
+    [...modifierKeys, mainKey]
+
+  # () => String
+  toString: ->
+    @getKeys().join(' + ')
+
+export { KeyCombo }

app/assets/javascripts/beak/widgets/accessibility/keybind.coffee

@@ -0,0 +1,68 @@
+import { isMac } from "./utils.js"
+import { KeyCombo } from "./key-combo.js"
+
+# Keybind[mousetrap, ractive]
+# mousetrap: Mousetrap
+# ractive: Ractive
+export class Keybind
+  id: undefined     # String
+  cb: undefined     # (ractive, KeyboardEvent, combo) => Boolean | Unit
+  combos: undefined # Array[KeyCombo]
+  metadata: {}      # { description: String, docs: String, hidden?: Boolean }
+  options: {}       # { type: "keydown" | "keyup" | "keypress", bind: Boolean, preventDefault: Boolean }
+
+  # parameters:
+  # id: String
+  # cb: (ractive, KeyboardEvent, combo) => Boolean | Unit
+  # comboStrs: Array[String] (see https://craig.is/killing/mice; excluding sequences)
+  # metadata: { description: String, docs: String } | undefined
+  # options: { type: "keydown" | "keyup" | "keypress", bind: Boolean, preventDefault: Boolean } | undefined
+  constructor: (@id, @cb, comboStrs, @metadata, options) ->
+    @options = { type: "keydown", bind: true, preventDefault: false, ...options }
+    @combos = comboStrs.map((comboStr) -> new KeyCombo(comboStr))
+    Object.defineProperty(this, 'comboStrs', {
+      get: => @combos.map((combo) -> combo.comboStr)
+    })
+
+  # (mousetrap, ractive, ((ractive) => Boolean) | undefined) => Unit
+  bind: (mousetrap, ractive, check) ->
+    if @options.bind is true
+      mousetrap.bind(@comboStrs, (e, combo) =>
+        if not check or check(ractive) and @cb?
+          if @options.preventDefault and e.preventDefault?
+            e.preventDefault()
+          return @cb(ractive, e, combo)
+      , @options.type)
+
+  # (mousetrap) => Unit
+  unbind: (mousetrap) ->
+    if @options.bind is true
+      mousetrap.unbind(@comboStrs, @options.type)
+
+# KeybindGroup[mousetrap, ractive]
+# mousetrap: Mousetrap
+# ractive: Ractive
+export class KeybindGroup
+  # name: String
+  # description: String | undefined
+  # conditions: Array[((ractive) => Boolean)]
+  # keybinds (keybinds): Array[Keybind]
+  constructor: (name, description, conditions, keybinds) ->
+    @name = name
+    @description = description
+    @conditions = conditions
+    @keybinds = keybinds
+
+  # ractive => Boolean
+  meetsConditions: (ractive) ->
+    return @conditions.every((condition) => condition(ractive))
+
+  # (mousetrap, ractive) => Unit
+  bind: (mousetrap, ractive) ->
+    @keybinds.forEach((keybind) =>
+      keybind.bind(mousetrap, ractive, @meetsConditions.bind(this))
+    )
+
+  # (mousetrap) => Unit
+  unbind: (mousetrap) ->
+    @keybinds.forEach((keybind) -> keybind.unbind(mousetrap))