dequelabs / dequelabs/axe-core

False positive in Angular for lists inside a for loop

Open
#4,871 5 comments 3 reactions 0 assignees View on GitHub
linting ungroomed
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### Product

axe Linter

### Product Version

4.10.9

### Latest Version

- [x] I have tested the issue with the latest version of the product

### Issue Description

#### Expectation
Linter should allow `

  • ` elements in a `
      ` element inside a for loop in Angular

      #### Actual
      Linter flags with the following message:
      `axe-linter (list):

        and
          must only directly contain
        1. , or <template> elements`

          #### How to Reproduce
          ```html
          <ul>
          @for (bullet of bullets(); track bullet) {
          <li class="education-text-bullet">{{bullet}}</li>
          }
          </ul>
          ```

          #### Additional context
          The [ngForOf](https://angular.dev/api/common/NgForOf) structural directive has been deprecated and so the [@for](https://angular.dev/api/core/@for) block is the recommended syntax.

          This also occurs for @if block.

          ```html
          <ul>
          @if (true) {
          <li class="education-text-bullet">test</li>
          }
          </ul>
          ```

  • Contributor guide

    Open the contributing guide

    Assessment

    This issue has not been assessed yet.

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.