feat: add tag prop to gcds-sr-only component

packages/angular/src/lib/stencil-generated/components.ts

@@ -941,13 +941,14 @@ export declare interface GcdsSignature extends Components.GcdsSignature {}
 
 
 @ProxyCmp({
+  inputs: ['tag']
 })
 @Component({
   selector: 'gcds-sr-only',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['tag'],
 })
 export class GcdsSrOnly {
   protected el: HTMLElement;

packages/web/src/components.d.ts

@@ -1049,6 +1049,17 @@ export namespace Components {
         "variant": 'colour' | 'white';
     }
     interface GcdsSrOnly {
+        /**
+          * Sets the appropriate HTML tag for the content.
+         */
+        "tag"?: | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'span';
     }
     interface GcdsStepper {
         /**
@@ -2938,6 +2949,17 @@ declare namespace LocalJSX {
         "variant"?: 'colour' | 'white';
     }
     interface GcdsSrOnly {
+        /**
+          * Sets the appropriate HTML tag for the content.
+         */
+        "tag"?: | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'span';
     }
     interface GcdsStepper {
         /**

packages/web/src/components/gcds-button/readme.md

@@ -47,7 +47,6 @@ Type: `Promise<void>`
 
 ### Used by
 
- - [gcds-header](../gcds-header)
  - [gcds-search](../gcds-search)
 
 ### Depends on
@@ -58,7 +57,6 @@ Type: `Promise<void>`
 ```mermaid
 graph TD;
   gcds-button --> gcds-icon
-  gcds-header --> gcds-button
   gcds-search --> gcds-button
   style gcds-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/web/src/components/gcds-date-modified/gcds-date-modified.css

@@ -14,5 +14,4 @@
       margin: var(--gcds-date-modified-description-margin);
     }
   }
-
 }

packages/web/src/components/gcds-file-uploader/gcds-file-uploader.css

@@ -69,7 +69,8 @@
     padding: var(--gcds-file-uploader-button-padding);
     background-color: var(--gcds-file-uploader-button-background);
     color: var(--gcds-file-uploader-button-text);
-    border: var(--gcds-file-uploader-button-border-width) solid var(--gcds-file-uploader-button-text);
+    border: var(--gcds-file-uploader-button-border-width) solid
+      var(--gcds-file-uploader-button-text);
     border-radius: var(--gcds-file-uploader-button-border-radius);
     transition: all 0.15s ease-in-out;
   }
@@ -84,21 +85,15 @@
     cursor: pointer;
   }
 
-  #file-uploader__summary {
-    visibility: hidden;
-    height: 0;
-    margin: 0;
-    overflow: hidden;
-  }
-
   &:hover button {
     background-color: var(--gcds-file-uploader-hover-button-background);
   }
 
   &:focus-within button {
     background-color: var(--gcds-file-uploader-focus-button-background);
     color: var(--gcds-file-uploader-focus-button-text);
-    outline: var(--gcds-file-uploader-button-outline-width) solid var(--gcds-file-uploader-focus-button-background);
+    outline: var(--gcds-file-uploader-button-outline-width) solid
+      var(--gcds-file-uploader-focus-button-background);
     border-color: currentColor;
   }
 
@@ -118,7 +113,8 @@
   font-weight: var(--gcds-file-uploader-button-font-weight);
   color: var(--gcds-file-uploader-default-text);
   padding: var(--gcds-file-uploader-file-padding);
-  border: var(--gcds-file-uploader-file-border-width) solid var(--gcds-file-uploader-file-border-color);
+  border: var(--gcds-file-uploader-file-border-width) solid
+    var(--gcds-file-uploader-file-border-color);
   cursor: pointer;
 
   &:not(:last-of-type) {
@@ -148,22 +144,29 @@
       transition: box-shadow 0.35s;
       overflow: visible;
       text-decoration: underline;
-      text-underline-offset: var(--gcds-file-uploader-file-button-underline-offset);
-      text-decoration-thickness: var(--gcds-file-uploader-file-button-default-decoration-thickness);
+      text-underline-offset: var(
+        --gcds-file-uploader-file-button-underline-offset
+      );
+      text-decoration-thickness: var(
+        --gcds-file-uploader-file-button-default-decoration-thickness
+      );
     }
 
     &:hover {
       color: var(--gcds-file-uploader-file-button-hover-text);
     }
 
     &:hover span {
-      text-decoration-thickness: var(--gcds-file-uploader-file-button-hover-decoration-thickness);
+      text-decoration-thickness: var(
+        --gcds-file-uploader-file-button-hover-decoration-thickness
+      );
     }
 
     &:focus {
       background-color: var(--gcds-file-uploader-focus-button-background);
       color: var(--gcds-file-uploader-focus-button-text);
-      outline: var(--gcds-file-uploader-focus-button-outline-width) solid var(--gcds-file-uploader-focus-button-background);
+      outline: var(--gcds-file-uploader-focus-button-outline-width) solid
+        var(--gcds-file-uploader-focus-button-background);
       outline-offset: var(--gcds-file-uploader-focus-button-outline-offset);
       border-color: var(--gcds-file-uploader-focus-button-background);
       text-decoration-color: transparent;

packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx

@@ -363,9 +363,8 @@ export class GcdsFileUploader {
     if (hint || errorMessage) {
       const hintID = hint ? `hint-${uploaderId} ` : '';
       const errorID = errorMessage ? `error-message-${uploaderId} ` : '';
-      attrsInput[
-        'aria-describedby'
-      ] = `${hintID}${errorID}${attrsInput['aria-describedby']}`;
+      attrsInput['aria-describedby'] =
+        `${hintID}${errorID}${attrsInput['aria-describedby']}`;
     }
 
     return (
@@ -409,14 +408,16 @@ export class GcdsFileUploader {
               }
             />
             {value.length > 0 ? (
-              <p id="file-uploader__summary">
+              <gcds-sr-only id="file-uploader__summary">
                 <span>{i18n[lang].summary.selected} </span>
                 {value.map(file => (
                   <span>{file} </span>
                 ))}
-              </p>
+              </gcds-sr-only>
             ) : (
-              <p id="file-uploader__summary">{i18n[lang].summary.unselected}</p>
+              <gcds-sr-only id="file-uploader__summary">
+                {i18n[lang].summary.unselected}
+              </gcds-sr-only>
             )}
           </div>
 

packages/web/src/components/gcds-file-uploader/test/gcds-file-uploader.spec.tsx

@@ -16,7 +16,7 @@ describe('gcds-file-uploader', () => {
               Choose file
             </button>
             <input aria-describedby="file-uploader__summary" id="file-uploader" name="file-uploader" type="file" value="" aria-invalid="false" />
-            <p id="file-uploader__summary">No file currently selected.</p>
+            <gcds-sr-only id="file-uploader__summary">No file currently selected.</gcds-sr-only>
           </div>
         </div>
       </gcds-file-uploader>
@@ -40,7 +40,7 @@ describe('gcds-file-uploader', () => {
               Choose file
             </button>
             <input aria-describedby="file-uploader__summary" id="file-uploader" name="file-uploader" type="file" value="" disabled="" aria-invalid="false" />
-            <p id="file-uploader__summary">No file currently selected.</p>
+            <gcds-sr-only id="file-uploader__summary">No file currently selected.</gcds-sr-only>
           </div>
         </div>
       </gcds-file-uploader>
@@ -65,7 +65,7 @@ describe('gcds-file-uploader', () => {
               Choose file
             </button>
             <input id="file-uploader" name="file-uploader" type="file" value="" aria-invalid="true" aria-describedby="error-message-file-uploader file-uploader__summary" />
-            <p id="file-uploader__summary">No file currently selected.</p>
+            <gcds-sr-only id="file-uploader__summary">No file currently selected.</gcds-sr-only>
           </div>
         </div>
       </gcds-file-uploader>
@@ -90,7 +90,7 @@ describe('gcds-file-uploader', () => {
               Choose file
             </button>
             <input id="file-uploader" name="file-uploader" type="file" value="" aria-invalid="false" aria-describedby="hint-file-uploader file-uploader__summary" />
-            <p id="file-uploader__summary">No file currently selected.</p>
+            <gcds-sr-only id="file-uploader__summary">No file currently selected.</gcds-sr-only>
           </div>
         </div>
       </gcds-file-uploader>
@@ -114,7 +114,7 @@ describe('gcds-file-uploader', () => {
               Choose file
             </button>
             <input aria-describedby="file-uploader__summary" id="file-uploader" name="file-uploader" type="file" value="" aria-invalid="false" />
-            <p id="file-uploader__summary">No file currently selected.</p>
+            <gcds-sr-only id="file-uploader__summary">No file currently selected.</gcds-sr-only>
           </div>
         </div>
       </gcds-file-uploader>
@@ -138,7 +138,7 @@ describe('gcds-file-uploader', () => {
               Choose file
             </button>
             <input aria-describedby="file-uploader__summary" id="file-uploader" name="file-uploader" type="file" value="" aria-invalid="false" />
-            <p id="file-uploader__summary">No file currently selected.</p>
+            <gcds-sr-only id="file-uploader__summary">No file currently selected.</gcds-sr-only>
           </div>
         </div>
       </gcds-file-uploader>
@@ -162,7 +162,7 @@ describe('gcds-file-uploader', () => {
               Choose file
             </button>
             <input aria-describedby="file-uploader__summary" id="file-uploader" name="file-uploader" type="file" value="" aria-invalid="false" required="" />
-            <p id="file-uploader__summary">No file currently selected.</p>
+            <gcds-sr-only id="file-uploader__summary">No file currently selected.</gcds-sr-only>
           </div>
         </div>
       </gcds-file-uploader>

packages/web/src/components/gcds-footer/gcds-footer.css

@@ -6,17 +6,6 @@
     display: initial;
   }
 
-  .sub__header,
-  .themenav__header,
-  .gcds-footer__header {
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    margin: 0;
-    overflow: hidden;
-    position: absolute;
-    width: 1px;
-  }
-
   [class$='__container'] {
     justify-content: space-between;
     width: 90%;

packages/web/src/components/gcds-footer/gcds-footer.tsx

@@ -143,13 +143,13 @@ export class GcdsFooter {
     let subLinkCount = 0;
 
     return (
-      <Host role="contentinfo">
-        <h2 class="gcds-footer__header">{I18N[lang].about}</h2>
+      <Host role="contentinfo" aria-label="Footer">
+        <gcds-sr-only tag="h2">{I18N[lang].about}</gcds-sr-only>
         {contextualLinksObject && contextualHeading && (
           <div class="gcds-footer__contextual">
             <div class="contextual__container">
-              <nav aria-labelledby="contextual__header">
-                <h3 id="contextual__header" class="contextual__header">
+              <nav aria-labelledby="contextual__heading">
+                <h3 id="contextual__heading" class="contextual__heading">
                   {contextualHeading}
                 </h3>
                 <ul class="contextual__list">
@@ -172,8 +172,8 @@ export class GcdsFooter {
         {display === 'full' ? (
           <div class="gcds-footer__main">
             <div class="main__container">
-              <nav class="main__govnav" aria-labelledby="govnav__header">
-                <h3 id="govnav__header">{I18N[lang].gov.heading}</h3>
+              <nav class="main__govnav" aria-labelledby="govnav__heading">
+                <h3 id="govnav__heading">{I18N[lang].gov.heading}</h3>
                 <ul class="govnav__list">
                   {Object.keys(govNav).map(value => (
                     <li>
@@ -182,11 +182,10 @@ export class GcdsFooter {
                   ))}
                 </ul>
               </nav>
-              <nav
-                class="main__themenav"
-                aria-labelledby="themenav__header"
-              >
-                <h4 id="themenav__header" class="themenav__header">{I18N[lang].themes.heading}</h4>
+              <nav class="main__themenav" aria-labelledby="themenav__heading">
+                <gcds-sr-only tag="h4" id="themenav__heading">
+                  {I18N[lang].themes.heading}
+                </gcds-sr-only>
                 <ul class="themenav__list">
                   {Object.keys(themeNav).map(value => (
                     <li>
@@ -201,8 +200,10 @@ export class GcdsFooter {
 
         <div class="gcds-footer__sub">
           <div class="sub__container">
-            <nav aria-labelledby="sub__header">
-              <h3 id="sub__header" class="sub__header">{I18N[lang].site.heading}</h3>
+            <nav aria-labelledby="sub__heading">
+              <gcds-sr-only tag="h3" id="sub__heading">
+                {I18N[lang].site.heading}
+              </gcds-sr-only>
               <ul>
                 {subLinks
                   ? Object.keys(subLinksObject).map(key => {