microsoft / microsoft/roosterjs
Nested unordered lists throw an accessibility warning
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 190
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 16
Description
Describe the bug
Nested unordered lists trigger an accessibility error when using the Accessibility Insights extension and running a FastPass.
This issue exists in both the latest version of RoosterJS, and in the version we are using for the text editor in our component library (8.61.0).
When adding a nested unordered list, the HTML renders as:
<ul>
<li>first</li>
<li>second</li>
<ul>
<li>indent one</li>
<li>indent two</li>
</ul>
<li>third</li>
</ul>
According to W3, nested lists should be formatted as:
<ul>
<li>first</li>
<li>second
<ul>
<li>indent one</li>
<li>indent two</li>
</ul>
</li>
<li>third</li>
</ul>
The above will not trigger a warning using the FastPass in the Accessibility Insights extension.
Here is the error from FastPass for the latest version of RoosterJS:
Title: WCAG 1.3.1: Ensure that lists are structured correctly (ul)
Tags: Accessibility, WCAG 1.3.1, list
Issue: Ensure that lists are structured correctly (list - https://accessibilityinsights.io/info-examples/web/list)
Target application: RoosterJs Demo Site - https://microsoft.github.io/roosterjs/index.html#
Element path: #RoosterJsContentDiv > ul
Snippet: <ul data-editing-info="{"applyListStyleFromLevel":true}" style="list-style-type: disc;">
Related paths:
ul > ul
How to fix:
Fix all of the following:
List element has direct children that are not allowed: ul
Environment: Microsoft Edge version 135.0.0.0
====
This accessibility issue was found using Accessibility Insights for Web 2.46.0 (axe-core 4.10.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
To Reproduce
Steps to reproduce the behavior:
- Go to the Rooster JS Demo page
- Click on the Unordered List menu button
- Type a couple bullet points
- Hit the
tabkey to add a nested unordered list - Type a couple bullet points
- See the error that the rendered HTML adds a
ulas a sibling of thelielements instead of as a child of alielement.
Device Information
- OS: Mac
- Browser: Edge
- Version: 135
Contributor guide
No contributing guide indexed for this repository
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 from the Unordered List menu behavior on the RoosterJS Demo page and reproduce the nested-list case with Accessibility Insights FastPass. Trace the list-editing entry point that handles Tab indentation; done means the nested ul is contained within its parent li and the reported WCAG 1.3.1 warning no longer appears.
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
- Clearly specified
- Newbie friendliness
- 48/100