From 832ca02389b0f4e7e4fac388a70346ddd8351dd0 Mon Sep 17 00:00:00 2001
From: Rob Levin <roblevintennis@gmail.com>
Date: Wed, 30 Sep 2020 09:05:39 -0700
Subject: [PATCH] Fix some last discovered misued button groups that were
 missing ariaLabel

---
 .../src/stories/ButtonGroup.stories.js        | 32 --------
 showcase/src/App.vue                          |  2 +-
 showcase/src/partials/Buttons.vue             | 76 +++++++++++--------
 3 files changed, 47 insertions(+), 63 deletions(-)

diff --git a/agnosticui-vue/src/stories/ButtonGroup.stories.js b/agnosticui-vue/src/stories/ButtonGroup.stories.js
index f719d47c4..e86be4c4b 100644
--- a/agnosticui-vue/src/stories/ButtonGroup.stories.js
+++ b/agnosticui-vue/src/stories/ButtonGroup.stories.js
@@ -67,35 +67,3 @@ All.parameters = {
 }
 
 
-/*
-export const ButtonGroupDefault = () => ({
-  components: { ButtonGroup, Button },
-  template: '<ButtonGroup><Button label="One" /><Button label="Two" /><Button label="Three" /></ButtonGroup>'
-});
-
-export const ButtonGroupPrimary = () => ({
-  components: { ButtonGroup, Button },
-  template: '<ButtonGroup><Button label="One" mode="primary" /><Button label="Two" mode="primary" /><Button label="Three" mode="primary" /></ButtonGroup>'
-});
-
-export const ButtonGroupPrimaryBordered = () => ({
-  components: { ButtonGroup, Button },
-  template: '<ButtonGroup><Button label="One" mode="primary" isBordered /><Button label="Two" mode="primary" isBordered /><Button label="Three" mode="primary" isBordered /></ButtonGroup>'
-});
-
-
-export const ButtonGroupSecondary = () => ({
-  components: { ButtonGroup, Button },
-  template: '<ButtonGroup><Button label="One" mode="secondary" /><Button label="Two" mode="secondary" /><Button label="Three" mode="secondary" /></ButtonGroup>'
-});
-
-export const ButtonGroupSecondaryBordered = () => ({
-  components: { ButtonGroup, Button },
-  template: '<ButtonGroup><Button label="One" mode="secondary" isBordered /><Button label="Two" mode="secondary" isBordered /><Button label="Three" mode="secondary" isBordered /></ButtonGroup>'
-});
-
-export const ButtonGroupSecondaryRaised = () => ({
-  components: { ButtonGroup, Button },
-  template: '<ButtonGroup><Button label="One" mode="secondary" isRaised /><Button label="Two" mode="secondary" isRaised /><Button label="Three" mode="secondary" isRaised /></ButtonGroup>'
-});
-*/
diff --git a/showcase/src/App.vue b/showcase/src/App.vue
index 50efd7c02..5a21e349c 100644
--- a/showcase/src/App.vue
+++ b/showcase/src/App.vue
@@ -15,7 +15,7 @@
           implementations.
         </h4>
         <div :class="$style.btnGroup">
-          <ButtonGroup>
+          <ButtonGroup ariaLabel="Theming examples group">
             <Button mode="primary" isRaised>Default</Button>
             <Button mode="primary" isBordered
               >Click to theme via CSS custom props</Button
diff --git a/showcase/src/partials/Buttons.vue b/showcase/src/partials/Buttons.vue
index 2dcac55d6..c3e24580b 100644
--- a/showcase/src/partials/Buttons.vue
+++ b/showcase/src/partials/Buttons.vue
@@ -8,34 +8,35 @@
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
-          <h3>Everyone knows buttons are the life of the party &#128378; &#127867;</h3>
+          <h3>
+            Everyone knows buttons are the life of the party &#128378; &#127867;
+          </h3>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <p>
-            Maybe you recognize some of these buttons—if so, it's because most of them originally
-            appeared in
-            <a
-              href="https://github.com/alexwolfe/Buttons"
-            >Sass Buttons</a>, a project I coauthored with my good friend
-            <a
-              href="https://twitter.com/alexwolfe"
-            >Alex Wolfe</a>.
+            Maybe you recognize some of these buttons—if so, it's because most
+            of them originally appeared in
+            <a href="https://github.com/alexwolfe/Buttons">Sass Buttons</a>, a
+            project I coauthored with my good friend
+            <a href="https://twitter.com/alexwolfe">Alex Wolfe</a>.
           </p>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <p>
