feat(a11y): Adds aria labels to required roles

[driskull]

Related Issue: None

Summary

feat(a11y): Adds aria labels to required roles

[paulcpederson]

Nice, thanks @driskull

[driskull]

The following dependencies couldn't be updated:

• tailwind (major version change)
• autoprefixer (major version change)
• workbox-build (major version change)

Just an FYI for future.

[driskull]

I had to skip a calcite-alert test that is failing color contrast a11y test when auto-dismiss is enabled. I think it might have to do with timing or animation though.

[driskull]

@macandcheese @paulcpederson can one of you verify the screener visual changes? https://screener.io/v2/dashboard/1leJJn.Esri-calcite-components/dris0000%2Fa11y-fixes-aXe

[macandcheese]

Is that result correct? 161 changes? Is that based on files touched and their resultant screenshots or is that saying there are 161 changes based on pixel diffs?

Regarding the alert... yeah auto-dismiss animates like the progress bar... not sure if that's solve-able visually for a11y or if auto-dismiss necessitates a separate kind of aria-role.. always had wondered about that.

[driskull]

It seems it's just the whole calcite-alert failing color contrast. I skipped both tests.

I think the visual screenshot pixel changes could be in regard to updates to storybook or sass.

[eriklharper]

Is that result correct? 161 changes? Is that based on files touched and their resultant screenshots or is that saying there are 161 changes based on pixel diffs?

@macandcheese click the
icon on an individual screenshot diff in Screener to expand the DOM diffing panel that shows you exactly what changed:

Looks like the body element's padding was altered, so the components themselves don't appear to have visual changes.

[eriklharper]

Screener Pro-Tip: Use Shift + Up to Approve Changes and Shift + Down to Reject Changes. Use ArrowRight to move to the next screenshot and ArrowLeft to go to the previous one. Keyboard shortcuts make it so much easier to approve a bunch of diffs.

[macandcheese]

Ok, sounds good.

Re: alert color contrast: #994
Re: "changes" in alert in Screener - that is because of the auto-dismiss bar being at a different %, so if possible should ignore that change in Screener similar to Loader / Progress

[eriklharper]

Ok, sounds good.

Re: alert color contrast: #994
Re: "changes" in alert in Screener - that is because of the auto-dismiss bar being at a different %, so if possible should ignore that change in Screener similar to Loader / Progress

Here are Screener's docs on ignoring: https://www.screener.io/v2/docs/ignore

[macandcheese]

OK, yeah these just seem to be Storybook related padding changes to the viewer container. Going through (with snazzy shortcuts) and verifying...

[eriklharper]

So awesome to finally see us using Screener! 🥇 🎉

[macandcheese]

This one's interesting: https://screener.io/v2/states/1leJJn.Esri-calcite-components/dris0000%2Fa11y-fixes-aXe/1024x768/Chrome/componentscard-dark-theme-footer-text-buttons-tooltips-0

Looks like the change in height of preview container changed where the tooltip is placed.. that seems safe to approve?

[eriklharper]

This one's interesting: https://screener.io/v2/states/1leJJn.Esri-calcite-components/dris0000%2Fa11y-fixes-aXe/1024x768/Chrome/componentscard-dark-theme-footer-text-buttons-tooltips-0

Looks like the change in height of preview container changed where the tooltip is placed.. that seems safe to approve?

I would say yeah, safe to approve.

[driskull]

I'll create an issue to fix the color a11y test