Bug 1603251 - Improve expand/collapse component for screen reader users (#5753)

ui/push-health/ClassificationGroup.jsx

@@ -72,7 +72,9 @@ class ClassificationGroup extends React.PureComponent {
       currentRepo,
     } = this.props;
     const expandIcon = detailsShowing ? faMinusSquare : faPlusSquare;
-    const expandTitle = detailsShowing ? 'Minus sign' : 'Plus sign';
+    const expandTitle = detailsShowing
+      ? 'Click to collapse'
+      : 'Click to expand';
 
     return (
       <Row className={`justify-content-between ${className}`}>
@@ -89,6 +91,7 @@ class ClassificationGroup extends React.PureComponent {
               icon={expandIcon}
               className="ml-1"
               title={expandTitle}
+              aria-label={expandTitle}
             />
           </Badge>
         </h4>

ui/push-health/Metric.jsx

@@ -29,7 +29,9 @@ export default class Metric extends React.PureComponent {
     const { result, name, children } = this.props;
     const resultColor = resultColorMap[result];
     const expandIcon = detailsShowing ? faMinusSquare : faPlusSquare;
-    const expandTitle = detailsShowing ? 'Minus sign' : 'Plus sign';
+    const expandTitle = detailsShowing
+      ? 'Click to collapse'
+      : 'Click to expand';
 
     return (
       <td>
@@ -47,7 +49,11 @@ export default class Metric extends React.PureComponent {
                   {name}
                 </span>
                 <span className="btn">
-                  <FontAwesomeIcon icon={expandIcon} title={expandTitle} />
+                  <FontAwesomeIcon
+                    icon={expandIcon}
+                    title={expandTitle}
+                    aria-label={expandTitle}
+                  />
                 </span>
               </Button>
               <span>