Skip to content

False positive in Angular for lists inside a for loop #4871

@CSharpFiasco

Description

@CSharpFiasco

Product

axe Linter

Product Version

4.10.9

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

Expectation

Linter should allow <li> elements in a <ul> element inside a for loop in Angular

Actual

Linter flags with the following message:
axe-linter (list): <ul> and <ol> must only directly contain <li>, <script> or <template> elements

How to Reproduce

<ul>
  @for (bullet of bullets(); track bullet) {
    <li class="education-text-bullet">{{bullet}}</li>
  }
</ul>

Additional context

The ngForOf structural directive has been deprecated and so the @for block is the recommended syntax.

This also occurs for @if block.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    lintingAxe-linter issuesungroomedTicket needs a maintainer to prioritize and label

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions