Skip to main content

Accessibility

Dockview ships an accessibility pack — keyboard navigation and screen-reader announcements — included out of the box in the dockview package and the framework packages.

The options below are set the same way as any other Dockview option — via the options argument for JavaScript (createDockview(element, { ... })) or via the component props/inputs for React, Vue, and Angular.

Keyboard navigation​

Set keyboardNavigation to true to enable the built-in keymap:

const options = {
    keyboardNavigation: true,
};

This wires up the following default bindings:

ActionDefaultBinding key
Switch to the next tab in the focused groupCtrl+]nextTab
Switch to the previous tab in the focused groupCtrl+[prevTab
Move focus to the next groupF6focusNextGroup
Move focus to the previous groupShift+F6focusPrevGroup
Move focus from panel content to the tab stripCtrl+Shift+\focusTabs

Rebinding keys​

Pass an object instead of true to override individual bindings. Unset keys keep their defaults:

const options = {
    keyboardNavigation: {
        keymap: {
            nextTab: 'ctrl+tab',
            prevTab: 'ctrl+shift+tab',
        },
    },
};

Each binding is a string of +-separated parts, modifiers first. Recognised modifiers are ctrl, shift, alt, and meta (alias cmd); the final part is the KeyboardEvent.key to match, case-insensitively — e.g. 'ctrl+]', 'shift+f6', 'ctrl+tab'.

For programmatic focus movement (building your own shortcut handlers, e.g. moving focus by spatial direction), see Keyboard.

Screen-reader announcements​

Dockview narrates layout changes — panels opening/closing, groups floating, docking, popping out, maximizing/restoring — through a visually-hidden ARIA live region. This is on by default. Opt out with:

const options = {
    announcements: false,
};

Localising and overriding announcements​

getAnnouncement runs per event and lets you override or localise the spoken string. Return a string to use it, null / '' to suppress that announcement, or undefined to fall through to the default:

const options = {
    getAnnouncement: (event) => {
        if (event.kind === 'maximize') {
            return 'Panel maximised';
        }
        return undefined; // keep the default
    },
};

For full translations, provide a messages catalog. Each entry is a function that builds the string from the relevant context (e.g. the panel title); supply any subset — unset entries keep the English defaults:

const options = {
    messages: {
        panelOpened: (title) => `${title} ouvert`,
        panelClosed: (title) => `${title} fermé`,
        groupMaximized: (title) => `${title} agrandi`,
    },
};

Routing to your own announcer​

If your app already manages a screen-reader live region, route Dockview's announcements to it with announcer instead of using the built-in region. getAnnouncement (localisation) still applies first:

const options = {
    announcer: (event) => myLiveRegion.announce(event.message),
};
Newsletter