ImageInput accessibility improvements #1644

amelako · 2022-07-04T17:43:21Z

Purpose

The error message in the ImageInput component is not associated with input.
This PR improves accessibility for the ImageInput component.

Approach and changes

Added aria-describedby to the Input field to associate it with the ValidationHint
Make the ValidationHint a live region, by passing the aria-live='polite'

Note: Currently there is an issue with VoiceOver on Mac, aria-live content is read twice for the live regions inside iframes

Definition of done

sumup-clark · 2022-07-04T17:43:23Z

Hey @amelako,
we are super excited that you are contributing! 🎉There's one more thing you need to do. Please accept our Contributor License Agreement. It helps you and us to collaborate on clear terms and focus on what we love most: code.

Thanks!

changeset-bot · 2022-07-04T17:43:23Z

🦋 Changeset detected

Latest commit: e497fa2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sumup/circuit-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2022-07-04T17:43:23Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
oss-circuit-ui	✅ Ready (Inspect)	Visit Preview	Jul 19, 2022 at 3:18PM (UTC)

codecov · 2022-07-04T17:43:28Z

Codecov Report

Merging #1644 (e497fa2) into main (9f59cbd) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             main    #1644   +/-   ##
=======================================
  Coverage   91.54%   91.54%           
=======================================
  Files         195      195           
  Lines        4080     4081    +1     
  Branches     1296     1253   -43     
=======================================
+ Hits         3735     3736    +1     
- Misses        326      327    +1     
+ Partials       19       18    -1

Impacted Files	Coverage Δ
...it-ui/components/ValidationHint/ValidationHint.tsx	`94.11% <ø> (ø)`
...es/circuit-ui/components/ImageInput/ImageInput.tsx	`83.00% <100.00%> (+0.17%)`	⬆️
...es/circuit-ui/components/Pagination/Pagination.tsx	`81.57% <0.00%> (ø)`

robinmetral

Thanks for opening the draft! Early thoughts here

packages/circuit-ui/components/ImageInput/ImageInput.docs.mdx

packages/circuit-ui/components/ImageInput/ImageInput.tsx

robinmetral · 2022-07-05T07:14:22Z

packages/circuit-ui/components/ImageInput/ImageInput.docs.mdx

@@ -49,3 +49,17 @@ There are some caveats with this approach:
 ### Using a div element

 <Story id="forms-imageinput--custom-component-div" />
+
+## Accessibility


I'm noticing other issues when using the ImageInput with Firefox and VoiceOver. Can you share your findings from SR testing so we can compare what we found and address any problems?

Moved it to polite after testing in isolation on storybook with Firefox,Chrome and VoiceOver. I will add recordings as reference. Let me know if you have any more findings.

Attaching here the recording with Firefox and VoiceOver. For some reason after my Chrome update the screen reader stopped announcing message completely when I tested in isolation. Let me know if you can try on your side and let me know the result.

Screen.Recording.2022-07-15.at.15.36.56.mov

.

The issue I saw (and I'm seeing it in your recording as well) is that when selecting a file, focus seems to be brought to the window, and the loading label is not announced (but that might also be because there's no live region there either 😅)

Fixing this would probably require more research though. I don't mind going ahead with this PR in the meantime.

We can sync on later then on this and the docs.

packages/circuit-ui/components/ImageInput/ImageInput.docs.mdx

.changeset/violet-rats-reflect.md

robinmetral · 2022-07-19T13:17:22Z

packages/circuit-ui/components/ImageInput/ImageInput.docs.mdx

@@ -49,3 +49,17 @@ There are some caveats with this approach:
 ### Using a div element

 <Story id="forms-imageinput--custom-component-div" />
+
+## Accessibility


The issue I saw (and I'm seeing it in your recording as well) is that when selecting a file, focus seems to be brought to the window, and the loading label is not announced (but that might also be because there's no live region there either 😅)

Fixing this would probably require more research though. I don't mind going ahead with this PR in the meantime.

packages/circuit-ui/components/ImageInput/ImageInput.docs.mdx

packages/circuit-ui/components/ImageInput/ImageInput.tsx

robinmetral

Nice! Thank you for improving this 🙌

Would you mind creating a new issue for investigating why focus is moved to the body after selecting an image? (comment ref)

robinmetral · 2022-08-08T16:07:30Z

@amelako was there anything else missing before we can merge this? I'd love to release it! 🙂

amelako · 2022-08-09T11:23:12Z

@amelako was there anything else missing before we can merge this? I'd love to release it! 🙂

No stoppers, it can be merged. Will do it now. :)

