Keyboard-accessible resize UI for media embeds — standalone buttons
This test verifies that media embeds can be resized without a pointing device using
standalone toolbar buttons.
The editor uses MediaEmbedResize (full plugin including handles) with
resizeMediaEmbed.toolbar configured to show individual buttons:
resizeMediaEmbed:25, resizeMediaEmbed:50,
resizeMediaEmbed:75, resizeMediaEmbed:original, and
resizeMediaEmbed:custom.
Test plan
Preset resize (standalone buttons)
- Click into the editor content to focus it.
- Use Tab (or click) to select a media widget.
-
Use Tab to navigate to the media embed toolbar. Five resize buttons
should be visible.
-
Press Space or Enter on one of the size buttons (e.g.
25%). Verify the media resizes.
-
The pressed button should appear toggled on (
isOn: true). Other size
buttons should be off.
-
Press Original — resize is removed,
resizedWidth attribute
disappears, no button is toggled.
Custom resize (balloon via standalone button)
- Select a media widget using keyboard.
- Navigate to the toolbar and press the Custom button.
- Verify the custom resize balloon opens.
-
Type a valid number (e.g.
40) and press Enter. Verify the
media resizes to 40% and the balloon closes.
-
Now none of the preset buttons should be toggled (because
40% doesn't match
any preset).
Validation
- Open the custom resize balloon via the Custom button.
-
Clear the input and press Enter. Verify error "The value must not be
empty." appears.
-
Type
abc and press Enter. Verify error "The value should
be a plain number." appears.
Click outside
- Open the custom resize balloon.
- Click outside the balloon. Verify the balloon closes without changes.
Drag handles interop
- Apply a preset size via a button.
- Grab a drag handle and resize further.
- Verify the drag starts from the correct current width.
-
After dragging, verify no preset button is toggled (the value no longer matches any
preset).
Spotify embed
- Select the Spotify widget (it has its own responsive layout and a minimum width).
-
Apply a preset size and a custom size. Verify the widget resizes without console errors
and is not shrunk below its usable minimum width.
- Press Original to reset.
Generic (non-previewable) media
- Select the Facebook placeholder widget.
- Press any preset size button. Verify the figure resizes without console errors.
- Press Original to reset.