microsoft / microsoft/roosterjs

Nested unordered lists throw an accessibility warning

Open
#2,999 0 comments 0 reactions 0 assignees View on GitHub

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="{&quot;applyListStyleFromLevel&quot;: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:

  1. Go to the Rooster JS Demo page
  2. Click on the Unordered List menu button
  3. Type a couple bullet points
  4. Hit the tab key to add a nested unordered list
  5. Type a couple bullet points
  6. See the error that the rendered HTML adds a ul as a sibling of the li elements instead of as a child of a li element.
Image Image

Device Information

  • OS: Mac
  • Browser: Edge
  • Version: 135

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.