Merge pull request #72 from dlabaj/a11y

Fixed a11y component issues.
patternfly · Nov 7, 2023 · 31a1b18 · 31a1b18
2 parents 8b77723 + cb3b078
commit 31a1b18
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx
@@ -71,7 +71,7 @@ const Ansible: React.FunctionComponent<AnsibleProps> = ({ unsupported, className
   );
 
   return (
-    <i className={ansibleLogoClass} {...props}>
+    <i className={ansibleLogoClass} title={unsupported ? "Ansible is not supported" : "Ansible supported" }{...props}>
       <svg
         version="1.1"
         x="0px"

diff --git a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Ansible component should render supported - boolean 1`] = `
 <div>
   <i
     class="ansible-0-2-1 ansibleSupported-0-2-2"
+    title="Ansible supported"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -28,6 +29,7 @@ exports[`Ansible component should render supported - number 1`] = `
 <div>
   <i
     class="ansible-0-2-1 ansibleSupported-0-2-2"
+    title="Ansible supported"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -52,6 +54,7 @@ exports[`Ansible component should render unsupported - boolean 1`] = `
 <div>
   <i
     class="ansible-0-2-1 ansibleUnsupported-0-2-3"
+    title="Ansible is not supported"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -100,6 +103,7 @@ exports[`Ansible component should render unsupported - number 1`] = `
 <div>
   <i
     class="ansible-0-2-1 ansibleUnsupported-0-2-3"
+    title="Ansible is not supported"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"

diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx
@@ -91,17 +91,15 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
   const classes = useStyles();
   const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
 
-  let ariaLabels = {};
-  if (labelHidden) {
-    ariaLabels = { ['aria-label']: `${severity} ${label}` };
-  }
+  const title = { ['title']: `${severity} ${label}` };
+
 
   const batteryVariant = useMemo(() => batteryLevels(severity) , [ severity ])
 
   return (
     <React.Fragment>
       {/* eslint-disable-next-line react/no-unknown-property */}
-      <i className={batteryClasses} {...ariaLabels} {...props} widget-type="InsightsBattery" widget-id={label}>
+      <i className={batteryClasses} {...title} {...props} widget-type="Battery" widget-id={label}>
         <svg
           version="1.1"
           x="0px"

diff --git a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Battery component API should hide label 1`] = `
 <div>
   <i
-    aria-label="high high"
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="high high"
     widget-id="high"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -32,8 +32,9 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryCritical-0-2-6"
+    title="4 4"
     widget-id="4"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -64,8 +65,9 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
 <div>
   <i
     class="battery-0-2-1 batteryCritical-0-2-6"
+    title="critical critical"
     widget-id="critical"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -96,8 +98,9 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="3 3"
     widget-id="3"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -128,8 +131,9 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="error error"
     widget-id="error"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -160,8 +164,9 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="high high"
     widget-id="high"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -192,8 +197,9 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="1 1"
     widget-id="1"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -224,8 +230,9 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="info info"
     widget-id="info"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -256,8 +263,9 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="low low"
     widget-id="low"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -288,8 +296,9 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="2 2"
     widget-id="2"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -320,8 +329,9 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
 <div>
   <i
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="medium medium"
     widget-id="medium"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -352,8 +362,9 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="warn warn"
     widget-id="warn"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -384,8 +395,9 @@ exports[`Battery component should render correctly NullBatery, default 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryDefault-0-2-2"
+    title=" "
     widget-id=""
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"