Skip to content

Pseudo element on cousin not recognized as giving a background #4534

Open
@WilcoFiers

Description

@WilcoFiers

Came across this gem of a false positive. A pseudo element on a previous sibling's child node was used to provide a background color:

<style>
  a[href] {
    display: table;
    margin: 1px 0px 9px;
  }
  .container {
    display: table-cell;
    vertical-align: middle;
  }
  .background {
    width: 0px;
    margin: 1px 0px 9px;
  }
  .background:before {
    content: '';
    background-color: #06c;
    display: block;
    height: 28px;
    width: 140px;
  }
  .content {
    line-height: 28px;
    width: 140px;
    text-align: center;
    color: #eee;
  }
</style>
<a href="#">
  <div class="container">
    <div class="background"></div>
  </div>
  <div class="content">Canadian Dollar</div>
</a>

Axe-core currently looks at the element and the parent for pseudo elements. When we wrote that we knew it was an imperfect solution. To improve on this I wonder if we just need to find every pseudo element with a background and guestimate its position.

Metadata

Metadata

Assignees

No one assigned

    Labels

    color contrastColor contrast issuesfixBug fixesrulesIssue or false result from an axe-core rulesupport

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions