Missing title on iframe in Chromium Browsers fails WCAG 2.2 2.4.1
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 16.3k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
📝 Provide detailed reproduction steps (if any)
With TinyMCE 8.1 there is a new behaviour on the <iframe> Element containing the editor. There is a new config option iframe_aria_text.
- Install axe DevTools in your browser (Chrome, Edge)
- Open fiddle
- Open Dev Tools in Chrome > axe DevTools > Full Page Scan
- Result should be: "41 Issues found". Ignore most other issues but "Frames must have an accessible name".
- Second issue shows TinyMCE iframe that has no title attribute.
✔️ Expected result
The expected result is an <iframe> with a title attribute.
<iframe id="mce_0_ifr" frameborder="0" allowtransparency="true" class="tox-edit-area__iframe" srcdoc="..." tile="Test title for Iframe">
❌ Actual result
The actual result is an <iframe> without a title attribute.
<iframe id="mce_0_ifr" frameborder="0" allowtransparency="true" class="tox-edit-area__iframe" srcdoc="...">
❓ Possible solution
I know this is a wanted result as it is described on the accessibility docs.
But this behaviour fails WCAG 2.2 success criterion 2.4.1 "Bypass Blocks". The technique, how to make iframes accessible to all is described in Technique H64.
It's not enough to label the containing HTML documents <body>, because a blind user on the parent doc does not know where he/she is going or if this is info to skip, without any description of the <iframe>. I would like to ask you to rethink this behaviour, as it should have a title attribute in all browsers.
Thank you for your help and support!
📃 Other details
- Browser: Chromium Browsers like Chrome, Edge. Working correctly in Firefox though.
- OS: all
- First affected version: TinyMCE 8.1
- Worked in version: TinyMCE 8.0.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with TinyMCE 8.1 using the linked fiddle and the iframe_aria_text configuration, then trace the code that creates the editor iframe. Compare the Chromium and Firefox results and verify that the iframe receives a title attribute in all browsers while preserving the documented configuration behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100