Automattic / Automattic/jetpack
Story Block: accessibility inspector becomes unusable after an image is uploaded to the Story block.
- 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
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