Add headings to pages with product names + icons (#6075)

* Add headings to pages with product names + icons * Add badges for all pages within our products * lint fix * Resolve duplicate headings that caused issues with links * Add Cypress App to App relevant pages + SEO improvements * lint * Fix duplicate heading
cypress-io · Jan 14, 2025 · b2e7ae2 · b2e7ae2
1 parent ca75c90
commit b2e7ae2
Show file tree

Hide file tree

Showing 282 changed files with 1,665 additions and 235 deletions.
diff --git a/docs/accessibility/changelog.mdx b/docs/accessibility/changelog.mdx
@@ -5,6 +5,8 @@ sidebar_label: Changelog
 sidebar_position: 200
 ---
 
+<ProductHeading product="accessibility" />
+
 # Changelog
 
 ## Week of 11/11/2024

diff --git a/docs/accessibility/configuration/axe-core-configuration.mdx b/docs/accessibility/configuration/axe-core-configuration.mdx
@@ -4,9 +4,9 @@ description: 'Configuration for Axe-Core® rules can be configured.'
 sidebar_label: 'Axe Core® configuration'
 ---
 
-# Axe Core® configuration
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# Axe Core® configuration
 
 Configuration for Axe-Core® rules is available through your Account Executive. We are happy to have a call with you to dial in your report config to make sure you are getting the most useful reports possible, and we find this onboarding very effective.
 

diff --git a/docs/accessibility/configuration/elementfilters.mdx b/docs/accessibility/configuration/elementfilters.mdx
@@ -5,9 +5,9 @@ sidebar_label: elementFilters
 sidebar_position: 20
 ---
 
-# elementFilters
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# elementFilters
 
 :::info
 

diff --git a/docs/accessibility/configuration/overview.mdx b/docs/accessibility/configuration/overview.mdx
@@ -5,9 +5,9 @@ description: 'Configuration allows you to customize and fine-tune Accessibility
 sidebar_position: 10
 ---
 
-# Configuration
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# Configuration
 
 Configuration allows you to customize and fine-tune Accessibility in Cypress. While Accessibility is designed to work seamlessly out of the box, there are instances where custom configuration may be necessary to address unique application structures, testing requirements, or edge cases. This section guides you through setting configuration to enhance the functionality and accuracy of Accessibility.
 

diff --git a/docs/accessibility/configuration/viewfilters.mdx b/docs/accessibility/configuration/viewfilters.mdx
@@ -5,9 +5,9 @@ sidebar_label: viewFilters
 sidebar_position: 30
 ---
 
-# viewFilters
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# viewFilters
 
 :::info
 Note: setting `viewFilters` impacts both Accessibility and UI Coverage reports.

diff --git a/docs/accessibility/configuration/views.mdx b/docs/accessibility/configuration/views.mdx
@@ -5,9 +5,9 @@ sidebar_label: views
 sidebar_position: 40
 ---
 
-# views
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# views
 
 :::info
 Note: setting views impacts both Accessibility and UI Coverage reports.

diff --git a/docs/accessibility/core-concepts/accessibility-score.mdx b/docs/accessibility/core-concepts/accessibility-score.mdx
@@ -5,9 +5,9 @@ sidebar_label: Accessibility score
 sidebar_position: 30
 ---
 
-# Accessibility score
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# Accessibility score
 
 Cypress provides a top-line percentage score to give a general sense of accessibility for your project. This score, calculated for a run, reflects the **average score** of **all application snapshots** captured during the run. It is based on the ratio of passing versus failing accessibility checks for each snapshot, with results weighted by the severity of the issues.
 

diff --git a/docs/accessibility/core-concepts/how-it-works.mdx b/docs/accessibility/core-concepts/how-it-works.mdx
@@ -5,6 +5,8 @@ sidebar_label: 'How it works'
 sidebar_position: 40
 ---
 
+<ProductHeading product="accessibility" />
+
 # How it works
 
 Cypress Accessibility seamlessly integrates accessibility testing into your development pipeline. Below are the stages of the Cypress Accessibility process:

diff --git a/docs/accessibility/core-concepts/inspecting-violation-details.mdx b/docs/accessibility/core-concepts/inspecting-violation-details.mdx
@@ -5,9 +5,9 @@ sidebar_label: Inspecting violation details
 sidebar_position: 20
 ---
 
-# Inspecting violation details
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# Inspecting violation details
 
 After navigating to a specific Rule of View from a [Run-level report](/accessibility/core-concepts/run-level-reports), you'll land on the Violation Detail view.
 

diff --git a/docs/accessibility/core-concepts/run-level-reports.mdx b/docs/accessibility/core-concepts/run-level-reports.mdx
@@ -5,9 +5,9 @@ sidebar_position: 10
 sidebar_label: Run-level reports
 ---
 
-# Run-level reports
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# Run-level reports
 
 This guide highlights the three main areas to focus on when reviewing an accessibility report for a Cypress run. It also explains key terms and definitions used in these reports.
 

diff --git a/docs/accessibility/get-started/introduction.mdx b/docs/accessibility/get-started/introduction.mdx
@@ -6,7 +6,9 @@ sidebar_position: 10
 sidebar_custom_props: { 'new_label': true }
 ---
 
-# Cypress Accessibility <Badge type="success">+ Add-on</Badge>
+<ProductHeading product="accessibility" />
+
+# Automated accessibility checks on every test
 
 Instantly visualize, triage, and fix accessibility violations without any additional code or configuration.
 Dive deep into each violation with live, fully-rendered DOM snapshots of your application as it appeared during your tests.

diff --git a/docs/accessibility/get-started/setup.mdx b/docs/accessibility/get-started/setup.mdx
@@ -5,6 +5,8 @@ description: 'Set up Cypress Accessibility by recording a run. No code changes o
 sidebar_position: 20
 ---
 
+<ProductHeading product="accessibility" />
+
 # Get Started
 
 You don't need to make any changes to your code or your test setup. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using Cypress Accessibility.

diff --git a/docs/accessibility/guides/accessibility-automation.mdx b/docs/accessibility/guides/accessibility-automation.mdx
@@ -2,10 +2,12 @@
 sidebar_label: Accessibility automation principles
 title: 'Accessibility automation principles | Cypress Accessibility Documentation'
 description: "
-Apply these core principles to maximize the impact of Cypress Accessibility’s automation: complement automation with human judgment for deeper insights, manage false positives effectively, and ensure robust assistive technology support."
+Apply these core principles to maximize the impact of Cypress Accessibility's automation: complement automation with human judgment for deeper insights, manage false positives effectively, and ensure robust assistive technology support."
 sidebar_position: 80
 ---
 
+<ProductHeading product="accessibility" />
+
 # Accessibility automation principles
 
 This guide outlines foundational concepts for using Cypress Accessibility, which also apply to accessibility automation tools in general.

diff --git a/docs/accessibility/guides/block-pull-requests.mdx b/docs/accessibility/guides/block-pull-requests.mdx
@@ -5,6 +5,8 @@ description: "Set policies and block pull requests automatically with Cypress Ac
 sidebar_position: 40
 ---
 
+<ProductHeading product="accessibility" />
+
 # Block pull requests and set policies
 
 Cypress Accessibility reports are generated server-side in Cypress Cloud, based on test artifacts uploaded during execution. This ensures there is no performance impact on your Cypress test runs.

diff --git a/docs/accessibility/guides/improve-accessibility.mdx b/docs/accessibility/guides/improve-accessibility.mdx
@@ -5,6 +5,8 @@ description: 'Discover how to break down accessibility reports, prioritize fixes
 sidebar_position: 20
 ---
 
+<ProductHeading product="accessibility" />
+
 # Improve accessibility
 
 This guide explains how to break down accessibility reports and create a focused plan for remediation using Cypress Accessibility.

diff --git a/docs/accessibility/guides/introduction.mdx b/docs/accessibility/guides/introduction.mdx
@@ -1,8 +1,13 @@
 ---
 title: Introduction
+description: Learn how to set goals and make progress using Cypress Accessibility, generate reports during local development cycles, and monitor a production website.
 sidebar_position: 10
 ---
 
+<ProductHeading product="accessibility" />
+
+# Introduction
+
 :::info
 
 ##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn

diff --git a/docs/accessibility/guides/local-development.mdx b/docs/accessibility/guides/local-development.mdx
@@ -5,6 +5,8 @@ description: 'Get precise, fast, and scoped accessibility feedback during local
 sidebar_position: 50
 ---
 
+<ProductHeading product="accessibility" />
+
 # Feedback during local development
 
 For reliable accessibility feedback during local development, the best approach is recording your tests directly to Cypress Cloud. By running tests related to your changes locally, you can bypass build pipelines and CI processes entirely. This can be achieved with a single command:

diff --git a/docs/accessibility/guides/maintain-accessibility.mdx b/docs/accessibility/guides/maintain-accessibility.mdx
@@ -5,6 +5,8 @@ description: 'Learn how to maintain long-term accessibility with Cypress, using
 sidebar_position: 30
 ---
 
+<ProductHeading product="accessibility" />
+
 # Maintain accessibility
 
 Accessibility isn't a one-time project—it's a continuous process. This guide explains how to transition from addressing known issues to maintaining long-term accessibility in your projects.

diff --git a/docs/accessibility/guides/maximize-coverage.mdx b/docs/accessibility/guides/maximize-coverage.mdx
@@ -5,6 +5,8 @@ description: "Expand accessibility testing by combining Cypress Accessibility's
 sidebar_position: 70
 ---
 
+<ProductHeading product="accessibility" />
+
 # Maximize coverage
 
 As you become more familiar with accessibility violations and their underlying principles, you'll notice the connection between generic, automated checks (e.g., Axe Core®) and the specific user-facing behaviors of your application. Often, the insights gained from Cypress Accessibility's automated checks can guide you to create custom assertions tailored to your application's unique requirements.

diff --git a/docs/accessibility/guides/production-monitoring.mdx b/docs/accessibility/guides/production-monitoring.mdx
@@ -5,6 +5,8 @@ description: 'Monitor accessibility issues in production by running scheduled Cy
 sidebar_position: 60
 ---
 
+<ProductHeading product="accessibility" />
+
 # Production monitoring
 
 Cypress is commonly used in CI and local development workflows. It can also be leveraged to monitor production or staging environments through scheduled tests. This approach is particularly useful for environments involving dynamic content, such as those managed by Content Management Systems (CMS), where content changes can impact accessibility.

diff --git a/docs/accessibility/results-api.mdx b/docs/accessibility/results-api.mdx
@@ -5,9 +5,9 @@ sidebar_label: Results API
 sidebar_position: 100
 ---
 
-# Results API
+<ProductHeading product="accessibility" />
 
-<AccessibilityAddon />
+# Results API
 
 The `@cypress/extract-cloud-results` module provides the `getAccessibilityResults` utility which enables you to programmatically fetch your run's Accessibility results in a CI environment. It determines the Cypress run created for the given CI workflow and will return the Accessibility results associated with that run. The results will be returned once the Cypress run has finished and the Accessibility report has been processed.
 

diff --git a/docs/api/commands/and.mdx b/docs/api/commands/and.mdx
@@ -1,8 +1,14 @@
 ---
-title: and
+title: 'and | Cypress Documentation'
+description: 'Create an assertion. Assertions are automatically retried as part of the previous command until they pass or time out.'
+sidebar_label: and
 slug: /api/commands/and
 ---
 
+<ProductHeading product="app" />
+
+# and
+
 Create an assertion. Assertions are automatically retried as part of the
 previous command until they pass or time out.
 

diff --git a/docs/api/commands/as.mdx b/docs/api/commands/as.mdx
@@ -1,8 +1,14 @@
 ---
-title: as
+title: 'as | Cypress Documentation'
+description: Assign an alias for later use in Cypress. Reference the alias later within a `cy.get()` query or `cy.wait()` command with an `@` prefix.
+sidebar_label: as
 slug: /api/commands/as
 ---
 
+<ProductHeading product="app" />
+
+# as
+
 Assign an alias for later use. Reference the alias later within a
 [`cy.get()`](/api/commands/get) query or [`cy.wait()`](/api/commands/wait)
 command with an `@` prefix.

diff --git a/docs/api/commands/blur.mdx b/docs/api/commands/blur.mdx
@@ -1,7 +1,13 @@
 ---
-title: blur
+title: 'blur | Cypress Documentation'
+description: Blur a focused element in Cypress.
+sidebar_label: blur
 ---
 
+<ProductHeading product="app" />
+
+# blur
+
 Blur a focused element.
 
 It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried) to

