va-breadcrumbs: first breadcrumb label defaults to "VA.gov home" (dep…

…artment-of-veterans-affairs#1066) * update breadcrumb home link labels * add logic to make first anchor “VA.gov home” * add prop for displaying VA.gov home label * update version
acald-creator · Feb 27, 2024 · 17cefe5 · 17cefe5
1 parent 0b8a34f
commit 17cefe5
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 15 deletions.
diff --git a/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx b/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx
@@ -16,7 +16,7 @@ export default {
   },
 };
 const dataArray = [
-  { label: 'Level one', href: '#one' },
+  { label: 'VA.gov home', href: '#one' },
   { label: 'Level two', href: '#two' },
   { label: 'Level three', href: '#three' },
 ];
@@ -35,7 +35,7 @@ const DynamicCrumbsTemplate = ({
   'disable-analytics': disableAnalytics,
 }) => {
   const breadcrumbs = [
-    { label: 'Level 1', href: '/#1' },
+    { label: 'VA.gov home', href: '/#1' },
     { label: 'Level 2', href: '/#2' },
     { label: 'Level 3', href: '/#3' },
   ];
@@ -87,7 +87,7 @@ const WrappingCrumbsTemplate = ({
   wrapping,
 }) => {
   const breadcrumbs = [
-    { label: 'Home', href: '/#1' },
+    { label: 'VA.gov home', href: '/#1' },
     { label: 'Federal Contracting', href: '/#2' },
     { label: 'Contracting assistance programs', href: '/#3' },
     {
@@ -116,7 +116,7 @@ const WithRouterTemplate = ({
   wrapping
 }) => {
   const breadcrumbs = [
-    { label: 'Home', href: '/#1' },
+    { label: 'VA.gov home', href: '/#1' },
     { label: 'Federal Contracting', href: '/#2', isRouterLink: true },
     { label: 'Contracting assistance programs', href: '/#3', isRouterLink: true },
     {
@@ -183,7 +183,7 @@ const defaultArgs = {
   'uswds': true,
   'label': 'Breadcrumb',
   'breadcrumb-list':
-    '[{ "label": "Level One", "href": "#one" }, { "label": "Level two", "href": "#two" }, { "label": "Current", "href": "#current" }]',
+    '[{ "label": "VA.gov home", "href": "#one" }, { "label": "Level two", "href": "#two" }, { "label": "Current", "href": "#current" }]',
   'disable-analytics': false,
   'wrapping': false,
 };

diff --git a/packages/storybook/stories/va-breadcrumbs.stories.jsx b/packages/storybook/stories/va-breadcrumbs.stories.jsx
@@ -16,7 +16,7 @@ export default {
 
 const Template = ({ label, 'disable-analytics': disableAnalytics }) => (
   <va-breadcrumbs label={label} disable-analytics={disableAnalytics}>
-    <a href="#home">Home</a>
+    <a href="#home">VA.gov home</a>
     <a href="#one">Level one</a>
     <a href="#two">Level two</a>
   </va-breadcrumbs>
@@ -27,13 +27,13 @@ const DynamicCrumbsTemplate = ({
   'disable-analytics': disableAnalytics 
 }) => {
   const breadcrumbs = [
-    {label: 'Level 1', path: '/#1'},
+    {label: 'VA.gov home', path: '/#1'},
     {label: 'Level 2', path: '/#2'},
     {label: 'Level 3', path: '/#3'},
   ];
 
   const breadcrumbs2 = [
-    {label: 'First Link', path: '#example1'},
+    {label: 'VA.gov home', path: '#example1'},
     {label: 'Second Link', path: '#example2'},
     {label: 'Third Link', path: '#example3'},
     {label: 'Fourth Link', path: '#example4'},

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/web-components",
-  "version": "5.0.5",
+  "version": "5.1.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -169,6 +169,10 @@ export namespace Components {
           * Analytics tracking function(s) will not be called
          */
         "disableAnalytics"?: boolean;
+        /**
+          * When true, the first breadcrumb label will be "VA.gov home".
+         */
+        "homeVeteransAffairs"?: boolean;
         /**
           * Adds an aria-label attribute to the <nav /> element.
          */
@@ -2062,6 +2066,10 @@ declare namespace LocalJSX {
           * Analytics tracking function(s) will not be called
          */
         "disableAnalytics"?: boolean;
+        /**
+          * When true, the first breadcrumb label will be "VA.gov home".
+         */
+        "homeVeteransAffairs"?: boolean;
         /**
           * Adds an aria-label attribute to the <nav /> element.
          */

diff --git a/packages/web-components/src/components/va-breadcrumbs/test/va-breadcrumbs.e2e.ts b/packages/web-components/src/components/va-breadcrumbs/test/va-breadcrumbs.e2e.ts
@@ -41,7 +41,7 @@ describe('va-breadcrumbs', () => {
           </nav>
         </mock:shadow-root>
         <li class="va-breadcrumbs-li">
-          <a href="#home">Home</a>
+          <a href="#home">VA.gov home</a>
         </li>
         <li class="va-breadcrumbs-li">
           <a href="#one">Level One</a>
@@ -74,7 +74,7 @@ describe('va-breadcrumbs', () => {
           </nav>
         </mock:shadow-root>
         <li class="va-breadcrumbs-li">
-          <a href="#home">Home</a>
+          <a href="#home">VA.gov home</a>
         </li>
         <li class="va-breadcrumbs-li">
           <a href="#one">Level One</a>
@@ -144,6 +144,38 @@ describe('va-breadcrumbs', () => {
     expect(analyticsSpy).toHaveReceivedEventTimes(0);
   });
 
+  it('updates first anchor link label to "VA.gov home"', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-breadcrumbs>
+        <a href="#home">not the right label</a>
+        <a href="#one">Level One</a>
+        <a href="#two">Level Two</a>
+      </va-breadcrumbs>
+    `);
+
+    const anchorElements = await page.findAll('pierce/a');
+    const firstAnchorText = anchorElements[0].innerText;
+
+    expect(firstAnchorText).toBe('VA.gov home');
+  });
+
+  it('does not update first anchor link label to "VA.gov home" when homeVeteransAffairs prop is false', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-breadcrumbs home-veterans-affairs="false">
+        <a href="#home">home</a>
+        <a href="#one">Level One</a>
+        <a href="#two">Level Two</a>
+      </va-breadcrumbs>
+    `);
+
+    const anchorElements = await page.findAll('pierce/a');
+    const firstAnchorText = anchorElements[0].innerText;
+
+    expect(firstAnchorText).toBe('home');
+  });
+
   /** Begin USWDS v3 Tests */
 
   it('uswds - renders', async () => {
@@ -158,7 +190,7 @@ describe('va-breadcrumbs', () => {
             <ol class="usa-breadcrumb__list" role="list">
               <li class="usa-breadcrumb__list-item">
                 <a class="usa-breadcrumb__link" href="#home">
-                  <span>Home</span>
+                  <span>VA.gov home</span>
                 </a>
               </li>
               <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
@@ -207,7 +239,7 @@ describe('va-breadcrumbs', () => {
       action: 'linkClick',
       componentName: 'va-breadcrumbs',
       details: {
-        clickLabel: 'Level One',
+        clickLabel: 'VA.gov home',
         clickLevel: 1,
         totalLevels: 3,
       },
@@ -240,7 +272,7 @@ describe('va-breadcrumbs', () => {
             <ol class="usa-breadcrumb__list" role="list">
               <li class="usa-breadcrumb__list-item">
                 <a class="usa-breadcrumb__link" href="/one">
-                  <span>One</span>
+                  <span>VA.gov home</span>
                 </a>
               </li>
               <li class="usa-breadcrumb__list-item">
@@ -290,4 +322,32 @@ describe('va-breadcrumbs', () => {
     expect(routeChangeSpy).not.toHaveReceivedEvent();
   });
 
+  it('uswds - updates first anchor link to "VA.gov home"', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <va-breadcrumbs breadcrumb-list=\'[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two" }, { "label": "Three", "href": "/three" }]\' uswds></va-breadcrumbs>
+    `);
+
+    const anchorElements = await page.findAll('va-breadcrumbs >>> a');
+    const firstAnchorLabel = await anchorElements[0].getProperty('innerText');
+
+    expect(firstAnchorLabel).toBe('VA.gov home');
+  });
+
+  it('uswds - does not update first anchor link label to "VA.gov home" when homeVeteransAffairs prop is false', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-breadcrumbs home-veterans-affairs="false" uswds>
+        <a href="#home">home</a>
+        <a href="#one">Level One</a>
+        <a href="#two">Level Two</a>
+      </va-breadcrumbs>
+    `);
+
+    const anchorElements = await page.findAll('pierce/a');
+    const firstAnchorText = anchorElements[0].innerText;
+
+    expect(firstAnchorText).toBe('home');
+  });
+
 });
diff --git a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx
@@ -40,6 +40,12 @@ export class VaBreadcrumbs {
    *  Represents a list of breadcrumbs. Use an array of objects with label and href properties, and then use JSON.stringify() to convert to a string. This prop is available when `uswds` is set to `true`.
    */
   @Prop() breadcrumbList?: any;
+
+  /**
+   *  When true, the first breadcrumb label will be "VA.gov home". 
+   */
+  @Prop() homeVeteransAffairs?: boolean = true;
+
   /**
    * 
    * Represents an internal state of the component which stores the list of breadcrumbs parsed from the 'breadcrumbList' prop. 
@@ -94,6 +100,12 @@ export class VaBreadcrumbs {
    * @private
    */
   private updateBreadCrumbList(breadcrumbList: Array<{ label: string; href: string; isRouterLink?: boolean }> | string) {
+    const firstBreadcrumb = breadcrumbList[0] as { label: string; href: string }
+
+    if (firstBreadcrumb && this.homeVeteransAffairs) {
+      firstBreadcrumb.label = 'VA.gov home';
+    }
+
     this.formattedBreadcrumbs = typeof breadcrumbList === 'string' ? JSON.parse(breadcrumbList) : breadcrumbList;
   }
 
@@ -220,13 +232,18 @@ export class VaBreadcrumbs {
           node.classList.add('va-breadcrumbs-li');
         }
         const anchor = node.querySelector('a');
+
+        if (index === 0 && anchor && this.homeVeteransAffairs) {
+          anchor.innerText = 'VA.gov home';
+        }
+
         const isAriaCurrent = anchor?.getAttribute('aria-current');
 
         if (isAriaCurrent && index !== slotNodes.length - 1) {
           anchor.removeAttribute('aria-current');
         }
 
-        if(this.uswds) {
+        if (this.uswds) {
           const span = document.createElement('span');
           span.textContent = anchor.textContent;
           anchor.innerHTML = '';