From 8148ca2f541b80f88e8ff904a193ede95b191c12 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Mon, 6 Nov 2023 11:55:59 -0500
Subject: [PATCH 1/3] fix(battery): Added battery component aria label.

---
 packages/module/src/Battery/Battery.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx
index 32f1b650..43413672 100644
--- a/packages/module/src/Battery/Battery.tsx
+++ b/packages/module/src/Battery/Battery.tsx
@@ -62,7 +62,7 @@ const batteryLevels = (severity: BatterySeverity, classMode?: boolean) => {
   case 'medium':
   case 'warn':
   case 2:
-    return classMode ? 'batteryMedium' : <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+    return classMode ? 'batteryMedium' : <path role="img" d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
   case 'low':
   case 'info':
   case 1:
@@ -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 ariaLabels = { ['aria-label']: `${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} {...ariaLabels} {...props} widget-type="Battery" widget-id={label}>
         <svg
           version="1.1"
           x="0px"

From 22195d5416f6cd90b90bd94b5dd4e9e67ac4fd74 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Mon, 6 Nov 2023 12:33:02 -0500
Subject: [PATCH 2/3] fix(Ansible): Fixed Ansible supported a11y.

---
 packages/module/src/Ansible/Ansible.tsx       |  2 +-
 .../__snapshots__/Ansible.test.tsx.snap       |  4 ++
 .../__snapshots__/Batery.test.tsx.snap        | 41 +++++++++++++------
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx
index 9ad53a37..13440199 100644
--- 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} aria-label={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
index 0aead775..0e83a465 100644
--- a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
+++ b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Ansible component should render supported - boolean 1`] = `
 <div>
   <i
+    aria-label="Ansible supported"
     class="ansible-0-2-1 ansibleSupported-0-2-2"
   >
     <svg
@@ -27,6 +28,7 @@ exports[`Ansible component should render supported - boolean 1`] = `
 exports[`Ansible component should render supported - number 1`] = `
 <div>
   <i
+    aria-label="Ansible supported"
     class="ansible-0-2-1 ansibleSupported-0-2-2"
   >
     <svg
@@ -51,6 +53,7 @@ exports[`Ansible component should render supported - number 1`] = `
 exports[`Ansible component should render unsupported - boolean 1`] = `
 <div>
   <i
+    aria-label="Ansible is not supported"
     class="ansible-0-2-1 ansibleUnsupported-0-2-3"
   >
     <svg
@@ -99,6 +102,7 @@ exports[`Ansible component should render unsupported - boolean 1`] = `
 exports[`Ansible component should render unsupported - number 1`] = `
 <div>
   <i
+    aria-label="Ansible is not supported"
     class="ansible-0-2-1 ansibleUnsupported-0-2-3"
   >
     <svg
diff --git a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
index eb13acf7..f4ec528d 100644
--- a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
+++ b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Battery component API should hide label 1`] = `
     aria-label="high high"
     class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="high"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -31,9 +31,10 @@ exports[`Battery component API should hide label 1`] = `
 exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 <div>
   <i
+    aria-label="4 4"
     class="battery-0-2-1 batteryCritical-0-2-6"
     widget-id="4"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -63,9 +64,10 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 exports[`Battery component should render correctly CriticalBattery - critical 1`] = `
 <div>
   <i
+    aria-label="critical critical"
     class="battery-0-2-1 batteryCritical-0-2-6"
     widget-id="critical"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -95,9 +97,10 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
 exports[`Battery component should render correctly HighBattery - 3 1`] = `
 <div>
   <i
+    aria-label="3 3"
     class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="3"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -127,9 +130,10 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
 exports[`Battery component should render correctly HighBattery - error 1`] = `
 <div>
   <i
+    aria-label="error error"
     class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="error"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -159,9 +163,10 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
 exports[`Battery component should render correctly HighBattery - high 1`] = `
 <div>
   <i
