fix aria markup for eslint-plugin-jsx-a11y upgrade to 6.10.2

mozilla · Dec 11, 2024 · 3601deb · 3601deb
1 parent 4c8662f
commit 3601deb
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 13 deletions.
diff --git a/ui/job-view/headerbars/ReposMenu.jsx b/ui/job-view/headerbars/ReposMenu.jsx
@@ -49,7 +49,11 @@ export default function ReposMenu(props) {
   }));
 
   return (
-    <UncontrolledDropdown>
+    <UncontrolledDropdown
+      aria-controls="repo-dropdown"
+      aria-expanded="false"
+      aria-haspopup="menu"
+    >
       <DropdownToggle
         id="repoLabel"
         className="btn-view-nav nav-menu-btn"
@@ -63,8 +67,6 @@ export default function ReposMenu(props) {
           className="checkbox-dropdown-menu row"
           role="menu"
           aria-labelledby="repoLabel"
-          aria-haspopup="true"
-          aria-expanded="false"
         >
           {groupedRepos.map((group) => (
             <DropdownItem

diff --git a/ui/perfherder/alerts/AlertTable.jsx b/ui/perfherder/alerts/AlertTable.jsx
@@ -372,8 +372,8 @@ export default class AlertTable extends React.Component {
               <Table className="compare-table mb-0">
                 <tbody>
                   <tr className="border subtest-header">
-                    <th> </th>
-                    <th> </th>
+                    <th aria-label="Select alerts"> </th>
+                    <th aria-label="Star alert or open graph"> </th>
                     <th className="align-bottom">
                       <TableColumnHeader
                         column={tableConfig.Test}

diff --git a/ui/perfherder/alerts/CollapsableRows.jsx b/ui/perfherder/alerts/CollapsableRows.jsx
@@ -48,18 +48,13 @@ export default class CollapsableRows extends React.Component {
           onClick={() => this.toggleRows()}
           data-testid={isOpen ? 'show-less-alerts' : 'show-more-alerts'}
         >
-          <td />
-          <td />
-          <td />
-          <td className="text-right" colSpan="2">
+          <td className="text-right" colSpan="5" id="moreLessAlerts-{alert.id}">
             <span className="cursor-pointer">
               <FontAwesomeIcon icon={isOpen ? faAngleUp : faAngleDown} />{' '}
               {isOpen ? 'Show less alerts' : 'Show more alerts'}
             </span>
           </td>
-          <td />
-          <td />
-          <td />
+          <td colSpan="3" aria-labelledby="moreLessAlerts-{alert.id}" />
         </tr>
         {isOpen && (
           <React.Fragment>

diff --git a/ui/perfherder/compare/TooltipGraph.jsx b/ui/perfherder/compare/TooltipGraph.jsx
@@ -73,7 +73,7 @@ export default class TooltipGraph extends React.Component {
               <td className="value-column text-white">
                 {abbreviatedNumber(minValue)}
               </td>
-              <td className="distribution-column">
+              <td className="distribution-column" aria-label="Distribution">
                 <canvas ref={this.canvasRef} width={190} height={30} />
               </td>
               <td className="value-column text-white">