Fix dashboard accessibility issues

Author: GilbertCherrie

app/javascript/components/dashboard-widgets/widget-chart/index.jsx

@@ -10,7 +10,7 @@ const WidgetChart = ({
     widget = DashboardWidget(data, id, title);
   } else {
     widget = (
-      <h1 id="empty-widget">
+      <h1 className="empty-widget">
         {__('No chart data found.')}
         {__(' If this widget is new or has just been added to your dashboard, the data is being generated and should be available soon.')}
       </h1>

app/javascript/components/dashboard-widgets/widget-error/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const WidgetError = ({ widgetId }) => (
   <div id={`dd_w${widgetId}_box`}>
-    <div id="error-widget">
+    <div className="error-widget">
       <p>{__('Error: Request for data failed.')}</p>
     </div>
   </div>

app/javascript/components/dashboard-widgets/widget-menu/index.jsx

@@ -25,7 +25,7 @@ const WidgetMenu = ({ widgetModel }) => {
     );
   } else {
     widget = (
-      <h1 id="empty-widget">
+      <h1 className="empty-widget">
         {__('No shortcuts are authorized for this user, contact your Administrator')}
       </h1>
     );

app/javascript/components/dashboard-widgets/widget-report/index.jsx

@@ -9,7 +9,7 @@ const WidgetReport = ({ widgetModel }) => {
     widget = (<div className="widget-report" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(widgetModel) }} />);
   } else {
     widget = (
-      <h1 id="empty-widget">
+      <h1 className="empty-widget">
         {__('No report data found.')}
         {__(' If this widget is new or has just been added to your dashboard, the data is being generated and should be available soon.')}
       </h1>

app/javascript/components/dashboard-widgets/widget-wrapper/index.jsx

@@ -9,7 +9,6 @@ const WidgetWrapper = ({
   widgetId, widgetType, widgetButtons, widgetLastRun, widgetNextRun, widgetTitle,
 }) => {
   const [{ widgetModel, isLoading, error }, setState] = useState({ isLoading: true, error: false });
-
   const widgetUrl = () => {
     const widgetTypeUrl = {
       menu: '/dashboard/widget_menu_data/',
@@ -86,12 +85,13 @@ const WidgetWrapper = ({
           <OverflowMenu
             className="widget-overflow-menu"
             id={`${widgetId}-menu`}
+            aria-labelledby={`widget-title-${widgetId}`}
             flipped
             onOpen={() => overflowMenuDirection(widgetId, widgetButtons)}
           >
             {getOverflowButtons(widgetButtons, widgetId, widgetType, widgetTitle, setState, widgetModel, widgetLastRun, widgetNextRun)}
           </OverflowMenu>
-          <div className="card-pf-title sortable-handle ui-sortable-handle" aria-label={`widget-title-${widgetId}`}>
+          <div className="card-pf-title sortable-handle ui-sortable-handle">
             <span id={`widget-title-${widgetId}`}>{widgetTitle}</span>
           </div>
         </div>

app/javascript/spec/widget-wrapper/__snapshots__/widget-wrapper.spec.js.snap

@@ -36,6 +36,7 @@ exports[`Widget wrapper component should render a widget wrapper with a chart 1`
           className="card-pf-heading-kebab"
         >
           <OverflowMenu
+            aria-labelledby="widget-title-1"
             ariaLabel="open and close list of options"
             className="widget-overflow-menu"
             direction="bottom"
@@ -66,6 +67,7 @@ exports[`Widget wrapper component should render a widget wrapper with a chart 1`
                 aria-expanded={false}
                 aria-haspopup={true}
                 aria-label="open and close list of options"
+                aria-labelledby="widget-title-1"
                 className="widget-overflow-menu bx--overflow-menu bx--overflow-menu--md"
                 id="1-menu"
                 onClick={[Function]}
@@ -125,7 +127,6 @@ exports[`Widget wrapper component should render a widget wrapper with a chart 1`
             </ClickListener>
           </OverflowMenu>
           <div
-            aria-label="widget-title-1"
             className="card-pf-title sortable-handle ui-sortable-handle"
           >
             <span
@@ -226,6 +227,7 @@ exports[`Widget wrapper component should render a widget wrapper with a menu 1`]
           className="card-pf-heading-kebab"
         >
           <OverflowMenu
+            aria-labelledby="widget-title-83"
             ariaLabel="open and close list of options"
             className="widget-overflow-menu"
             direction="bottom"
@@ -256,6 +258,7 @@ exports[`Widget wrapper component should render a widget wrapper with a menu 1`]
                 aria-expanded={false}
                 aria-haspopup={true}
                 aria-label="open and close list of options"
+                aria-labelledby="widget-title-83"
                 className="widget-overflow-menu bx--overflow-menu bx--overflow-menu--md"
                 id="83-menu"
                 onClick={[Function]}
@@ -315,7 +318,6 @@ exports[`Widget wrapper component should render a widget wrapper with a menu 1`]
             </ClickListener>
           </OverflowMenu>
           <div
-            aria-label="widget-title-83"
             className="card-pf-title sortable-handle ui-sortable-handle"
           >
             <span
@@ -416,6 +418,7 @@ exports[`Widget wrapper component should render a widget wrapper with a report 1
           className="card-pf-heading-kebab"
         >
           <OverflowMenu
+            aria-labelledby="widget-title-19"
             ariaLabel="open and close list of options"
             className="widget-overflow-menu"
             direction="bottom"
@@ -446,6 +449,7 @@ exports[`Widget wrapper component should render a widget wrapper with a report 1
                 aria-expanded={false}
                 aria-haspopup={true}
                 aria-label="open and close list of options"
+                aria-labelledby="widget-title-19"
                 className="widget-overflow-menu bx--overflow-menu bx--overflow-menu--md"
                 id="19-menu"
                 onClick={[Function]}
@@ -505,7 +509,6 @@ exports[`Widget wrapper component should render a widget wrapper with a report 1
             </ClickListener>
           </OverflowMenu>
           <div
-            aria-label="widget-title-19"
             className="card-pf-title sortable-handle ui-sortable-handle"
           >
             <span

app/stylesheet/widget.scss

@@ -22,13 +22,13 @@
   } 
 }
 
-#empty-widget {
+.empty-widget {
   font-size: 12px;
   font-weight: 500;
   padding-bottom: 20px;
 }
 
-#error-widget {
+.error-widget {
   font-size: 12px;
   font-weight: 500;
   padding-bottom: 20px;