SONAR-16760 [891634] ARIA hidden element must not be focusable or contain focusable elements

3 files changed, 139 insertions, 120 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx
index 4176dfe0151..4868a496edc 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx
@@ -29,7 +29,8 @@ import {
 import ActivityLink from '../../../components/common/ActivityLink';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { parseDate } from '../../../helpers/dates';
-import { translate } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { localizeMetric } from '../../../helpers/measures';
 import { BranchLike } from '../../../types/branch-like';
 import { GraphType, MeasureHistory } from '../../../types/project-activity';
 import { Analysis as AnalysisType, Component, Metric } from '../../../types/types';
@@ -63,12 +64,8 @@ export function ActivityPanel(props: ActivityPanelProps) {
     metrics
   } = props;
 
-  const series = generateSeries(
-    measuresHistory,
-    graph,
-    metrics,
-    getDisplayedHistoryMetrics(graph, [])
-  );
+  const displayedMetrics = getDisplayedHistoryMetrics(graph, []);
+  const series = generateSeries(measuresHistory, graph, metrics, displayedMetrics);
   const graphs = splitSeriesInGraphs(series, MAX_GRAPH_NB, MAX_SERIES_PER_GRAPH);
   let shownLeakPeriodDate;
   if (leakPeriodDate !== undefined) {
@@ -93,17 +90,25 @@ export function ActivityPanel(props: ActivityPanelProps) {
       <div className="overview-panel-content">
         <div className="display-flex-row">
           <div className="display-flex-column flex-1">
-            <div aria-hidden={true} className="overview-panel-padded display-flex-column flex-1">
+            <div className="overview-panel-padded display-flex-column flex-1">
               <GraphsHeader graph={graph} metrics={metrics} updateGraph={props.onGraphChange} />
-              <GraphsHistory
-                analyses={[]}
-                graph={graph}
-                graphs={graphs}
-                leakPeriodDate={shownLeakPeriodDate}
-                loading={Boolean(loading)}
-                measuresHistory={measuresHistory}
-                series={series}
-              />
+              <div
+                aria-label={translateWithParameters(
+                  'overview.activity.graph_shows_data_for_x',
+                  displayedMetrics.map(metricKey => localizeMetric(metricKey)).join(', ')
+                )}>
+                <div aria-hidden={true}>
+                  <GraphsHistory
+                    analyses={[]}
+                    graph={graph}
+                    graphs={graphs}
+                    leakPeriodDate={shownLeakPeriodDate}
+                    loading={Boolean(loading)}
+                    measuresHistory={measuresHistory}
+                    series={series}
+                  />
+                </div>
+              </div>
             </div>
 
             <div className="overview-panel-padded bordered-top text-right">
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/ActivityPanel-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/ActivityPanel-test.tsx.snap
index 27481596a33..0dde391a2ce 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/ActivityPanel-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/ActivityPanel-test.tsx.snap
@@ -20,7 +20,6 @@ exports[`should render correctly 1`] = `
         className="display-flex-column flex-1"
       >
         <div
-          aria-hidden={true}
           className="overview-panel-padded display-flex-column flex-1"
         >
           <GraphsHeader
@@ -37,63 +36,71 @@ exports[`should render correctly 1`] = `
             }
             updateGraph={[MockFunction]}
           />
-          <GraphsHistory
-            analyses={Array []}
-            graph="issues"
-            graphs={
-              Array [
-                Array [
-                  Object {
-                    "data": Array [
+          <div
+            aria-label="overview.activity.graph_shows_data_for_x.metric.bugs.name, metric.code_smells.name, metric.vulnerabilities.name"
+          >
+            <div
+              aria-hidden={true}
+            >
+              <GraphsHistory
+                analyses={Array []}
+                graph="issues"
+                graphs={
+                  Array [
+                    Array [
                       Object {
-                        "x": 2016-10-27T14:33:50.000Z,
-                        "y": 20,
+                        "data": Array [
+                          Object {
+                            "x": 2016-10-27T14:33:50.000Z,
+                            "y": 20,
+                          },
+                        ],
+                        "name": "bugs",
+                        "translatedName": "Bugs",
+                        "type": "PERCENT",
                       },
                     ],
-                    "name": "bugs",
-                    "translatedName": "Bugs",
-                    "type": "PERCENT",
-                  },
-                ],
-              ]
-            }
-            loading={false}
-            measuresHistory={
-              Array [
-                Object {
-                  "bestValue": true,
-                  "history": Array [
+                  ]
+                }
+                loading={false}
+                measuresHistory={
+                  Array [
                     Object {
-                      "date": 2016-10-27T14:33:50.000Z,
-                      "value": "20",
+                      "bestValue": true,
+                      "history": Array [
+                        Object {
+                          "date": 2016-10-27T14:33:50.000Z,
+                          "value": "20",
+                        },
+                      ],
+                      "metric": "bugs",
+                      "period": Object {
+                        "bestValue": true,
+                        "index": 1,
+                        "value": "1.0",
+                      },
+                      "value": "1.0",
                     },
-                  ],
-                  "metric": "bugs",
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-              ]
-            }
-            series={
-              Array [
-                Object {
-                  "data": Array [
+                  ]
+                }
+                series={
+                  Array [
                     Object {
-                      "x": 2016-10-27T14:33:50.000Z,
-                      "y": 20,
+                      "data": Array [
+                        Object {
+                          "x": 2016-10-27T14:33:50.000Z,
+                          "y": 20,
+                        },
+                      ],
+                      "name": "bugs",
+                      "translatedName": "Bugs",
+                      "type": "PERCENT",
                     },
-                  ],
-                  "name": "bugs",
-                  "translatedName": "Bugs",
-                  "type": "PERCENT",
-                },
-              ]
-            }
-          />
+                  ]
+                }
+              />
+            </div>
+          </div>
         </div>
         <div
           className="overview-panel-padded bordered-top text-right"
@@ -189,7 +196,6 @@ exports[`should render correctly 2`] = `
         className="display-flex-column flex-1"
       >
         <div
-          aria-hidden={true}
           className="overview-panel-padded display-flex-column flex-1"
         >
           <GraphsHeader
@@ -206,63 +212,71 @@ exports[`should render correctly 2`] = `
             }
             updateGraph={[MockFunction]}
           />
-          <GraphsHistory
-            analyses={Array []}
-            graph="issues"
-            graphs={
-              Array [
-                Array [
-                  Object {
-                    "data": Array [
+          <div
+            aria-label="overview.activity.graph_shows_data_for_x.metric.bugs.name, metric.code_smells.name, metric.vulnerabilities.name"
+          >
+            <div
+              aria-hidden={true}
+            >
+              <GraphsHistory
+                analyses={Array []}
+                graph="issues"
+                graphs={
+                  Array [
+                    Array [
                       Object {
-                        "x": 2016-10-27T14:33:50.000Z,
-                        "y": 20,
+                        "data": Array [
+                          Object {
+                            "x": 2016-10-27T14:33:50.000Z,
+                            "y": 20,
+                          },
+                        ],
+                        "name": "bugs",
+                        "translatedName": "Bugs",
+                        "type": "PERCENT",
                       },
                     ],
-                    "name": "bugs",
-                    "translatedName": "Bugs",
-                    "type": "PERCENT",
-                  },
-                ],
-              ]
-            }
-            loading={true}
-            measuresHistory={
-              Array [
-                Object {
-                  "bestValue": true,
-                  "history": Array [
+                  ]
+                }
+                loading={true}
+                measuresHistory={
+                  Array [
                     Object {
-                      "date": 2016-10-27T14:33:50.000Z,
-                      "value": "20",
+                      "bestValue": true,
+                      "history": Array [
+                        Object {
+                          "date": 2016-10-27T14:33:50.000Z,
+                          "value": "20",
+                        },
+                      ],
+                      "metric": "bugs",
+                      "period": Object {
+                        "bestValue": true,
+                        "index": 1,
+                        "value": "1.0",
+                      },
+                      "value": "1.0",
                     },
-                  ],
-                  "metric": "bugs",
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-              ]
-            }
-            series={
-              Array [
-                Object {
-                  "data": Array [
+                  ]
+                }
+                series={
+                  Array [
                     Object {
-                      "x": 2016-10-27T14:33:50.000Z,
-                      "y": 20,
+                      "data": Array [
+                        Object {
+                          "x": 2016-10-27T14:33:50.000Z,
+                          "y": 20,
+                        },
+                      ],
+                      "name": "bugs",
+                      "translatedName": "Bugs",
+                      "type": "PERCENT",
                     },
-                  ],
-                  "name": "bugs",
-                  "translatedName": "Bugs",
-                  "type": "PERCENT",
-                },
-              ]
-            }
-          />
+                  ]
+                }
+              />
+            </div>
+          </div>
         </div>
         <div
           className="overview-panel-padded bordered-top text-right"
diff --git a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
index 0c70cc0c566..8ca8287e6ce 100644
--- a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
@@ -30,7 +30,7 @@ interface Props {
 export default function ChartLegendIcon({ index, ...iconProps }: Props) {
   const COLORS = [colors.blue, colors.darkBlue, '#24c6e0'];
   return (
-    <Icon {...iconProps}>
+    <Icon {...iconProps} aria-hidden={true}>
       <path
         d="M14.325 7.143v1.714q0 0.357-0.25 0.607t-0.607 0.25h-10.857q-0.357 0-0.607-0.25t-0.25-0.607v-1.714q0-0.357 0.25-0.607t0.607-0.25h10.857q0.357 0 0.607 0.25t0.25 0.607z"
         style={{ fill: COLORS[index] || COLORS[0] }}