Skip to main content
Cypress AccessibilityPremium Solution

significantAttributes

The significantAttributes property allows you to specify which attributes should be considered significant for UI Coverage analysis.

Why use significant attributes?​

  • Focus on Important Changes: Track attributes that are most relevant to user interaction and functionality
  • Reduce False Positives: Avoid flagging changes in non-essential attributes as coverage issues
  • Improve Report Clarity: Make coverage reports more meaningful by focusing on attributes that matter

Scope​

info

Note: setting significantAttributes impacts both Cypress Accessibility and UI Coverage reports if set at the root of the configuration. Nesting this property under an accessibility or uiCoverage key is supported, if you need to split them up.

Syntax​

{
  "significantAttributes": [
    {
      "selector": string,
      "attributes": string[]
    }
  ]
}

Options​

The first significantAttributes rule for which the selector property matches the element is used to determine which attributes should be considered significant. Attributes that do not match any rules are not considered significant by default.

OptionRequiredDefaultDescription
selectorRequiredA CSS selector to identify elements. Supports standard CSS selector syntax, including IDs, classes, attributes, and combinators.
attributesRequiredAn array of attribute names that should be considered significant for coverage analysis.

Examples​

Marking specific attributes as significant for all elements​

Config​

{
  "significantAttributes": [
    {
      "selector": "*",
      "attributes": ["class", "id", "role"]
    }
  ]
}

HTML​

<body>
  <button class="primary" id="submit" role="button" data-testid="submit">
    Submit
  </button>
</body>

Significant attributes tracked​

class="primary", id="submit", role="button"

Marking different attributes as significant for different elements​

Config​

{
  "significantAttributes": [
    {
      "selector": "input",
      "attributes": ["type", "name", "required"]
    },
    {
      "selector": "button",
      "attributes": ["type", "disabled"]
    }
  ]
}

HTML​

<body>
  <input type="text" name="username" required class="form-control" />
  <button type="submit" disabled class="btn">Submit</button>
</body>

Significant attributes tracked​

input: type="text", name="username", required="required"
button: type="submit", disabled="disabled"

Using attribute patterns​

Config​

{
  "significantAttributes": [
    {
      "selector": "*",
      "attributes": ["aria-*"]
    }
  ]
}

HTML​

<body>
  <div aria-label="Main content" aria-hidden="false" class="container">
    Content
  </div>
</body>

Significant attributes tracked​

aria-label="Main content", aria-hidden="false"