fix: Improve accessibility for Docs (#6068)

* Add title to icons within API that did not have title or aria-label

* try to address some common color-contrast issues

* lint

* Fix links without text

* remove line highlight that make text contrast unreadable

* Fix dark theme active color

* Fix heading levels

* Fix heading levels

* lint

* Fix broken link

Author: jennifer-shehane

docs/accessibility/configuration/viewfilters.mdx

@@ -18,7 +18,7 @@ By default, every URL that is visited within a run is included in the Accessibil
 
 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 <a href="#syntax" id="syntax"></a>
+## Syntax
 
 ```typescript
 {
@@ -31,29 +31,29 @@ For every URL visited by Cypress in a run and every link element found, the firs
 }
 ```
 
-### viewFilters <a href="#viewfilters" id="viewfilters"></a>
+### viewFilters
 
 _Optional._ Object\[]
 
 An array of objects used to specify URLs to exclude from Accessibility. _**Each object can have the following properties:**_
 
-### pattern <a href="#pattern" id="pattern"></a>
+### 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 <a href="#include" id="include"></a>
+### include
 
 _Optional._ Boolean
 
 _Default:_ `true`
 
 A boolean that represents whether or not a matched URL should be included in Accessibility.
 
-## Examples <a href="#examples" id="examples"></a>
+## Examples
 
-### Excluding URLs by hostname <a href="#excluding-urls-by-hostname" id="excluding-urls-by-hostname"></a>
+### Excluding URLs by hostname
 
 **Config**
 
@@ -83,7 +83,7 @@ https://cypress.io/home
 https://cypress.io/about
 ```
 
-### Including only specific URLs <a href="#including-only-specific-urls" id="including-only-specific-urls"></a>
+### Including only specific URLs
 
 **Config**
 

docs/accessibility/configuration/views.mdx

@@ -36,27 +36,27 @@ The `groupBy` property of a view definition allows you to create multiple views
 }
 ```
 
-### views <a href="#views" id="views"></a>
+### views
 
 _Optional._ Object\[]
 
 An array of objects used to define views within Accessibility. _**Each object can have the following properties:**_
 
-### pattern <a href="#pattern" id="pattern"></a>
+### pattern
 
 _Required._ String (URL Pattern)
 
 A URL pattern that is used to group matching URLs into a view. Uses [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) syntax.
 
-### groupBy <a href="#groupby" id="groupby"></a>
+### groupBy
 
 _Optional._ String\[]
 
 The URL parameters that should be used to subdivide the URLs into multiple views, rather than being grouped into a single view.
 
-## Examples <a href="#examples" id="examples"></a>
+## Examples
 
-### Grouping dynamic path parameters <a href="#grouping-dynamic-path-parameters" id="grouping-dynamic-path-parameters"></a>
+### Grouping dynamic path parameters
 
 **Config**
 
@@ -85,7 +85,7 @@ https://cypress.io/users/bob#baz
 https://cypress.io/users/*
 ```
 
-### Using named path parameters <a href="#using-named-path-parameters" id="using-named-path-parameters"></a>
+### Using named path parameters
 
 **Config**
 
@@ -116,7 +116,7 @@ https://cypress.io/users/bob#baz
 https://cypress.io/users/:name
 ```
 
-### Grouping URLs by named path parameters <a href="#grouping-urls-by-named-path-parameters" id="grouping-urls-by-named-path-parameters"></a>
+### Grouping URLs by named path parameters
 
 **Config**
 
@@ -149,7 +149,7 @@ https://cypress.io/analytics/performance/:id
 https://cypress.io/analytics/usage/:id
 ```
 
-### Grouping URLs by named query parameters <a href="#grouping-urls-by-named-query-parameters" id="grouping-urls-by-named-query-parameters"></a>
+### Grouping URLs by named query parameters
 
 **Config**
 
@@ -180,7 +180,7 @@ https://cypress.io/app?name=hello
 https://cypress.io/app?name=world
 ```
 
-### Grouping URLs by path parameters to ignore dynamic hosts <a href="#grouping-urls-by-path-parameters-to-ignore-dynamic-hosts" id="grouping-urls-by-path-parameters-to-ignore-dynamic-hosts"></a>
+### Grouping URLs by path parameters to ignore dynamic hosts
 
 **Config**
 

docs/accessibility/core-concepts/inspecting-violation-details.mdx

@@ -18,18 +18,18 @@ After navigating to a specific Rule of View from a [Run-level report](/accessibi
 
 This page is divided into two main sections: **Rules** and **Snapshots**.
 
-### Rules
+## Rules
 
 The left-hand side of the detail view lists all Rules that match the current filters for the selected View. If no specific View is selected, the list applies to all Views in the run.
 
-#### Rule details
+### Rule details
 
 Each Rule can be expanded to reveal related elements and additional information:
 
 - **Description**: Text explaining the rule, its origin, the affected user experiences, and how to fix the issue.
 - **Learn More**: A link to Deque University for in-depth guidance.
 
-#### Element details
+### Element details
 
 Clicking on an element in the expanded Rule section provides:
 
@@ -44,7 +44,7 @@ Clicking on an element in the expanded Rule section provides:
   alt="Details displayed after clicking on an element in the Rules section of the Cypress Accessibility issue detail view. Options to copy the selector, print to console, share the issue, and solutions are available."
 />
 
-### Snapshots
+## Snapshots
 
 Snapshots are fully hydrated HTML and CSS representations of your application's state during the test. Unlike screenshots or video, these snapshots allow you to:
 

docs/api/commands/and.mdx

@@ -72,7 +72,7 @@ A method to be called on the chainer.
 Pass a function that can have any number of explicit assertions within it.
 Whatever was passed to the function is what is yielded.
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - In most cases, `.and()` yields the same subject it was given.
 - `.and()` is an assertion, and it is _safe_ to chain further commands that use
@@ -238,11 +238,11 @@ cy.get('button')
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `.and()` requires being chained off a previous command.
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `.and()` will continue to [retry](/app/core-concepts/retry-ability) its
   specified assertions until it times out.

docs/api/commands/as.mdx

@@ -55,7 +55,7 @@ Pass in an options object to change the default behavior of `.as()`.
 | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `type` | `query` | The type of alias to store, which impacts how the value is retrieved later in the test. Valid values are `query` and `static`. A `query` alias re-runs all queries leading up to the resulting value each time the alias is requested. A `static` alias is retrieved once when the alias is stored, and will never change. `type` has no effect when aliasing intercepts, spies, and stubs. |
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - `.as()` yields the same subject it was given.
 - It is _safe_ to chain further commands after `.as()`.
@@ -183,17 +183,17 @@ describe('A fixture', () => {
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `.as()` requires being chained off a previous command.
 
-### Assertions [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Assertions) {#Assertions}
+<HeaderAssertions />
 
 - `.as()` is a utility command.
 - `.as()` will not run assertions. Assertions will pass through as if this
   command did not exist.
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `.as()` cannot time out.
 

docs/api/commands/blur.mdx

@@ -55,7 +55,7 @@ Pass in an options object to change the default behavior of `.blur`.
 | `force`   | `false`                                                           | Forces the action, disables checking if [element is focused](#Requirements)         |
 | `timeout` | [`defaultCommandTimeout`](/app/references/configuration#Timeouts) | Time to wait for `.blur()` to resolve before [timing out](#Timeouts)                |
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - `.blur()` yields the same subject it was given.
 - It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried)
@@ -115,17 +115,17 @@ events. Your best bet here is to keep Cypress focused when working on a test.
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `.blur()` requires being chained off a command that yields DOMelement(s).
 - `.blur()` requires the element to currently have focus.
 - `.blur()` requires the element to be able to receive focus.
 
-### Assertions [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Assertions) {#Assertions}
+<HeaderAssertions />
 
 - `.blur()` will automatically wait for assertions you have chained to pass.
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `.blur()` can time out waiting for assertions you've added to pass.
 

docs/api/commands/check.mdx

@@ -64,7 +64,7 @@ Pass in an options object to change the default behavior of `.check()`.
 | `timeout`                    | [`defaultCommandTimeout`](/app/references/configuration#Timeouts)           | Time to wait for `.check()` to resolve before [timing out](#Timeouts)                                                                           |
 | `waitForAnimations`          | [`waitForAnimations`](/app/references/configuration#Actionability)          | Whether to wait for elements to [finish animating](/app/core-concepts/interacting-with-elements#Animations) before executing the command.       |
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - `.check()` yields the same subject it was given.
 - It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried)
@@ -168,19 +168,19 @@ cy.get('#pick-fruit :checked').should('be.checked').and('have.value', 'apple')
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `.check()` requires being chained off a command that yields DOM element(s).
 - `.check()` requires the element to have type `checkbox` or `radio`.
 
-### Assertions [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Assertions) {#Assertions}
+<HeaderAssertions />
 
 - `.check()` will automatically wait for the element to reach an
   [actionable state](/app/core-concepts/interacting-with-elements).
 - `.check()` will automatically [retry](/app/core-concepts/retry-ability)
   until all chained assertions have passed.
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `.check()` can time out waiting for the element to reach an
   [actionable state](/app/core-concepts/interacting-with-elements).

docs/api/commands/children.mdx

@@ -51,7 +51,7 @@ Pass in an options object to change the default behavior of `.children()`.
 | `log`     | `true`                                                            | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
 | `timeout` | [`defaultCommandTimeout`](/app/references/configuration#Timeouts) | Time to wait for `.children()` to resolve before [timing out](#Timeouts)            |
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - `.children()` yields the new DOM element(s) it found.
 - `.children()` is a query, and it is _safe_ to chain further commands.
@@ -115,19 +115,19 @@ cy.get('ul').children('.active')
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `.children()` requires being chained off a command that yields DOM element(s).
 
-### Assertions [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Assertions) {#Assertions}
+<HeaderAssertions />
 
 - `.children()` will automatically [retry](/app/core-concepts/retry-ability)
   until the element(s)
   [exist in the DOM](/app/core-concepts/introduction-to-cypress#Implicit-Assertions).
 - `.children()` will automatically [retry](/app/core-concepts/retry-ability)
   until all chained assertions have passed.
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `.children()` can time out waiting for the element(s) to
   [exist in the DOM](/app/core-concepts/introduction-to-cypress#Implicit-Assertions).

docs/api/commands/clear.mdx

@@ -54,7 +54,7 @@ Pass in an options object to change the default behavior of `.clear()`.
 | `timeout`                    | [`defaultCommandTimeout`](/app/references/configuration#Timeouts)           | Time to wait for `.clear()` to resolve before [timing out](#Timeouts)                                                                           |
 | `waitForAnimations`          | [`waitForAnimations`](/app/references/configuration#Actionability)          | Whether to wait for elements to [finish animating](/app/core-concepts/interacting-with-elements#Animations) before executing the command.       |
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - `.clear()` yields the same subject it was given.
 - It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried)
@@ -88,19 +88,19 @@ Please read the [`.type()`](/api/commands/type) documentation for more details.
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `.clear()` requires being chained off a command that yields DOM element(s).
 - `.clear()` requires the element to be an `input` or `textarea`.
 
-### Assertions [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Assertions) {#Assertions}
+<HeaderAssertions />
 
 - `.clear()` will automatically wait for the element to reach an
   [actionable state](/app/core-concepts/interacting-with-elements)
 - `.clear()` will automatically [retry](/app/core-concepts/retry-ability)
   until all chained assertions have passed
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `.clear()` can time out waiting for the element to reach an
   [actionable state](/app/core-concepts/interacting-with-elements).

docs/api/commands/clearallcookies.mdx

@@ -41,21 +41,21 @@ Pass in an options object to change the default behavior of
 | `log`     | `true`                                                      | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
 | `timeout` | [`responseTimeout`](/app/references/configuration#Timeouts) | Time to wait for `cy.clearAllCookies()` to resolve before [timing out](#Timeouts)   |
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - `cy.clearAllCookies()` yields `null`.
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `cy.clearAllCookies()` requires being chained off of `cy`.
 
-### Assertions [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Assertions) {#Assertions}
+<HeaderAssertions />
 
 - `cy.clearAllCookies()` cannot have any assertions chained.
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `cy.clearAllCookies()` should never time out.
 

docs/api/commands/clearalllocalstorage.mdx

@@ -42,21 +42,21 @@ Pass in an options object to change the default behavior of
 | ------ | ------- | ----------------------------------------------------------------------------------- |
 | `log`  | `true`  | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
 
-### Yields [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Subject-Management) {#Yields}
+<HeaderYields />
 
 - `cy.clearAllLocalStorage()` yields `null`.
 
 ## Rules
 
-### Requirements [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Chains-of-Commands) {#Requirements}
+<HeaderRequirements />
 
 - `cy.clearAllLocalStorage()` requires being chained off of `cy`.
 
-### Assertions [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Assertions) {#Assertions}
+<HeaderAssertions />
 
 - `cy.clearAllLocalStorage()` cannot have any assertions chained.
 
-### Timeouts [<Icon name="question-circle"/>](/app/core-concepts/introduction-to-cypress#Timeouts) {#Timeouts}
+<HeaderTimeouts />
 
 - `cy.clearAllLocalStorage()` cannot time out.