From 0295dbeabfd0865ca293d64e497cc86076ef5fc3 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Wed, 15 Dec 2021 12:52:33 +0000
Subject: [PATCH] Update a11y of ButtonGroup component (#15765)

---
 .../CommentSubscription/CommentSubscription.jsx      |  1 +
 app/javascript/crayons/ButtonGroup/ButtonGroup.jsx   | 12 ++++++++++--
 .../ButtonGroup/__stories__/ButtonGroup.stories.jsx  |  4 ++--
 .../ButtonGroup/__tests__/ButtonGroup.test.jsx       |  4 ++--
 .../__snapshots__/ButtonGroup.test.jsx.snap          |  2 +-
 app/views/articles/_full_comment_area.html.erb       |  2 +-
 6 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/javascript/CommentSubscription/CommentSubscription.jsx b/app/javascript/CommentSubscription/CommentSubscription.jsx
index b7969b333..3d799137f 100644
--- a/app/javascript/CommentSubscription/CommentSubscription.jsx
+++ b/app/javascript/CommentSubscription/CommentSubscription.jsx
@@ -70,6 +70,7 @@ export class CommentSubscription extends Component {
     return (
       <div className={positionType}>
         <ButtonGroup
+          labelText="Comment subscription options"
           ref={(element) => {
             this.buttonGroupElement = element;
           }}
diff --git a/app/javascript/crayons/ButtonGroup/ButtonGroup.jsx b/app/javascript/crayons/ButtonGroup/ButtonGroup.jsx
index 311e27a4f..c0dda0605 100644
--- a/app/javascript/crayons/ButtonGroup/ButtonGroup.jsx
+++ b/app/javascript/crayons/ButtonGroup/ButtonGroup.jsx
@@ -1,8 +1,15 @@
 import { h } from 'preact';
+import PropTypes from 'prop-types';
 import { defaultChildrenPropTypes } from '../../common-prop-types/default-children-prop-types';
 
-export const ButtonGroup = ({ children }) => (
-  <div role="presentation" className="crayons-btn-group">
+/**
+ * Used to group related buttons together
+ *
+ * @param {string} labelText Used to form the aria-label providing to assistive technologies to describe the control
+ * @param {HTMLElement[]} children The buttons rendered inside the group
+ */
+export const ButtonGroup = ({ children, labelText }) => (
+  <div role="group" aria-label={labelText} className="crayons-btn-group">
     {children}
   </div>
 );
@@ -11,4 +18,5 @@ ButtonGroup.displayName = 'ButtonGroup';
 
 ButtonGroup.propTypes = {
   children: defaultChildrenPropTypes,
+  labelText: PropTypes.string.isRequired,
 };
diff --git a/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx b/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx
index 78798a67f..d718317f8 100644
--- a/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx
+++ b/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx
@@ -9,7 +9,7 @@ export default {
 
 export const Default = () => {
   return (
-    <ButtonGroup>
+    <ButtonGroup labelText="Example group of buttons">
       <Button variant="outlined">Action 1</Button>
       <Button variant="outlined">Action 2</Button>
     </ButtonGroup>
@@ -33,7 +33,7 @@ export const TextIcon = () => {
   );
 
   return (
-    <ButtonGroup>
+    <ButtonGroup labelText="Example group of buttons including an icon">
       <Button variant="secondary">Action 1</Button>
       <Button variant="secondary" icon={Icon} contentType="icon" />
     </ButtonGroup>
diff --git a/app/javascript/crayons/ButtonGroup/__tests__/ButtonGroup.test.jsx b/app/javascript/crayons/ButtonGroup/__tests__/ButtonGroup.test.jsx
index 387eeb7b4..90aa2a107 100644
--- a/app/javascript/crayons/ButtonGroup/__tests__/ButtonGroup.test.jsx
+++ b/app/javascript/crayons/ButtonGroup/__tests__/ButtonGroup.test.jsx
@@ -17,7 +17,7 @@ describe('<ButtonGroup /> component', () => {
 
   it('should have no a11y violations when rendered', async () => {
     const { container } = render(
-      <ButtonGroup>
+      <ButtonGroup labelText="Test button group">
         <Button>Hello World!</Button>
         <Button variant="secondary">Hello again!</Button>
       </ButtonGroup>,
@@ -29,7 +29,7 @@ describe('<ButtonGroup /> component', () => {
 
   it('should render', () => {
     const { container } = render(
-      <ButtonGroup>
+      <ButtonGroup labelText="Test button group">
         <Button>Hello World!</Button>
         <Button icon={Icon} />
       </ButtonGroup>,
diff --git a/app/javascript/crayons/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.jsx.snap b/app/javascript/crayons/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.jsx.snap
index 6d0947161..739297bcc 100644
--- a/app/javascript/crayons/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.jsx.snap
+++ b/app/javascript/crayons/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.jsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ButtonGroup /> component should render 1`] = `"<div role=\\"presentation\\" class=\\"crayons-btn-group\\"><button class=\\"crayons-btn\\" type=\\"button\\">Hello World!</button><button class=\\"crayons-btn\\" type=\\"button\\"></button></div>"`;
+exports[`<ButtonGroup /> component should render 1`] = `"<div role=\\"group\\" aria-label=\\"Test button group\\" class=\\"crayons-btn-group\\"><button class=\\"crayons-btn\\" type=\\"button\\">Hello World!</button><button class=\\"crayons-btn\\" type=\\"button\\"></button></div>"`;
diff --git a/app/views/articles/_full_comment_area.html.erb b/app/views/articles/_full_comment_area.html.erb
index 75f719498..6c3b1efc6 100644
--- a/app/views/articles/_full_comment_area.html.erb
+++ b/app/views/articles/_full_comment_area.html.erb
@@ -7,7 +7,7 @@
                 num: tag.span(t("views.articles.comments.num", num: @article.comments_count), class: "js-comments-count", data: { comments_count: @article.comments_count })) %>
         </h2>
         <div id="comment-subscription" class="print-hidden">
-          <div role="presentation" class="crayons-btn-group">
+          <div class="crayons-btn-group">
             <span class="crayons-btn crayons-btn--outlined"><%= t("views.articles.comments.subscribe") %></span>
           </div>
         </div>