diff --git a/docs/api/commands/check.mdx b/docs/api/commands/check.mdx
@@ -1,8 +1,14 @@
 ---
-title: check
+title: 'check | Cypress Documentation'
+description: Check checkbox(es) or radio(s) in Cypress.
+sidebar_label: check
 slug: /api/commands/check
 ---
 
+<ProductHeading product="app" />
+
+# check
+
 Check checkbox(es) or radio(s).
 
 It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried) to

diff --git a/docs/api/commands/children.mdx b/docs/api/commands/children.mdx
@@ -1,8 +1,14 @@
 ---
-title: children
+title: 'children | Cypress Documentation'
+description: Get the children of each DOM element within a set of DOM elements in Cypress.
+sidebar_label: children
 slug: /api/commands/children
 ---
 
+<ProductHeading product="app" />
+
+# children
+
 Get the children of each DOM element within a set of DOM elements.
 
 :::info

diff --git a/docs/api/commands/clear.mdx b/docs/api/commands/clear.mdx
@@ -1,8 +1,14 @@
 ---
-title: clear
+title: 'clear | Cypress Documentation'
+description: Clear the value of an input or textarea in Cypress.
+sidebar_label: clear
 slug: /api/commands/clear
 ---
 
+<ProductHeading product="app" />
+
+# clear
+
 Clear the value of an `input` or `textarea`.
 
 It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried) to

diff --git a/docs/api/commands/clearallcookies.mdx b/docs/api/commands/clearallcookies.mdx
@@ -1,7 +1,13 @@
 ---
-title: clearAllCookies
+title: 'clearAllCookies | Cypress Documentation'
+description: Clear all browser cookies in Cypress.
+sidebar_label: clearAllCookies
 ---
 
+<ProductHeading product="app" />
+
+# clearAllCookies
+
 Clear all browser cookies.
 
 :::caution

diff --git a/docs/api/commands/clearalllocalstorage.mdx b/docs/api/commands/clearalllocalstorage.mdx
@@ -1,7 +1,13 @@
 ---
-title: clearAllLocalStorage
+title: 'clearAllLocalStorage | Cypress Documentation'
+description: Clear all localStorage data in Cypress.
+sidebar_label: clearAllLocalStorage
 ---
 
+<ProductHeading product="app" />
+
+# clearAllLocalStorage
+
 Clear
 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
 data for all origins with which the test has interacted.

diff --git a/docs/api/commands/clearallsessionstorage.mdx b/docs/api/commands/clearallsessionstorage.mdx
@@ -1,7 +1,13 @@
 ---
-title: clearAllSessionStorage
+title: 'clearAllSessionStorage | Cypress Documentation'
+description: Clear all session storage data in Cypress.
+sidebar_label: clearAllSessionStorage
 ---
 
+<ProductHeading product="app" />
+
+# clearAllSessionStorage
+
 Clear
 [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
 data for all origins with which the test has interacted.

diff --git a/docs/api/commands/clearcookie.mdx b/docs/api/commands/clearcookie.mdx
@@ -1,7 +1,13 @@
 ---
-title: clearCookie
+title: 'clearCookie | Cypress Documentation'
+description: Clear a specific browser cookie in Cypress.
+sidebar_label: clearCookie
 ---
 
+<ProductHeading product="app" />
+
+# clearCookie
+
 Clear a specific browser cookie.
 
 :::caution

diff --git a/docs/api/commands/clearcookies.mdx b/docs/api/commands/clearcookies.mdx
@@ -1,7 +1,13 @@
 ---
-title: clearCookies
+title: 'clearCookies | Cypress Documentation'
+description: Clear browser cookies for a domain in Cypress.
+sidebar_label: clearCookies
 ---
 
+<ProductHeading product="app" />
+
+# clearCookies
+
 Clear browser cookies for a domain.
 
 :::caution