Bug 1600752 - changes based on feedback

mozilla · Dec 11, 2019 · 5ef6cf5 · 5ef6cf5
1 parent f37121b
commit 5ef6cf5
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 34 deletions.
diff --git a/ui/perfherder/ProgressBar.jsx b/ui/perfherder/ProgressBar.jsx
@@ -7,21 +7,26 @@ import SimpleTooltip from '../shared/SimpleTooltip';
 const ProgressBar = ({ magnitude, regression, color }) => (
   <SimpleTooltip
     text={
-      <Progress multi aria-label="Magnitude of Difference">
+      <Progress
+        multi
+        aria-label={`Magnitude of difference based on lower is better. Metric: ${
+          regression ? 100 - magnitude : magnitude
+        } % regressed`}
+      >
         {/* the % of the bars that are colored and transparent is based on the newIsBetter metric,
         which determines whether the colored bar for magnitude is displayed on the left or right */}
-        <span className="sr-only sr-only-focusable">Magnitude 1</span>
-        <Progress
-          bar
-          value={regression ? 100 - magnitude : magnitude}
-          color={regression ? 'transparent' : color}
-        />
-        <span className="sr-only sr-only-focusable">Magnitude 2</span>
-        <Progress
-          bar
-          value={regression ? magnitude : 100 - magnitude}
-          color={regression ? color : 'transparent'}
-        />
+        <div aria-hidden="true" className="progress w-100">
+          <Progress
+            bar
+            value={regression ? 100 - magnitude : magnitude}
+            color={regression ? 'transparent' : color}
+          />
+          <Progress
+            bar
+            value={regression ? magnitude : 100 - magnitude}
+            color={regression ? color : 'transparent'}
+          />
+        </div>
       </Progress>
     }
     tooltipText="Relative magnitude of change (scale from 0 - 20%+)"

diff --git a/ui/perfherder/alerts/AlertTable.jsx b/ui/perfherder/alerts/AlertTable.jsx
@@ -248,15 +248,15 @@ export default class AlertTable extends React.Component {
                   </tr>
                 </thead>
                 <tbody>
-                  <tr>
-                    <th>&nbsp;</th>
-                    <th>&nbsp;</th>
-                    <th>Alert Name</th>
-                    <th>&nbsp;</th>
-                    <th>&nbsp;</th>
-                    <th>&nbsp;</th>
-                    <th>Detail Hint</th>
-                    <th>Magnitude</th>
+                  <tr className="border">
+                    <th> </th>
+                    <th> </th>
+                    <th>Test and platform</th>
+                    <th>Previous Value</th>
+                    <th> </th>
+                    <th>New Value</th>
+                    <th>Absolute Difference</th>
+                    <th>Magnitude of Change</th>
                     <th>Confidence</th>
                   </tr>
                   {filteredAlerts.map(alert => (

diff --git a/ui/perfherder/alerts/AlertTableRow.jsx b/ui/perfherder/alerts/AlertTableRow.jsx
@@ -208,13 +208,9 @@ export default class AlertTableRow extends React.Component {
       >
         <td className="table-width-xs px-1">
           <FormGroup check className="ml-2 pl-4">
-            <Label for={alert.id} hidden>
-              alert {alert.id} title
-            </Label>
+            <Label hidden>alert {alert.id} title</Label>
             <Input
-              id={alert.id}
               aria-label={`alert ${alert.id} title`}
-              aria-labelledby={`alert ${alert.id} title`}
               data-testid={`alert ${alert.id} checkbox`}
               type="checkbox"
               disabled={!user.isStaff}
@@ -230,6 +226,11 @@ export default class AlertTableRow extends React.Component {
         </td>
         <td className="px-0">
           <button
+            aria-label={
+              starred
+                ? 'Remove bookmark from this Alert'
+                : 'Bookmark this Alert'
+            }
             type="button"
             className={
               starred

diff --git a/ui/perfherder/compare/CompareTable.jsx b/ui/perfherder/compare/CompareTable.jsx
@@ -112,7 +112,8 @@ export default class CompareTable extends React.PureComponent {
                   onClick={() =>
                     onPermalinkClick(this.getHashBasedId(testName))
                   }
-                  title={`Permalink to this test table: ${testName}`}
+                  title="Permalink to this test table"
+                  aria-label={`Permalink to test ${testName} table`}
                 >
                   <FontAwesomeIcon icon={faHashtag} />
                 </Button>
@@ -123,7 +124,6 @@ export default class CompareTable extends React.PureComponent {
             <th className="table-width-sm" />
             <th className="table-width-lg">New</th>
             <th className="table-width-lg">Delta</th>
-            {/* empty for progress bars (magnitude of difference) */}
             <th className="table-width-lg">Magnitude of Difference</th>
             <th className="table-width-lg">Confidence</th>
             <th className="text-right table-width-md">
@@ -164,7 +164,8 @@ export default class CompareTable extends React.PureComponent {
                             this.getHashBasedId(testName, rowLevelResults.name),
                           )
                         }
-                        title={`Permalink to this test: ${rowLevelResults.name}`}
+                        title="Permalink to this test"
+                        aria-label={`Permalink to test ${rowLevelResults.name}`}
                       >
                         <FontAwesomeIcon icon={faHashtag} />
                       </Button>

diff --git a/ui/shared/TruncatedText.jsx b/ui/shared/TruncatedText.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -22,12 +20,13 @@ export default class TruncatedText extends React.Component {
           {text}
         </p>
         {text.length > maxLength && (
-          <p
+          <button
+            type="button"
             className={`${showMoreClass} mb-0 text-right  pointer`}
             onClick={() => this.setState({ showMoreResults: !showMoreResults })}
           >
             {`show ${showMoreResults ? 'less' : 'more'}`}
-          </p>
+          </button>
         )}
       </React.Fragment>
     );