+    aria-label="high high"
     class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="high"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -191,9 +196,10 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
 exports[`Battery component should render correctly LowBattery - 1 1`] = `
 <div>
   <i
+    aria-label="1 1"
     class="battery-0-2-1 batteryLow-0-2-3"
     widget-id="1"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -223,9 +229,10 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
 exports[`Battery component should render correctly LowBattery - info 1`] = `
 <div>
   <i
+    aria-label="info info"
     class="battery-0-2-1 batteryLow-0-2-3"
     widget-id="info"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -255,9 +262,10 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
 exports[`Battery component should render correctly LowBattery - low 1`] = `
 <div>
   <i
+    aria-label="low low"
     class="battery-0-2-1 batteryLow-0-2-3"
     widget-id="low"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -287,9 +295,10 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
 exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 <div>
   <i
+    aria-label="2 2"
     class="battery-0-2-1 batteryMedium-0-2-4"
     widget-id="2"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -305,6 +314,7 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
+        role="img"
       />
     </svg>
   </i>
@@ -319,9 +329,10 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 exports[`Battery component should render correctly MediumBattery - medium 1`] = `
 <div>
   <i
+    aria-label="medium medium"
     class="battery-0-2-1 batteryMedium-0-2-4"
     widget-id="medium"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -337,6 +348,7 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
+        role="img"
       />
     </svg>
   </i>
@@ -351,9 +363,10 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
 exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 <div>
   <i
+    aria-label="warn warn"
     class="battery-0-2-1 batteryMedium-0-2-4"
     widget-id="warn"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -369,6 +382,7 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
+        role="img"
       />
     </svg>
   </i>
@@ -383,9 +397,10 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 exports[`Battery component should render correctly NullBatery, default 1`] = `
 <div>
   <i
+    aria-label=" "
     class="battery-0-2-1 batteryDefault-0-2-2"
     widget-id=""
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"

From cb3b078b831f9447d463e9d95f3de21de0711a37 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Mon, 6 Nov 2023 13:23:42 -0500
Subject: [PATCH 3/3] replaced aria-label with title

---
 packages/module/src/Ansible/Ansible.tsx       |  2 +-
 .../__snapshots__/Ansible.test.tsx.snap       |  8 ++---
 packages/module/src/Battery/Battery.tsx       |  6 ++--
 .../__snapshots__/Batery.test.tsx.snap        | 29 +++++++++----------
 4 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx
index 13440199..8f50e66a 100644
--- 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} aria-label={unsupported ? "Ansible is not supported" : "Ansible supported" }{...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
index 0e83a465..54bf9349 100644
--- a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
+++ b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`Ansible component should render supported - boolean 1`] = `
 <div>
   <i
-    aria-label="Ansible supported"
     class="ansible-0-2-1 ansibleSupported-0-2-2"
+    title="Ansible supported"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -28,8 +28,8 @@ exports[`Ansible component should render supported - boolean 1`] = `
 exports[`Ansible component should render supported - number 1`] = `
 <div>
   <i
-    aria-label="Ansible supported"
     class="ansible-0-2-1 ansibleSupported-0-2-2"
+    title="Ansible supported"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -53,8 +53,8 @@ exports[`Ansible component should render supported - number 1`] = `
 exports[`Ansible component should render unsupported - boolean 1`] = `
 <div>
   <i
-    aria-label="Ansible is not supported"
     class="ansible-0-2-1 ansibleUnsupported-0-2-3"
+    title="Ansible is not supported"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -102,8 +102,8 @@ exports[`Ansible component should render unsupported - boolean 1`] = `
 exports[`Ansible component should render unsupported - number 1`] = `
 <div>
   <i
-    aria-label="Ansible is not supported"
     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
