Widgets

Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them.

[…]

In this post we’re going to look over what’s involved if you want performant clip animations. If you want to see a demo, check out the Sample UI Elements GitHub repo.

Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.

That’s why clipboard.js exists.

These two make the point (hilariously) that in almost every instance, there is a better widget or design pattern you could be using than a drop down.

What it does

• Uses a real button as a control.
• Places the displayed content next in DOM order after the button.
• Uses some ARIA magic to augment the semantics and behaviour.
• Displays or dismisses content on click, press or tap (also dismisses on esc key press).
• Conveys state (collapsed or expanded) to AT users.
• When initially displayed content is announced by (most) screen readers that support aria-live.
• Screen readers users can also virtual cursor through and interact with the displayed content.
• keyboard only users can interact with controls in the displayed content.

What it does not do

Display content on mouse cursor hover.

View Toggletip demo on CodePen

Setting the tabindex of the focused element to “0” ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the tabindex to “0” requires also updating the previously selected item to tabindex="-1". This technique involves programmatically moving focus in response to key events and updating the tabindex to reflect the currently focused item. To do this:

Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:

1. programmatically apply focus to the new element,
2. update the tabindex of the focused element to “0”, and
3. update the tabindex of the previously focused element to “-1”.

Here’s an example of a WAI-ARIA tree view using this technique.

For a more visual explanation, see the following video by Rob Dodson: