Skip to content

Commit

Permalink
Merge pull request #3468 from department-of-veterans-affairs/db/add-b…
Browse files Browse the repository at this point in the history
…readcrumb-spacing-3057

Add spacing requirements
  • Loading branch information
LWWright7 authored Nov 1, 2024
2 parents d04aaf7 + 6055f05 commit 852071c
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/_components/breadcrumbs.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ Start with "VA.gov home". Clearly indicate that the home page is the VA.gov home

* The breadcrumb should be placed below the header and above the main content.
* The placement of the breadcrumb must be consistent from page to page.
* Spacing for the breadcrumb is built in to the component and should be consistent throughout all layouts. The correct spacing is specified in the images below:

{% include component-example.html alt="Breadcrumbs have 20px / 2.5 spacing units above and 32px / 4 spacing units below at a mobile breakpoint." file="/images/components/breadcrumbs/breadcrumbs-spacing-mobile.png" caption="Breadcrumbs have 20px or 2.5 spacing units above and 32px or 4 spacing units below at a mobile breakpoint." %}

{% include component-example.html alt="Breadcrumbs have 20px / 2.5 spacing units above and 48px / 6 spacing units below at a desktop breakpoint." file="/images/components/breadcrumbs/breadcrumbs-spacing-desktop.png" caption="Breadcrumbs have 20px or 2.5 spacing units above and 48px or 6 spacing units below at a desktop breakpoint." %}

### Behavior

Expand Down Expand Up @@ -90,4 +95,4 @@ To use React Router with this component [follow these instructions](https://desi

### Additional accessibility guidance for VA

* **Make current page a link.** Use a link for the current page for robustness. While it may sound counterintuitive to link to the current page in this component, it makes sense to include this as a link so screen readers voice the current page link whether the user navigates by element or by tabbing. Making the current page a link rather than text makes it a focusable and clickable element. It also follows [WAI-ARIA Authoring Practices Guide (APG) guidances](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/) which states that an `a` element with `aria-current="page"` should represent the current page.
* **Make current page a link.** Use a link for the current page for robustness. While it may sound counterintuitive to link to the current page in this component, it makes sense to include this as a link so screen readers voice the current page link whether the user navigates by element or by tabbing. Making the current page a link rather than text makes it a focusable and clickable element. It also follows [WAI-ARIA Authoring Practices Guide (APG) guidances](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/) which states that an `a` element with `aria-current="page"` should represent the current page.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 852071c

Please sign in to comment.