fix(APIKeyModal): improve screen reader announcement #6481

anamikaanu96 · 2024-11-20T11:41:40Z

Improved the screen reader announcement.
Issue 1 : This issue is occur in PasswordInput component from Carbon, attaching the recording of PasswordInput.
Issue 2 : The information "This is your unique API key…" was changed from body of APIKeyDownloader to helperText of PasswordInput. Had a discussion with @davidmenendez on this.
Issue 3: Working as expected
Issue 4 to 6 : The success message is currently showing in heading, in that case it won't read success message immediately if we give aria-live or alert ( Also if we follow reading heading approach, in Custom Edit variant we have both Heading change & success message at a time so it will ignore reading heading since giving more importance to success message)
Had a discussion with @davidmenendez and Fix done : Added a successMessage below
Issue 7 : Divya Vani Bollayyagari from Raghu's team confirmed that it is working as expected now

Required design input on issue 2 and 4-6
Carbon's PasswordInput https://github.com/user-attachments/assets/163f4d12-e6d5-478b-a254-a7df3f6f907a

What did you change?

packages/ibm-products/src/components/APIKeyModal/APIKeyDownloader.js
packages/ibm-products/src/components/APIKeyModal/APIKeyModal.stories.jsx
packages/ibm-products/src/components/APIKeyModal/APIKeyModal.test.js
packages/ibm-products/src/components/APIKeyModal/APIKeyModal.tsx
packages/ibm-products/src/components/APIKeyModal/APIKeyModal.types.ts

How did you test and verify your work? storybook, Jaws

netlify · 2024-11-20T11:41:56Z

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	`66df5b2`
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/674ef509bcfcbd0008e022fa
😎 Deploy Preview	https://deploy-preview-6481--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-11-20T11:42:01Z

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	`66df5b2`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/674ef509eff1f70008026afa
😎 Deploy Preview	https://deploy-preview-6481--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2024-11-20T11:46:38Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.86%. Comparing base (3f45528) to head (66df5b2).
Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6481      +/-   ##
==========================================
+ Coverage   79.85%   79.86%   +0.01%     
==========================================
  Files         394      394              
  Lines       12877    12886       +9     
  Branches     4258     4263       +5     
==========================================
+ Hits        10283    10292       +9     
  Misses       2594     2594

Components	Coverage Δ
ibm-products	`∅ <ø> (∅)`
ibm-products-web-components	`∅ <ø> (∅)`

sangeethababu9223 · 2024-11-25T04:59:29Z

@matthewgallo ,
Just noticed the needs design opinion. Not approving for now.

@oliviaflory,
Could you please look into this?

elycheea

Before	After

So I see the design changes and understand why we want a design opinion on them. Can you and @davidmenendez provide more clarity on what you tried before changing the design (1. move to helper text, 2. repeated success message)?

I would have expected us to use a combination of aria-live and aria-relevant¹. I do think it’d be nice if we’re able to prevent redundancy in the pattern rather than repeating the success message twice.

aria-live and aria-relevant ↩

oliviaflory · 2024-11-25T22:38:19Z

Issue 4 to 6 : The success message is currently showing in heading, in that case it won't read success message immediately if we give aria-live or alert ( Also if we follow reading heading approach, in Custom Edit variant we have both Heading change & success message at a time so it will ignore reading heading since giving more importance to success message)
Had a discussion with @davidmenendez and Fix done : Added a successMessage below

Is it typical for the heading or message to change in the modal and the screen reader not announce it? In that case would we want to keep the heading the same and then include a success message at the bottom? I agree with Elysia that avoiding the duplicate message would be nice and I'd be interested to hear if there were alternative solutions.

If it does require a design change I wonder if it should use the success status that the file uploader uses?

I'm also curious what this "more content menu" is for? Is this unique to voice over on mac? I don't have JAWS so a little difficult for me to compare! When I open it it just repeats the helper text which seems even more repetitive than the double success messaging. (Sorry the video is long, start at 0:13 seconds in)

generate-api-key.mov

davidmenendez · 2024-11-26T14:47:10Z

my justification for initial approval was that we already utilize the messaging in the error state and loading state

obviously there's no error / loading header that accompanies it, but the error message / loading message is displayed. i thought this was the logical choice. but yeah i'm definitely pro looking this over and clearly defining these states with accessibility in mind. i don't recall if this is one of the modals that are being deprecated, but if the documentation / guidance will remain it's still worth reconsidering with accessibility in mind.

i'll rescind my approval and await design approval for now 👍

@elycheea
@oliviaflory

davidmenendez

waiting for design feedback & approval.

davidmenendez · 2024-11-26T15:45:32Z

lets bring this up with michael gower at the next carbon accessibility guild 👍

anamikaanu96 · 2024-11-26T16:33:41Z

Hey all, thanks for reviewing!

Regarding Issue 4 to 6 in the description:
Initially I tried to make the title readable by screen reader/jaws by applying attributes like aria-live, aria-relevant. While in this approach, the successTitle is announced but it does not happen immediately. I believe that the successMessage should be announced promptly as soon as it appears on the screen.

Then I tried to show the succesMessage at the bottom just like in edit flow and error flow. But then it will duplicating the successMessage by displaying it both in the title and at the bottom of the modal.

So for now as I mentioned in the Engineering huddle, the alternative solution I proposed is to keep the title unchanged on success, instead, we will display the success message at bottom. But that is a change in the current design.

Issue 2 in the description:

Regarding the helper text, it was previously being passed as the body of APIKeyDownloader, but it functions more like a helper text. Also, Raghu requested that the text needs to be announced when the TextInput gains focus. For this reason, I moved it as a helper text.

As we discussed in call, lets bring this up with Michael Gower for more clarity!

