Automattic / Automattic/jetpack

Story Block: accessibility inspector becomes unusable after an image is uploaded to the Story block.

Open
#32,976 2 comments 0 reactions 0 assignees View on GitHub
[Block] Story [Feature Group] Editor Experience [Feature] Misc Blocks [Focus] Accessibility [Plugin] Jetpack [Pri] Low [Status] Stale Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

When using the Story block, uploading an image "bugs out" the accessibility inspector.

This may not be an issue for most sighted users, but for those relying on VoiceOver, as well as E2E tests (which rely on accessible locators), this makes the platform unusable.

### Steps to reproduce

1. start a new post.
2. add the story block.
3. enter F12 or right click on block > inspect (on Firefox, you can directly open the accessibility inspector by right click on block > accessibility inspector).
4. view the accessibility inspector.
5. upload an image to the Story block.
6. attempt to use the accessibility inspector.

### A clear and concise description of what you expected to happen.

Accessibility inspector remains usable (eg. like with any other block).

### What actually happened

Accessibility inspector "bugs" out and stops rendering the DOM with accessible locators.

For example, Playwright tests execute and locate elements based on the accessible locators.
Publishing a post with a Story block containing at least one image will fail tests because when accessing the published post, the `getByRole('main')` method fails to locate any elements - something never observed with any other blocks. Tests return to passing if the Story block is not added to the published post.

https://github.com/Automattic/jetpack/assets/6549265/63ae5ab9-8db6-4107-a37d-41645c3655d5

### Impact

All

### Available workarounds?

Yes, difficult to implement

### Platform (Simple and/or Atomic)

_No response_

### Logs or notes

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Story block image-upload flow in Firefox's accessibility inspector, then run the affected Playwright scenario using getByRole('main') on a published post. Trace the Story block's image-upload and published rendering paths; done means the accessibility inspector still renders accessible locators and the Playwright lookup succeeds.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, playwright, react
Domain
accessibility, frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.