Add ARIA label to featured content region (#1011)

* Add ARIA label to region * Update test * Update from state to private variable * Wait for content before getting headline * Revert back to using @State
department-of-veterans-affairs · Jan 11, 2024 · dc54a92 · dc54a92
1 parent aef5ffa
commit dc54a92
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/web-components/src/components/va-featured-content/test/va-featured-content.e2e.ts b/packages/web-components/src/components/va-featured-content/test/va-featured-content.e2e.ts
@@ -94,7 +94,7 @@ describe('va-featured-content', () => {
     expect(element).toEqualHtml(`
       <va-featured-content class="hydrated" uswds="">
         <mock:shadow-root>
-          <div class="usa-summary-box" role="region">
+          <div class="usa-summary-box" role="region" aria-label="If I'm a Veteran, can I get VR&amp;E benefits and services?">
             <div class="usa-summary-box__body">
               <slot class="usa-summary-box__heading" name="headline"></slot>
               <slot class="usa-summary-box__text"></slot>

diff --git a/packages/web-components/src/components/va-featured-content/va-featured-content.tsx b/packages/web-components/src/components/va-featured-content/va-featured-content.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Element } from '@stencil/core';
+import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 
 /**
  * @componentName Featured content
@@ -16,8 +16,19 @@ export class VaFeaturedContent {
    */
   @Prop() uswds?: boolean = false;
 
+  /**
+   * Local state for slot=headline's text.
+   * Used to place an aria-label for role="region" with the same text as the heading.
+   */
+  @State() headlineText: string = null;
+
   @Element() el: HTMLElement;
 
+  componentWillLoad() {
+    let childElements = Array.from(this.el.children);
+    this.headlineText = childElements.find(element => element.slot === "headline").textContent.trim();
+  }
+
   componentDidLoad() {
     if (!this.uswds) {
       return
@@ -30,14 +41,17 @@ export class VaFeaturedContent {
 
     headline.classList.add('usa-summary-box__heading');
     content.classList.add('usa-summary-box__text');
+
+    let childElements = Array.from(this.el.children);
+    this.headlineText = childElements.find(element => element.slot === "headline").textContent.trim();
   }
 
   render() {
     const { uswds } = this;
     if (uswds) {
       return (
         <Host>
-          <div class="usa-summary-box" role="region">
+          <div class="usa-summary-box" role="region" aria-label={this.headlineText}>
             <div class="usa-summary-box__body">
               <slot name="headline"></slot>
               <slot />