Skip to content

Fixed a11y component issues. #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dlabaj merged 3 commits into from
Nov 7, 2023
Merged

Fixed a11y component issues. #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8148ca2
fix(battery): Added battery component aria label.
dlabaj Nov 6, 2023
22195d5
fix(Ansible): Fixed Ansible supported a11y.
dlabaj Nov 6, 2023
cb3b078
replaced aria-label with title
dlabaj Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/module/src/Ansible/Ansible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 4 additions & 0 deletions packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
Expand All @@ -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;"
Expand All @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down
8 changes: 3 additions & 5 deletions packages/module/src/Battery/Battery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
40 changes: 26 additions & 14 deletions packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down