Consolidate UI Cov + a11y config when shared

cypress-io · Jan 15, 2025 · 2706e52 · 2706e52
1 parent fa1b19d
commit 2706e52
Show file tree

Hide file tree

Showing 10 changed files with 560 additions and 1,023 deletions.
diff --git a/docs/accessibility/configuration/elementfilters.mdx b/docs/accessibility/configuration/elementfilters.mdx
@@ -9,169 +9,4 @@ sidebar_position: 20
 
 # elementFilters
 
-:::info
-
-**Note:** setting `elementFilters` impacts both 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.
-:::
-
-The `elementFilters` property allows you to specify selectors for elements that should be excluded from Cypress Accessibility.
-
-The first `elementFilters` rule to match the `selector` property determines whether or not an element is included or excluded from the report. Elements that do not match any rules are included by default.
-
-## Syntax - globally applied to both UI Coverage and Cypress Accessibility
-
-```typescript
-{
-  "elementFilters": [
-    {
-      "selector": string,
-      "include": boolean
-    }
-  ]
-}
-```
-
-## Syntax - accessibility-specific
-
-```typescript
-{
-  "accessibility": {
-    "elementFilters": [
-      {
-        "selector": string,
-        "include": boolean
-      }
-    ]
-  }
-}
-```
-
-### elementFilters
-
-_Optional._ Object\[]
-
-An array of objects specifying the elements to exclude from Cypress Accessibility. _**Each object can have the following properties:**_
-
-### selector
-
-_Required._ String (CSS Selector)
-
-Used to match elements.
-
-### include
-
-_Optional._ Boolean
-
-_Default:_ `true`
-
-A boolean that represents whether or not a matched element should be included in Cypress Accessibility.
-
-## Examples
-
-### Excluding a specific element
-
-#### Config
-
-```json
-{
-  "elementFilters": [
-    {
-      "selector": "#button-2",
-      "include": false
-    }
-  ]
-}
-```
-
-#### HTML
-
-```xml
-<body>
-  <button id="button-1">Included</button>
-  <button id="button-2">Excluded</button>
-</body>
-```
-
-#### Elements shown in UI
-
-```
-#button-1
-```
-
----
-
-### Excluding all elements in a container
-
-#### Config
-
-```json
-{
-  "elementFilters": [
-    {
-      "selector": "footer *",
-      "include": false
-    }
-  ]
-}
-```
-
-#### HTML
-
-```xml
-<body>
-  <main>
-    <button id="start">Included</button>
-  </main>
-  <footer>
-    <a href="#">Excluded</a>
-  </footer>
-</body>
-```
-
-#### Elements shown in UI
-
-```
-#start
-```
-
----
-
-### Including only elements in a container
-
-#### Config
-
-```json
-{
-  "elementFilters": [
-    {
-      "selector": "#form *",
-      "include": true
-    },
-    {
-      "selector": "*",
-      "include": false
-    }
-  ]
-}
-```
-
-#### HTML
-
-```xml
-<body>
-  <form id="form">
-    <input id="name" />
-  </form>
-  <footer>
-    <a href="#">Excluded</a>
-  </footer>
-</body>
-```
-
-#### Elements shown in UI
-
-```
-#name
-```
+<ElementFilters />
diff --git a/docs/accessibility/configuration/viewfilters.mdx b/docs/accessibility/configuration/viewfilters.mdx
@@ -9,112 +9,4 @@ sidebar_position: 30
 
 # viewFilters
 
-:::info
-Note: setting `viewFilters` impacts both Accessibility and UI Coverage reports.
-This cannot be nested.
-:::
-
-By default, every URL that is visited within a run is included in the Accessibility report. The `viewFilters` property allows you to specify URL patterns for URLs that should be excluded from Accessibility. Excluding a URL also excludes all links to that URL.
-
-For every URL visited by Cypress in a run and every link element found, the first `viewFilters` rule for which the `pattern` property matches the URL is used to either include or exclude the URL based on the `include` value. URLs that do not match any rules are included by default.
-
-## Syntax
-
-```typescript
-{
-  "viewFilters": [
-    {
-      "pattern": string,
-      "include": boolean
-    }
-  ]
-}
-```
-
-### viewFilters
-
-_Optional._ Object\[]
-
-An array of objects used to specify URLs to exclude from Accessibility. _**Each object can have the following properties:**_
-
-### pattern
-
-_Required._ String (URL Pattern)
-
-Used to match URLs. Uses [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) syntax.
-
-### include
-
-_Optional._ Boolean
-
-_Default:_ `true`
-
-A boolean that represents whether or not a matched URL should be included in Accessibility.
-
-## Examples
-
-### Excluding URLs by hostname
-
-**Config**
-
-```json
-{
-  "viewFilters": [
-    {
-      "pattern": "https://app.okta.com/*",
-      "include": false
-    }
-  ]
-}
-```
-
-**Visited URLs**
-
-```
-https://app.okta.com/login
-https://cypress.io/home
-https://cypress.io/about
-```
-
-**Views shown in UI**
-
-```
-https://cypress.io/home
-https://cypress.io/about
-```
-
-### Including only specific URLs
-
-**Config**
-
-```json
-{
-  "viewFilters": [
-    {
-      "pattern": "https://cypress.io/dashboards*",
-      "include": true
-    },
-    {
-      "pattern": "*",
-      "include": false
-    }
-  ]
-}
-```
-
-**Visited URLs**
-
-```
-https://cypress.io/dashboards
-https://cypress.io/dashboards/1
-https://cypress.io/dashboards/2
-https://cypress.io/home
-https://cypress.io/login
-```
-
-**Views shown in UI**
-
-```
-https://cypress.io/dashboards
-https://cypress.io/dashboards/*
-```
+<ViewFilters />