Update a11y of ButtonGroup component (#15765)

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;
           }}

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,
 };

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>

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>,

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>"`;

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>