Using the Keyboard: Shortcuts, Hotkeys, and Accessibility

End users can employ standard keyboard “shortcut” keys to navigate Skuid runtime pages and access on-screen elements (such as tabs, fields, buttons, and menus). This is useful for people with disabilities that affect dexterity or hand-eye coordination, or those using access technologies, as well as people who prefer to navigate a page by keyboard instead of mouse.

Standard keyboard shortcuts

To move between navigation elements (tabs, buttons, fields, etc.)

  • Tab to move to the next navigation element on the page.
  • Shift + Tab to move to the previous navigation element on the page.

Note

When a page section includes a search field as well as buttons or filters, tabbing will move first to the search field and then cycle through the remaining elements in that section.

To move between top-level tabs on a navigation bar

  • Left and Right arrows move across the elements in a horizontal navigation bar.
  • Up and Down arrows move up and down the elements in a vertical (dropdown) navigation bar.

To select on-screen elements

  1. Spacebar to open the desired option in a picklist (or to toggle a checkbox).

  2. Enter to select an item (or open a popup).

    • When you open the popup, the focus is on the X (close) icon; to immediately close the popup, hit Enter again.
  3. Enter or Spacebar to activate a link or action.

Composer Hotkeys

Hotkeys are specific keyboard combinations that allow quick navigation around the Skuid page. Currently, Skuid’s Composer includes the following dedicated hotkeys:

  • Ctrl+S (or ⌘+S): Save
  • Ctrl+P (or ⌘+P): Preview
  • S+E: Expands the Elements and Properties panes
  • S+C: Collapses the Elements and Properties panes

In addition to these embedded hotkeys, builders can define hotkeys.

Globally disable keyboard hotkeys

You can disable all keyboard hotkeys within Skuid from the Salesforce setup:

  1. In the Salesforce sidebar, navigate to Build > Develop > Custom Settings.

  2. Next to Preferences, click Manage.

    • Click Edit:

      • Disable Hotkeys for Skuid App: Check
    • Click Save.

  3. You may also set this on a per-user or per-profile basis:

    • Click New to create a new setup.

    • In Preferences Edit:

      • Location: User

        • Search for and add the preferred owner(s)
      • Disable Hotkeys for Skuid App: Check

Code editor hotkeys

Skuid uses Ace Editor, which offers a set of keyboard shortcuts that work in the XML and JavaScript editors. To learn more, see Ace Editor’s list of Default Keyboard Shortcuts.

Builder-defined Hotkeys

You can define hotkeys for mass or global actions on the Table component. Additionally, Button Set, Page Title, and Wizard components allow you to define hotkeys that trigger actions on the Skuid page, such as:

  • Set Ctrl+S to perform global save on a Button Set or Header/Page Title button.
  • For Wizard step buttons, set Ctrl+> to navigate to the next step and Ctrl+< to navigate previous step.
  • On a Table component, set Ctrl+W to trigger a mass action that marks all selected opportunities “Closed Won.”

Note

Hotkeys will only work if the UI element that triggers the action is visible on the page. If you set a hotkey on a table that’s in a Tab Set tab, and that tab is not visible, the hotkey will not trigger the action.

The following keys are available to be combined with the hotkey modifiers (Alt, Ctrl, Command, and Shift):

  • Letters and numbers: A - Z and 0 - 9.

  • Arrow keys: Left, Up, Right, Down.

  • Special keys:

    • Backspace/Delete
    • Delete right
    • End
    • Home
    • Page Down
    • Page Up
    • Tab.
  • Function keys: (F1-F12)

Hotkeys in the Table Component

When a mass or global action is added to a Table component, the Table Action properties pane includes a Hotkeys tab. Click the newly-created action, then use the standard button hotkey properties to create the hotkey.

Note

Each mass and global action can have its own hotkey.

Hotkeys on Button Set and Page Title buttons

Any button added to a Button Set or Header/Page Title component can be assigned a hotkey. Click the button to open the Button Properties pane, which includes a Hotkeys tab, then use the standard button hotkey properties to create the hotkey.

Hotkeys in the Wizard Component

Just as you can with buttons on the Button Set and Page Title components, it’s possible to add hotkeys to buttons within Wizard steps. Click a newly-created step button to open the Button Properties pane, which includes a Hotkeys tab, then use the standard button hotkey properties to create the hotkey.

Note

Each step button in a Wizard can have it’s own hotkey; these hotkeys are independent of hotkeys in other Wizard steps. This means that if you have a consistent set of navigation buttons-for example, a “Next” button and a “Previous” button—in multiple steps, you need to add a hotkey to those buttons within each step.

Support for Access Technology

Some users employ screen reading technology that interprets what is displayed on the screen and outputs that information to assistive technologies such as text-to-speech or Braille output devices.

While runtime pages are not yet fully accessible to assistive technology, Skuid does incorporate the following WAI-ARIA markups into all pages, allowing standard HTML navigation elements to communicate with assistive technology:

  • Navigation items that include sub-navigation are tagged with aria-hasdropdown.
  • Expand states are tagged with aria-expanded=true.
  • Collapsed states are tagged with aria-expanded=false.
  • Links are tagged with role=link.
  • Actions are tagged with role=button.