robinmetral · 2022-08-09T15:11:29Z

Thanks. I also created #1705 as mentioned in a comment above.

amelako added 2 commits July 4, 2022 19:05

fix ImageInput accessibility issues

5d08d5a

update docs

57f2762

vercel bot deployed to Preview July 4, 2022 17:45 View deployment

github-actions bot added the 🗂 circuit-ui label Jul 4, 2022

robinmetral reviewed Jul 5, 2022

View reviewed changes

update aria-live to polite

1903176

vercel bot deployed to Preview July 13, 2022 12:59 View deployment

update snapshots

71c28c9

vercel bot deployed to Preview July 13, 2022 13:52 View deployment

update docs

9acb4c0

vercel bot deployed to Preview July 15, 2022 14:42 View deployment

add changeset

325a5af

amelako marked this pull request as ready for review July 15, 2022 14:57

amelako requested a review from a team as a code owner July 15, 2022 14:57

amelako requested review from robinmetral and connor-baer and removed request for a team July 15, 2022 14:57

vercel bot deployed to Preview July 15, 2022 14:59 View deployment

connor-baer reviewed Jul 18, 2022

View reviewed changes

packages/circuit-ui/components/ImageInput/ImageInput.docs.mdx Outdated Show resolved Hide resolved

.changeset/violet-rats-reflect.md Outdated Show resolved Hide resolved

.changeset/violet-rats-reflect.md Outdated Show resolved Hide resolved

update changeset

385b50d

vercel bot deployed to Preview July 18, 2022 15:07 View deployment

robinmetral reviewed Jul 19, 2022

View reviewed changes

address review comments

e497fa2

vercel bot deployed to Preview July 19, 2022 15:18 View deployment

robinmetral added this to the v5.x milestone Jul 21, 2022

robinmetral approved these changes Jul 22, 2022

View reviewed changes

amelako merged commit 6c5c2a1 into main Aug 9, 2022

amelako deleted the accessibility-fixes-imageinput branch August 9, 2022 11:24

connor-baer mentioned this pull request Aug 9, 2022

Version Packages #1704

Merged

robinmetral mentioned this pull request Aug 9, 2022

Focus is moved to the document body after selecting an image using the ImageInput component #1705

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ImageInput accessibility improvements #1644

ImageInput accessibility improvements #1644

amelako commented Jul 4, 2022 •

edited

Loading

sumup-clark bot commented Jul 4, 2022

changeset-bot bot commented Jul 4, 2022 •

edited

Loading

vercel bot commented Jul 4, 2022 •

edited

Loading

codecov bot commented Jul 4, 2022 •

edited

Loading

robinmetral left a comment

robinmetral Jul 5, 2022

amelako Jul 13, 2022

amelako Jul 15, 2022

robinmetral Jul 19, 2022

amelako Jul 19, 2022

robinmetral Jul 19, 2022

robinmetral left a comment

robinmetral commented Aug 8, 2022

amelako commented Aug 9, 2022 •

edited by connor-baer

Loading

robinmetral commented Aug 9, 2022

ImageInput accessibility improvements #1644

ImageInput accessibility improvements #1644

Conversation

amelako commented Jul 4, 2022 • edited Loading

Purpose

Approach and changes

Definition of done

sumup-clark bot commented Jul 4, 2022

changeset-bot bot commented Jul 4, 2022 • edited Loading

🦋 Changeset detected

vercel bot commented Jul 4, 2022 • edited Loading

codecov bot commented Jul 4, 2022 • edited Loading

Codecov Report

robinmetral left a comment

Choose a reason for hiding this comment

robinmetral Jul 5, 2022

Choose a reason for hiding this comment

amelako Jul 13, 2022

Choose a reason for hiding this comment

amelako Jul 15, 2022

Choose a reason for hiding this comment

robinmetral Jul 19, 2022

Choose a reason for hiding this comment

amelako Jul 19, 2022

Choose a reason for hiding this comment

robinmetral Jul 19, 2022

Choose a reason for hiding this comment

robinmetral left a comment

Choose a reason for hiding this comment

robinmetral commented Aug 8, 2022

amelako commented Aug 9, 2022 • edited by connor-baer Loading

robinmetral commented Aug 9, 2022

amelako commented Jul 4, 2022 •

edited

Loading

changeset-bot bot commented Jul 4, 2022 •

edited

Loading

vercel bot commented Jul 4, 2022 •

edited

Loading

codecov bot commented Jul 4, 2022 •

edited

Loading

amelako commented Aug 9, 2022 •

edited by connor-baer

Loading