-            If you're using the CSS AgnosticUI package, you can simply apply the global CSS classes
-            you see in the demo below. However, if you're using React, Svelte, or
-            Vue, you should utilize that framework's version of the Button component as it will provide
-            localized CSS via
-            <a
-              href="https://github.com/css-modules/css-modules"
-            >CSS Modules</a> (React, Vue) or
-            <a href="https://vuejs.org/v2/guide/single-file-components.html">SFC</a> styles (Svelte).
+            If you're using the CSS AgnosticUI package, you can simply apply the
+            global CSS classes you see in the demo below. However, if you're
+            using React, Svelte, or Vue, you should utilize that framework's
+            version of the Button component as it will provide localized CSS via
+            <a href="https://github.com/css-modules/css-modules">CSS Modules</a>
+            (React, Vue) or
+            <a href="https://vuejs.org/v2/guide/single-file-components.html"
+              >SFC</a
+            >
+            styles (Svelte).
           </p>
         </FlexCol>
       </FlexRow>
@@ -148,7 +149,7 @@ the disabled attribute. --&gt;
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
-          <p style="display: initial;">
+          <p style="display: initial">
             <Button size="small">Go</Button>
             <Button>Go</Button>
             <Button size="large">Go</Button>
@@ -195,7 +196,9 @@ the disabled attribute. --&gt;
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <p>
-            <Button :isSkinned="false">No skin button (if you want to style yourself)</Button>
+            <Button :isSkinned="false"
+              >No skin button (if you want to style yourself)</Button
+            >
             <Button isBlank>Blank button</Button>
           </p>
         </FlexCol>
@@ -215,7 +218,7 @@ the disabled attribute. --&gt;
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
-          <p style="display: flex;">
+          <p style="display: flex">
             <Button mode="primary" v-bind:isRounded="true">
               Call
               <svg
@@ -257,7 +260,8 @@ the disabled attribute. --&gt;
             0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
             5.06 14.08 4 12 4z"
                 />
-              </svg> Download
+              </svg>
+              Download
             </Button>
           </p>
         </FlexCol>
@@ -317,17 +321,17 @@ the disabled attribute. --&gt;
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <p>
-            <ButtonGroup>
+            <ButtonGroup ariaLabel="Button group (default) examples">
               <Button>One</Button>
               <Button>Two</Button>
               <Button>Three</Button>
             </ButtonGroup>
-            <ButtonGroup>
+            <ButtonGroup ariaLabel="Button group (border) examples">
               <Button isBordered>One</Button>
               <Button isBordered>Two</Button>
               <Button isBordered>Three</Button>
             </ButtonGroup>
-            <ButtonGroup>
+            <ButtonGroup ariaLabel="Button group (raised) examples">
               <Button isRaised>One</Button>
               <Button isRaised>Two</Button>
               <Button isRaised>Three</Button>
@@ -359,17 +363,23 @@ the disabled attribute. --&gt;
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <p>
-            <ButtonGroup>
+            <ButtonGroup
+              ariaLabel="Button group examples using primary buttons"
+            >
               <Button mode="primary">One</Button>
               <Button mode="primary">Two</Button>
               <Button mode="primary">Three</Button>
             </ButtonGroup>
-            <ButtonGroup>
+            <ButtonGroup
+              ariaLabel="Button group examples using primary and bordered buttons"
+            >
               <Button mode="primary" :isBordered="true">One</Button>
               <Button mode="primary" isBordered>Two</Button>
               <Button mode="primary" isBordered>Three</Button>
             </ButtonGroup>
-            <ButtonGroup>
+            <ButtonGroup
+              ariaLabel="Button group examples using primary and raised buttons"
+            >
               <Button mode="primary" :isRaised="true">One</Button>
               <Button mode="primary" :isRaised="true">Two</Button>
               <Button mode="primary" isRaised>Three</Button>
@@ -401,17 +411,23 @@ the disabled attribute. --&gt;
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <p>
-            <ButtonGroup>
+            <ButtonGroup
+              ariaLabel="Button group examples using secondary buttons"
+            >
               <Button mode="secondary">One</Button>
               <Button mode="secondary">Two</Button>
               <Button mode="secondary">Three</Button>
             </ButtonGroup>
-            <ButtonGroup>
+            <ButtonGroup
+              ariaLabel="Button group examples using secondary and bordered buttons"
+            >
               <Button mode="secondary" :isBordered="true">One</Button>
               <Button mode="secondary" isBordered>Two</Button>
               <Button mode="secondary" isBordered>Three</Button>
             </ButtonGroup>
-            <ButtonGroup>
+            <ButtonGroup
+              ariaLabel="Button group examples using secondary and raised buttons"
+            >
               <Button mode="secondary" :isRaised="true">One</Button>
               <Button mode="secondary" :isRaised="true">Two</Button>
               <Button mode="secondary" isRaised>Three</Button>