add aria-label for axe issues

openshift · Jul 26, 2021 · a33aa8f · a33aa8f
1 parent 2031e8b
commit a33aa8f
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 56 deletions.
diff --git a/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json b/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
@@ -301,6 +301,7 @@
   "Other": "Other",
   "All other capacity usage that are not a part of the top 5 consumers.": "All other capacity usage that are not a part of the top 5 consumers.",
   "Available": "Available",
+  "Breakdown Chart": "Breakdown Chart",
   "Warning": "Warning",
   "Raw capacity": "Raw capacity",
   "Used": "Used",
@@ -351,6 +352,7 @@
   "Total Physical Used Capacity {{physicalcapacity}}": "Total Physical Used Capacity {{physicalcapacity}}",
   "Shows an overview of the data consumption per provider or account collected from the day of the entity creation.": "Shows an overview of the data consumption per provider or account collected from the day of the entity creation.",
   "(in {{suffixLabel}})": "(in {{suffixLabel}})",
+  "Data Consumption Graph": "Data Consumption Graph",
   "GET {{GETLatestValue}}": "GET {{GETLatestValue}}",
   "PUT {{PUTLatestValue}}": "PUT {{PUTLatestValue}}",
   "Service Name": "Service Name",

diff --git a/...ph-storage-plugin/src/components/dashboards/common/capacity-breakdown/breakdown-chart.tsx b/...ph-storage-plugin/src/components/dashboards/common/capacity-breakdown/breakdown-chart.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import {
   Chart,
@@ -60,63 +61,67 @@ export const BreakdownChart: React.FC<BreakdownChartProps> = ({
   metricModel,
   ocsVersion,
   labelPadding,
-}) => (
-  <>
-    <Chart
-      legendPosition="bottom-left"
-      legendComponent={
-        <ChartLegend
-          themeColor={ChartThemeColor.multiOrdered}
-          data={legends}
-          y={40}
-          labelComponent={<LinkableLegend metricModel={metricModel} ocsVersion={ocsVersion} />}
-          orientation="horizontal"
-          symbolSpacer={7}
-          gutter={10}
-          height={50}
-          style={{
-            labels: Object.assign(
-              { fontSize: 10 },
-              labelPadding
-                ? {
-                    paddingRight: labelPadding.right,
-                    paddingTop: labelPadding.top,
-                    paddingBottom: labelPadding.bottom,
-                    paddingLeft: labelPadding.left,
-                  }
-                : {},
-            ),
-          }}
-        />
-      }
-      height={60}
-      padding={{
-        bottom: 35,
-        top: 0,
-        right: 0,
-        left: 0,
-      }}
-    >
-      <ChartAxis
-        style={{ axis: { stroke: 'none' }, ticks: { stroke: 'none' } }}
-        tickFormat={() => ''}
-      />
-      <ChartStack horizontal>
-        {data.map((d: StackDataPoint, index) => (
-          <ChartBar
-            key={d.id}
-            style={{ data: { stroke: 'white', strokeWidth: 0.7, fill: d.fill } }}
-            cornerRadius={getBarRadius(index, data.length)}
-            barWidth={12}
-            padding={0}
-            data={[d]}
-            labelComponent={<ChartTooltip dx={0} style={{ fontSize: 8, padding: 5 }} />}
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Chart
+        ariaTitle={t('ceph-storage-plugin~Breakdown Chart')}
+        legendPosition="bottom-left"
+        legendComponent={
+          <ChartLegend
+            themeColor={ChartThemeColor.multiOrdered}
+            data={legends}
+            y={40}
+            labelComponent={<LinkableLegend metricModel={metricModel} ocsVersion={ocsVersion} />}
+            orientation="horizontal"
+            symbolSpacer={7}
+            gutter={10}
+            height={50}
+            style={{
+              labels: Object.assign(
+                { fontSize: 10 },
+                labelPadding
+                  ? {
+                      paddingRight: labelPadding.right,
+                      paddingTop: labelPadding.top,
+                      paddingBottom: labelPadding.bottom,
+                      paddingLeft: labelPadding.left,
+                    }
+                  : {},
+              ),
+            }}
           />
-        ))}
-      </ChartStack>
-    </Chart>
-  </>
-);
+        }
+        height={60}
+        padding={{
+          bottom: 35,
+          top: 0,
+          right: 0,
+          left: 0,
+        }}
+      >
+        <ChartAxis
+          style={{ axis: { stroke: 'none' }, ticks: { stroke: 'none' } }}
+          tickFormat={() => ''}
+        />
+        <ChartStack horizontal>
+          {data.map((d: StackDataPoint, index) => (
+            <ChartBar
+              key={d.id}
+              style={{ data: { stroke: 'white', strokeWidth: 0.7, fill: d.fill } }}
+              cornerRadius={getBarRadius(index, data.length)}
+              barWidth={12}
+              padding={0}
+              data={[d]}
+              labelComponent={<ChartTooltip dx={0} style={{ fontSize: 8, padding: 5 }} />}
+            />
+          ))}
+        </ChartStack>
+      </Chart>
+    </>
+  );
+};
 
 export type BreakdownChartProps = {
   data: StackDataPoint[];

diff --git a/...onents/dashboards/object-service/data-consumption-card/data-consumption-card-dropdown.tsx b/...onents/dashboards/object-service/data-consumption-card/data-consumption-card-dropdown.tsx
@@ -142,6 +142,7 @@ export const DataConsumptionDropdown: React.FC<DataConsumptionDropdownProps> = (
           placeholderText={t('ceph-storage-plugin~Type: {{selectedService}}', {
             selectedService,
           })}
+          aria-label={t('ceph-storage-plugin~Break By Dropdown')}
           isCheckboxSelectionBadgeHidden
         >
           {serviceDropdownItems}

diff --git a/...src/components/dashboards/object-service/data-consumption-card/data-consumption-graph.tsx b/...src/components/dashboards/object-service/data-consumption-card/data-consumption-graph.tsx
@@ -84,6 +84,7 @@ const DataConsumptionGraph: React.FC<DataConsumptionGraphProps> = ({
           {`${CHART_LABELS(metric, t)} ${suffixLabel}`}
         </div>
         <Chart
+          ariaTitle={t('ceph-storage-plugin~Data Consumption Graph')}
           containerComponent={
             <ChartVoronoiContainer
               labelComponent={<ChartTooltip style={{ fontSize: 8, paddingBottom: 0 }} />}