Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-76689

Allow any plugin / ui component to easily declare keyboard shortcuts / hot keys

XMLWordPrintable

      Navigating Moodle by keyboard is essentially non existent compared to lots of modern web apps. This is different from basic keyboard accessibility this is about adding rich keyboard navigation across the whole site in a holistic way. It would be very useful for both power users and for accessibility.

      What I'm proposing is that there is both a js api and a pure markup api where any UI component can declare a keyboard shortcut and moodle core does the heavy lifting of not only wiring up the events but also grouping and automatically building inline keyboard help based on the declarations. 

      So there could be markup something like the links in the top level nav: (html simplified for clarity)

      <a mdl-shortcut="g h" href="https://moodle.edu/">Home</a>
      <a mdl-shortcut="g d" href="https://moodle.edu/my/">Dashboard</a>
      <a mdl-shortcut="g c" href="https://moodle.edu/my/courses.php">My courses</a>
      <a mdl-shortcut="g a" href="https://moodle.edu/search.php">Site administration</a>

      Note the custom mdl-shortcut="g h" attributes. All of the various shortcuts on the page would get bundled together and shown in a help dialog when ? is pressed which has become the de facto keyboard shortcut for keyboard shorts help.

      In the help, related sets of shortcuts could be optionally ordered and grouped with additional attributes mdl-shortcut-order and mdl-shortcut-component. The component can be declared at any level and any shortcuts inside it would inherit that group unless overridden further down, so for instance core could automatically add a shortcut group around the main div when rendering a course activity and then another one deeper at the activity level so any UI added gets a pretty good default. 

      In most cases the shortcut is simply equivalent to navigating to an existing link or button, but there would be a js api for when you need more bespoke behavior.

      Example shortcuts

      A proposed starting set of keyboard shortcuts, mostly based of the de facto standards from many apps that do this (eg github, jira, trello, google docs, slack, gmail)

      Shortcut Component Action
      ? none (site) Shows keyboard help
      / none (site) Focuses on search, ie global search on most pages
      or report builder search / admin search
      g d none (site) Go to dashboard
      g h none (site) Go to homepage
      g m none (site) Go to my courses
      g a none (site) Go to Site administration
      g c none (site) Go to my calendar
      g i none (site) Go to my notifications inbox
      g n course Go the next page, ie next activity, 
      next book page, next section
      e m course Toggle edit mode
      left arrow database Previous entry
      right arrow database Next entry
      n or j  calendar Next period
      p or k calendar Previous period
      t calendar Go to Today

      Avoiding clashes with OS and browser shortcuts

      The api should have a basic understanding of common OS and browser shortcuts and throw an error if a plugin tried to register them, eg alt+tab or control+n. Most of the shortcuts should be a short sequence of chars which is extremely unlikely to be already in use.

       

      Contextual and Disabled shortcuts

      Because each page declares its own shortcuts sets of keys will come and go as you navigate around. There might be shortcuts which should be considered global but which don't make sense on a particular page, but they can still be declared on a link or button which is disabled, or some other specific way of marking it as disabled. Then it would still appear in the help modal in its same position but marked as disabled.

       

      Help string for each shortcut

      In general most of the help text shown in the modal can be determined automatically by core without extra input. ie if the shortcut starts with 'g' then it is a 'Go to %' shortcut and % can be the title of the link or button, and then fall back if no title to it's label. There would be an optional override for when more precise help text is needed, such as shortcut-title="Do something complex".

       

      JS library

      There are several very powerful but lightweight libraries that Moodle core would internally use like hotkeys from github:

      https://github.com/github/hotkey

       

      Translation

      In most cases I think the shortcuts would remain the same across languages but this could easily be at the discretion of the plugin declaring the shortcuts. ie a plugin could put the shortcut itself into a language string and allow it to be overridden in the same way as a date and time format string.

       

      Examples in the wild

      Github

      Jira

      Gmail

      Google calendar

            Unassigned Unassigned
            brendanheywood Brendan Heywood
            Votes:
            3 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.