Cypress 6: disabled a11y 'list' rule. Fixed aria labels & titles

openshift · Jan 6, 2021 · ed3f4ca · ed3f4ca
1 parent 4169748
commit ed3f4ca
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 3 deletions.
diff --git a/...end/packages/console-shared/src/components/dashboard/utilization-card/UtilizationBody.tsx b/...end/packages/console-shared/src/components/dashboard/utilization-card/UtilizationBody.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartAxis } from '@patternfly/react-charts';
+import { ChartAxis, ChartContainer } from '@patternfly/react-charts';
 import { Grid } from '@patternfly/react-core';
 import { useRefWidth } from '@console/internal/components/utils/ref-width-hook';
 import { useTranslation } from 'react-i18next';
@@ -17,6 +17,7 @@ const UtilizationAxis: React.FC<UtilizationAxisProps> = ({ timestamps = [] }) =>
     <div ref={containerRef}>
       {!!timestamps.length && (
         <ChartAxis
+          containerComponent={<ChartContainer title="time axis" />}
           scale={{ x: 'time' }}
           domain={{ x: [timestamps[0], timestamps[timestamps.length - 1]] }}
           tickFormat={formatDate}

diff --git a/frontend/packages/integration-tests-cypress/support/a11y.ts b/frontend/packages/integration-tests-cypress/support/a11y.ts
@@ -41,6 +41,7 @@ Cypress.Commands.add('testA11y', (target: string, selector?: string) => {
       { id: 'color-contrast', enabled: false }, // seem to be somewhat inaccurate and has difficulty always picking up the correct colors, tons of open issues for it on axe-core
       { id: 'focusable-content', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
       { id: 'scrollable-region-focusable', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
+      { id: 'list', enabled: false }, // introduced in Cypress 6.0. fix devconsole's sidebar NavList UL to only have LI as direct child elements. see https://github.com/openshift/console/pull/7446
     ],
   });
   a11yTestResults.numberChecks += 1;

diff --git a/frontend/packages/topology/src/components/page/TopologyPageToolbar.tsx b/frontend/packages/topology/src/components/page/TopologyPageToolbar.tsx
@@ -56,6 +56,7 @@ const TopologyPageToolbar: React.FC<TopologyPageToolbarProps> = observer(
             onClick={() =>
               onViewChange(showGraphView ? TopologyViewType.list : TopologyViewType.graph)
             }
+            aria-label="topology_view_switcher"
           >
             {showGraphView ? <ListIcon size="md" /> : <TopologyIcon size="md" />}
           </Button>

diff --git a/frontend/public/components/graphs/area.tsx b/frontend/public/components/graphs/area.tsx
@@ -138,6 +138,7 @@ export const AreaChart: React.FC<AreaChartProps> = ({
       {processedData?.length ? (
         <PrometheusGraphLink query={query} ariaChartLabel={ariaChartLabel}>
           <Chart
+            ariaTitle={ariaChartLabel}
             containerComponent={container}
             domainPadding={{ y: 20 }}
             height={height}

diff --git a/frontend/public/components/graphs/gauge.tsx b/frontend/public/components/graphs/gauge.tsx
@@ -44,6 +44,7 @@ export const GaugeChart: React.FC<GaugeChartProps> = ({
     >
       <PrometheusGraphLink query={query}>
         <ChartDonutThreshold
+          ariaTitle={title}
           data={thresholds}
           height={width} // Changes the scale of the graph, not actual width and height
           padding={0}

diff --git a/frontend/public/components/graphs/stack.tsx b/frontend/public/components/graphs/stack.tsx
@@ -38,6 +38,7 @@ export const StackChart: React.FC<AreaChartProps> = ({
   query,
   tickCount = DEFAULT_TICK_COUNT,
   title,
+  ariaChartLabel,
   xAxis = true,
   yAxis = true,
   chartStyle,
@@ -110,8 +111,9 @@ export const StackChart: React.FC<AreaChartProps> = ({
   return (
     <PrometheusGraph className={className} ref={containerRef} title={title}>
       {data?.[0]?.length ? (
-        <PrometheusGraphLink query={query}>
+        <PrometheusGraphLink query={query} ariaChartLabel={ariaChartLabel}>
           <Chart
+            ariaTitle={ariaChartLabel}
             containerComponent={container}
             domainPadding={{ y: 20 }}
             height={height}

diff --git a/frontend/public/components/monitoring/alerting.tsx b/frontend/public/components/monitoring/alerting.tsx
@@ -394,7 +394,9 @@ const Graph: React.FC<GraphProps> = ({
 
   const GraphLink = () =>
     query ? (
-      <Link to={queryBrowserURL(query, namespace)}>{t('monitoring~View in Metrics')}</Link>
+      <Link aria-label="link to View in Metrics" to={queryBrowserURL(query, namespace)}>
+        {t('monitoring~View in Metrics')}
+      </Link>
     ) : null;
 
   return (

diff --git a/frontend/public/components/monitoring/query-browser.tsx b/frontend/public/components/monitoring/query-browser.tsx
@@ -316,6 +316,7 @@ const Graph: React.FC<GraphProps> = React.memo(
     return (
       <Chart
         containerComponent={graphContainer}
+        ariaTitle="query browser chart"
         domain={domain}
         domainPadding={{ y: 1 }}
         height={200}

diff --git a/frontend/public/components/pod.tsx b/frontend/public/components/pod.tsx
@@ -518,6 +518,7 @@ const PodGraphs = requirePrometheus(({ pod }) => {
         <div className="col-md-12 col-lg-4">
           <Area
             title={t('workload~Memory usage')}
+            ariaChartLabel={t('workload~Memory usage')}
             humanize={humanizeBinaryBytes}
             byteDataType={ByteDataTypes.BinaryBytes}
             namespace={pod.metadata.namespace}
@@ -529,6 +530,7 @@ const PodGraphs = requirePrometheus(({ pod }) => {
         <div className="col-md-12 col-lg-4">
           <Area
             title={t('workload~CPU usage')}
+            ariaChartLabel={t('workload~CPU usage')}
             humanize={humanizeCpuCores}
             namespace={pod.metadata.namespace}
             query={`pod:container_cpu_usage:sum{pod='${pod.metadata.name}',namespace='${pod.metadata.namespace}'}`}
@@ -539,6 +541,7 @@ const PodGraphs = requirePrometheus(({ pod }) => {
         <div className="col-md-12 col-lg-4">
           <Area
             title={t('workload~Filesystem')}
+            ariaChartLabel={t('workload~Filesystem')}
             humanize={humanizeBinaryBytes}
             byteDataType={ByteDataTypes.BinaryBytes}
             namespace={pod.metadata.namespace}
@@ -550,6 +553,7 @@ const PodGraphs = requirePrometheus(({ pod }) => {
         <div className="col-md-12 col-lg-4">
           <Stack
             title={t('workload~Network in')}
+            ariaChartLabel={t('workload~Network in')}
             humanize={humanizeDecimalBytesPerSec}
             namespace={pod.metadata.namespace}
             query={`(sum(irate(container_network_receive_bytes_total{pod='${pod.metadata.name}', namespace='${pod.metadata.namespace}'}[5m])) by (pod, namespace, interface)) + on(namespace,pod,interface) group_left(network_name) ( pod_network_name_info )`}
@@ -559,6 +563,7 @@ const PodGraphs = requirePrometheus(({ pod }) => {
         <div className="col-md-12 col-lg-4">
           <Stack
             title={t('workload~Network out')}
+            ariaChartLabel={t('workload~Network out')}
             humanize={humanizeDecimalBytesPerSec}
             namespace={pod.metadata.namespace}
             query={`(sum(irate(container_network_transmit_bytes_total{pod='${pod.metadata.name}', namespace='${pod.metadata.namespace}'}[5m])) by (pod, namespace, interface)) + on(namespace,pod,interface) group_left(network_name) ( pod_network_name_info )`}

diff --git a/test-remote-cluster.sh b/test-remote-cluster.sh
@@ -0,0 +1,9 @@
+# before, execute: export NO_HEADLESS=true && export CHROME_VERSION=$(/usr/bin/google-chrome-stable --version)
+
+export BRIDGE_KUBEADMIN_PASSWORD=4DGom-8hwk7-ZiVkZ-YzigC
+export BRIDGE_BASE_ADDRESS="https://console-openshift-console.apps.satwsin1-44.149.81.133.59.nip.io"
+oc login -u kubeadmin -p $BRIDGE_KUBEADMIN_PASSWORD
+oc apply -f ./frontend/integration-tests/data/htpasswd-secret.yaml
+oc patch oauths cluster --patch "$(cat ./frontend/integration-tests/data/patch-htpasswd.yaml)" --type=merge
+./test-cypress.sh -p console -s 'tests/crud/k8*' -h true
+# ./test-protractor.sh