test(banner): add a11y test (#1343)

* test(banner): add a11y test

* test(banner): update visual test with a11y fixes

* Update docs with a11y fixes

Author: dancormier

docs/product/components/banners.html

@@ -19,7 +19,7 @@
     transform: translate3d(0, 0, 0);
 }
 </style>
-<aside class="s-banner s-banner__info js-notice-banner" id="launch-banner-base" aria-hidden="true" role="alert" aria-labelledby="banner-message" data-controller="s-banner" data-s-banner-target="banner">
+<div class="s-banner s-banner__info js-notice-banner" id="launch-banner-base" aria-hidden="true" role="alert" aria-labelledby="banner-message" data-controller="s-banner" data-s-banner-target="banner">
     <div class="d-flex flex__center jc-space-between s-banner--container" role="alertdialog" aria-describedby="banner-message">
         <div class="d-flex g8" aria-label="banner message">
             <div class="flex--item">
@@ -35,7 +35,7 @@
             </button>
         </div>
     </div>
-</aside>
+</div>
 
 <section class="stacks-section">
     <p class="stacks-copy">System banners are used for <strong>system</strong> messaging. They are full-width notices placed in one of two locations:</p>
@@ -219,8 +219,8 @@
     {% header "h3", "Info" %}
     <div class="stacks-preview">
 {% highlight html %}
-<aside class="s-banner s-banner__info" role="alert" aria-hidden="false">…</aside>
-<aside class="s-banner s-banner__info s-banner__important" role="alert" aria-hidden="false">…</aside>
+<div class="s-banner s-banner__info" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__info s-banner__important" role="alert" aria-hidden="false">…</div>
 {% endhighlight %}
         <div class="stacks-preview--example ps-relative">
             {% bannerExample "info" %}
@@ -231,8 +231,8 @@
     {% header "h3", "Success" %}
     <div class="stacks-preview">
 {% highlight html %}
-<aside class="s-banner s-banner__success" role="alert" aria-hidden="false">…</aside>
-<aside class="s-banner s-banner__success s-banner__important" role="alert" aria-hidden="false">…</aside>
+<div class="s-banner s-banner__success" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__success s-banner__important" role="alert" aria-hidden="false">…</div>
 {% endhighlight %}
             <div class="stacks-preview--example ps-relative">
                 {% bannerExample "success" %}
@@ -243,8 +243,8 @@
     {% header "h3", "Warning" %}
     <div class="stacks-preview">
 {% highlight html %}
-<aside class="s-banner s-banner__warning" role="alert" aria-hidden="false">…</aside>
-<aside class="s-banner s-banner__warning s-banner__important" role="alert" aria-hidden="false">…</aside>
+<div class="s-banner s-banner__warning" role="alert" aria-hidden="false">…</div>
+<div class="s-banner s-banner__warning s-banner__important" role="alert" aria-hidden="false">…</div>
 {% endhighlight %}
             <div class="stacks-preview--example ps-relative">
                 {% bannerExample "warning" %}
@@ -255,8 +255,8 @@
         {% header "h3", "Danger" %}
         <div class="stacks-preview">
     {% highlight html %}
-    <aside class="s-banner s-banner__danger" role="alert" aria-hidden="false">…</aside>
-    <aside class="s-banner s-banner__danger s-banner__important" role="alert" aria-hidden="false">…</aside>
+    <div class="s-banner s-banner__danger" role="alert" aria-hidden="false">…</div>
+    <div class="s-banner s-banner__danger s-banner__important" role="alert" aria-hidden="false">…</div>
     {% endhighlight %}
                 <div class="stacks-preview--example ps-relative">
                     {% bannerExample "danger" %}
@@ -267,7 +267,7 @@
     {% header "h2", "JavaScript Example" %}
     <div class="stacks-preview _preview-none">
 {% highlight html %}
-<aside
+<div
     role="alert"
     id="example-banner"
     class="s-banner"
@@ -276,7 +276,7 @@
     data-controller="s-banner"
     data-s-banner-target="banner">
     Example banner
-</aside>
+</div>
 …
 <button
     data-toggle="s-banner"

lib/components/banner/banner.a11y.test.ts

@@ -0,0 +1,37 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const bannerChild = `
+    <div
+        class="d-flex flex__center jc-space-between s-banner--container"
+        role="alertdialog"
+        aria-labelledby="banner-title"
+        aria-describedby="banner-description"
+    >
+        <div aria-label="banner message">
+            <h2 id="banner-title">Banner heading</h2>
+            <p id="banner-description">Banner description</p>
+        </div>
+        <div class="ml-auto myn8">
+            <span class="s-btn s-banner--btn">Close</span>
+        </div>
+    </div>
+`;
+
+describe("banner", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-banner",
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        attributes: {
+            role: "alert",
+            ariaHidden: "false",
+        },
+        children: {
+            default: bannerChild,
+        },
+    });
+});

lib/components/banner/banner.visual.test.ts

@@ -5,10 +5,12 @@ const bannerChild = `
     <div
         class="d-flex flex__center jc-space-between s-banner--container"
         role="alertdialog"
-        aria-describedby="banner-message"
+        aria-labelledby="banner-title"
+        aria-describedby="banner-description"
     >
         <div aria-label="banner message">
-            Test Banner
+            <h2 id="banner-title">Banner heading</h2>
+            <p id="banner-description">Banner description</p>
         </div>
         <div class="ml-auto myn8">
             <span class="s-btn s-banner--btn">Close</span>
@@ -31,6 +33,5 @@ describe("banner", () => {
         children: {
             default: bannerChild,
         },
-        tag: "aside",
     });
 });