@oliviaflory The "more content menu" you mentioned is part of the VoiceOver narration, we can see the same behaviour for Carbon TextInput aswell.

Proposed Solution: Available in deployment preview also

API.Key.Modal.mov

Demo of title announcement by jaws when aria-live is used

APIKeyModal_readingTitle.mov

davidmenendez · 2024-12-02T21:14:30Z

based on the carbon accessibility meeting today, this solution is the preferred method. Michael Gower agrees that having the header update isn't the most intuitive and that utilizing the existing area that we are using for status updates (failure, loading) is a better place for that information.

that being said, it sounds like there's an interest in having a larger conversation regarding how status updates are handled in modals. even across the modals in C4P (export, import, create, delete) there's an inconsistency between how each handles success.

export:

also should be noted that the error state for export doesn't appear to be working

apikey:

create & delete: neither have a success, failure, loading, or error state, unlike the other modals which have specific props for displaying and handling those states.

import: handles errors but only for the underlying FileUploader component and not for the primary modal action

might be something we want to look at 👍 🤔

as far as this specific issue and PR are concerned the solution Anamika has submitted is Gower approved.

anamikaanu96 · 2024-12-03T12:16:25Z

Thank you @davidmenendez for discussing this with Michael Gower!

I updated the style of status message with a CheckmarkFilled icon as suggested by @oliviaflory. Now its looking similar to Export Modal success message. Additionally I have deprecated two props editSuccessTitle and generateSuccessTitle instead introduced editSuccessMessage and generateSuccessMessage.

fix(APIKeyModal): improve screen reader announcement

2fa8680

anamikaanu96 requested a review from a team as a code owner November 20, 2024 11:41

anamikaanu96 requested review from elycheea and sangeethababu9223 and removed request for a team November 20, 2024 11:41

anamikaanu96 requested a review from davidmenendez November 20, 2024 11:42

anamikaanu96 linked an issue Nov 20, 2024 that may be closed by this pull request

[a11y]: API Key Modal, Screen reader not identified the Read only state #6248

Open

2 tasks

matthewgallo added the needs: design opinion Design question needs opinion from designer label Nov 20, 2024

davidmenendez approved these changes Nov 21, 2024

View reviewed changes

davidmenendez added the status: one more review 👀 label Nov 21, 2024

Merge branch 'carbon-design-system:main' into APIKeyModalViolations

dc7f26e

elycheea reviewed Nov 25, 2024

View reviewed changes

Merge branch 'carbon-design-system:main' into APIKeyModalViolations

c73f702

davidmenendez requested changes Nov 26, 2024

View reviewed changes

davidmenendez removed the status: one more review 👀 label Nov 26, 2024

anamikaanu96 added 2 commits November 26, 2024 21:19

fix(APIKeyModal): without title change

32a49fd

fix(APIKeyModal): without title change

06a06d5

anamikaanu96 added 2 commits November 27, 2024 13:41

Merge branch 'carbon-design-system:main' into APIKeyModalViolations

18417b5

Merge branch 'carbon-design-system:main' into APIKeyModalViolations

1d24e6f

fix(APIKeyModal): deprecated props and added style for success message

66df5b2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(APIKeyModal): improve screen reader announcement #6481

fix(APIKeyModal): improve screen reader announcement #6481

anamikaanu96 commented Nov 20, 2024 •

edited

Loading

netlify bot commented Nov 20, 2024 •

edited

Loading

netlify bot commented Nov 20, 2024 •

edited

Loading

codecov bot commented Nov 20, 2024 •

edited

Loading

sangeethababu9223 commented Nov 25, 2024

elycheea left a comment •

edited

Loading

oliviaflory commented Nov 25, 2024 •

edited

Loading

davidmenendez commented Nov 26, 2024

davidmenendez left a comment

davidmenendez commented Nov 26, 2024 •

edited

Loading

anamikaanu96 commented Nov 26, 2024 •

edited

Loading

davidmenendez commented Dec 2, 2024 •

edited

Loading

anamikaanu96 commented Dec 3, 2024

fix(APIKeyModal): improve screen reader announcement #6481

Are you sure you want to change the base?

fix(APIKeyModal): improve screen reader announcement #6481

Conversation

anamikaanu96 commented Nov 20, 2024 • edited Loading

What did you change?

How did you test and verify your work? storybook, Jaws

netlify bot commented Nov 20, 2024 • edited Loading

✅ Deploy Preview for ibm-products-web-components ready!

netlify bot commented Nov 20, 2024 • edited Loading

✅ Deploy Preview for carbon-for-ibm-products ready!

codecov bot commented Nov 20, 2024 • edited Loading

Codecov Report

sangeethababu9223 commented Nov 25, 2024

elycheea left a comment • edited Loading

Choose a reason for hiding this comment

Footnotes

oliviaflory commented Nov 25, 2024 • edited Loading

davidmenendez commented Nov 26, 2024

davidmenendez left a comment

Choose a reason for hiding this comment

davidmenendez commented Nov 26, 2024 • edited Loading

anamikaanu96 commented Nov 26, 2024 • edited Loading

davidmenendez commented Dec 2, 2024 • edited Loading

anamikaanu96 commented Dec 3, 2024

anamikaanu96 commented Nov 20, 2024 •

edited

Loading

netlify bot commented Nov 20, 2024 •

edited

Loading

netlify bot commented Nov 20, 2024 •

edited

Loading

codecov bot commented Nov 20, 2024 •

edited

Loading

elycheea left a comment •

edited

Loading

oliviaflory commented Nov 25, 2024 •

edited

Loading

davidmenendez commented Nov 26, 2024 •

edited

Loading

anamikaanu96 commented Nov 26, 2024 •

edited

Loading

davidmenendez commented Dec 2, 2024 •

edited

Loading