index 43413672..9da230a7 100644
--- a/packages/module/src/Battery/Battery.tsx
+++ b/packages/module/src/Battery/Battery.tsx
@@ -62,7 +62,7 @@ const batteryLevels = (severity: BatterySeverity, classMode?: boolean) => {
   case 'medium':
   case 'warn':
   case 2:
-    return classMode ? 'batteryMedium' : <path role="img" d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+    return classMode ? 'batteryMedium' : <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
   case 'low':
   case 'info':
   case 1:
@@ -91,7 +91,7 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
   const classes = useStyles();
   const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
 
-  const ariaLabels = { ['aria-label']: `${severity} ${label}` };
+  const title = { ['title']: `${severity} ${label}` };
 
 
   const batteryVariant = useMemo(() => batteryLevels(severity) , [ severity ])
@@ -99,7 +99,7 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
   return (
     <React.Fragment>
       {/* eslint-disable-next-line react/no-unknown-property */}
-      <i className={batteryClasses} {...ariaLabels} {...props} widget-type="Battery" 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
index f4ec528d..dabd4c25 100644
--- a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
+++ b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
@@ -3,8 +3,8 @@
 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="Battery"
   >
@@ -31,8 +31,8 @@ exports[`Battery component API should hide label 1`] = `
 exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 <div>
   <i
-    aria-label="4 4"
     class="battery-0-2-1 batteryCritical-0-2-6"
+    title="4 4"
     widget-id="4"
     widget-type="Battery"
   >
@@ -64,8 +64,8 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 exports[`Battery component should render correctly CriticalBattery - critical 1`] = `
 <div>
   <i
-    aria-label="critical critical"
     class="battery-0-2-1 batteryCritical-0-2-6"
+    title="critical critical"
     widget-id="critical"
     widget-type="Battery"
   >
@@ -97,8 +97,8 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
 exports[`Battery component should render correctly HighBattery - 3 1`] = `
 <div>
   <i
-    aria-label="3 3"
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="3 3"
     widget-id="3"
     widget-type="Battery"
   >
@@ -130,8 +130,8 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
 exports[`Battery component should render correctly HighBattery - error 1`] = `
 <div>
   <i
-    aria-label="error error"
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="error error"
     widget-id="error"
     widget-type="Battery"
   >
@@ -163,8 +163,8 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
 exports[`Battery component should render correctly HighBattery - high 1`] = `
 <div>
   <i
-    aria-label="high high"
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="high high"
     widget-id="high"
     widget-type="Battery"
   >
@@ -196,8 +196,8 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
 exports[`Battery component should render correctly LowBattery - 1 1`] = `
 <div>
   <i
-    aria-label="1 1"
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="1 1"
     widget-id="1"
     widget-type="Battery"
   >
@@ -229,8 +229,8 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
 exports[`Battery component should render correctly LowBattery - info 1`] = `
 <div>
   <i
-    aria-label="info info"
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="info info"
     widget-id="info"
     widget-type="Battery"
   >
@@ -262,8 +262,8 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
 exports[`Battery component should render correctly LowBattery - low 1`] = `
 <div>
   <i
-    aria-label="low low"
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="low low"
     widget-id="low"
     widget-type="Battery"
   >
@@ -295,8 +295,8 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
 exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 <div>
   <i
-    aria-label="2 2"
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="2 2"
     widget-id="2"
     widget-type="Battery"
   >
@@ -314,7 +314,6 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
-        role="img"
       />
     </svg>
   </i>
@@ -329,8 +328,8 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 exports[`Battery component should render correctly MediumBattery - medium 1`] = `
 <div>
   <i
-    aria-label="medium medium"
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="medium medium"
     widget-id="medium"
     widget-type="Battery"
   >
@@ -348,7 +347,6 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
-        role="img"
       />
     </svg>
   </i>
@@ -363,8 +361,8 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
 exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 <div>
   <i
-    aria-label="warn warn"
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="warn warn"
     widget-id="warn"
     widget-type="Battery"
   >
@@ -382,7 +380,6 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
-        role="img"
       />
     </svg>
   </i>
@@ -397,8 +394,8 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 exports[`Battery component should render correctly NullBatery, default 1`] = `
 <div>
   <i
-    aria-label=" "
     class="battery-0-2-1 batteryDefault-0-2-2"
+    title=" "
     widget-id=""
     widget-type="Battery"
   >