Accessible

DuoyunUI has accessibility support: reference ARIA 1.3 defines roles and status, use a semantic tag, in addition, there is also a keyboard access support, you can use the keyboard Tab, Space, Esc key to navigate, operate.

Shortcut support

DuoyunUI has a built-in simple hotkeys to implement keyboard access, you can use it to make custom shortcut bindings:

import { hotkeys } from 'duoyun-ui/lib/hotkeys';

const onOpenDocs = () => open(locahost.href);
addEventListener('keypress', hotkeys({ 'ctrl+shift+k': onOpenDocs }));

If the global shortcut binding is performed in a custom element, remember to unbinding when the element is unmount!

Vim mode support

DuoyunUI has a <dy-keyboard-access> element, similar(Vimperator), h, j, k, l scroll page,f list all focusable elements, then press the corresponding key to focus on this element and click

inert

Most modal pop-up supports inert attributes(applied on other elements), such as the context menu opened by ContextMenu.open method, inert prevent the content below the pop-up from being accessed, but <dy-modal> does not always have this feature.

<dy-modal> has two ways to use:

1. Write directly in the rendering template to <dy-modal>
2. Use Modal.open static method

The first method does not support the inert, because <dy-modal> in DOM tree, it is not convenient to add a inert attribute to other elements, the second is completely supported because it is created to create <dy-modal> and is mounted to <body>.

Focus ring

In general, the focus ring should be displayed when using the keyboard to focus navigation to tell the user the current focus position, when you click the pointer event, it is not necessary to display the focus ring, so we usually use the following CSS in the website:

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid blue;
}

In DuoyunUI or other custom elements, this CSS is not always useful(not support ShadowDOM), so DuoyunUI provides a shared style, you can reference the style when you need the focus ring:

import { focusStyle } from 'duoyun-ui/lib/styles';

@customElement('my-ele')
@adoptedStyle(focusStyle)
export class MyEleElement extends GemElement {}