Video control button

Media

Open in Storybook: Video control button (opens in a new tab)

On this page

Overview

The control button is a native button with an icon, the one every control of the video bar is made of: Play/Pause, Mute, Captions, Audio description and Full screen. The name is its aria-label, because an icon is not a name.

It has no state of its own. Hover, focus and pressed are CSS, and pressed is aria-pressed, so what the screen reader says and what the eye sees cannot drift.

Live example

Anatomy

Button
button type="button" aria-label
The name is its aria-label. A toggle has aria-pressed, and then the fill is lighter and a bar is drawn under the icon.
Icon
svg aria-hidden="true" focusable="false"
One of nine, 20 × 20, in the colour of the button. It is never the name.

Usage

Props

Props
Prop	Does	Default
`icon`	One of `play`, `pause`, `captions`, `fullscreen`, `chevron-down`, `volume`, `muted`, `transcript`, `audio-description`	Required
`label`	The name of the button	Required
`pressed`	A toggle that is on or off. Left out, the button is a plain action and has no `aria-pressed`	Absent

Example

import { VideoControlButton } from '@/components/VideoControlButton'

<VideoControlButton icon="captions" label="Captions" pressed={on} onClick={toggle} />

Specs

Measurements

Measurements
Part	Property	Value
Button	Size · corner	44 × 44px (2.75rem) · 8px
Icon	Size	20 × 20px
On indicator	Size · place	20 × 3px, 2px corner · 36px from the top, 12px from the start
Focus ring	Width · offset	3px · 0

States

States
State	Fill	Other
Default	None	—
Hover	White at 16%	—
Focus	None	A 3px white ring, for a control on a dark bar
Pressed (on)	White at 24%	A 3px bar under the icon, in the colour of the icon

Tokens

Component tokens

Component tokens
Part	Property	Token	Value
Button	Hover fill	—	White at 16%
Button	Pressed fill	—	White at 24%
Icon, bar, ring	Colour	—	#ffffff. The control sits on a dark surface, so it is not a site colour
Surface	Fill	`ink`	#16161a, the bar the control sits on

Guidelines

Rules

Rules
Rule	Why
Always on a dark surface	The ring and the fills are white. On a light surface they do not show
A name on every button	An icon is not a name. Play and Pause change the name; a toggle keeps it and changes `aria-pressed`
A toggle for on and off only	A button that does something once has no `aria-pressed`

Accessibility

Keyboard

Keyboard
Key	Action	Native
Tab	Focuses it, with a 3px white ring	Yes
Enter, Space	Activates it. A toggle keeps its focus	Yes

WCAG criteria

WCAG criteria
Criterion	Level	Requirement here
1.1.1 Non-text Content	A	The icon is `aria-hidden`; the name is the `aria-label`
1.4.11 Non-text Contrast	AA	White on ink, well over 3:1, for the icon, the ring and the bar
2.1.1 Keyboard	A	A native button
2.4.7 Focus Visible	AA	A 3px white ring
2.5.8 Target Size (Minimum)	AA	44 × 44px
4.1.2 Name, Role, Value	A	A button with a name, and `aria-pressed` for a toggle

Video player (opens in a new tab)

References

This section is still in progress.