1662876 - credit card autofill: card number label not read for existing cards in edit credit card dialog

Status: RESOLVED FIXED

(Toolkit :: Form Autofill, defect)

Description

[Asa Dotzler [:asa]]

If you attempt to edit an existing credit card the label for card number is not read for screen reader users.

Steps to reproduce:

1. visit about:preferences
2. hit Saved Credit Cards... button
3. select a credit card and click the Edit... button
4. focus or re-focus the card number field

Results: the card number is read but the field's label isn't read (though labels for all the other fields are read as expected.)

Expected: the card number field's label "card number" is read to the user.

Additional information: this also happens in the Add New Credit Card dialog if there's content in the credit card number field. If the field is empty, the label gets read. If it's filled, the label does not get read.

Tested in latest nightly on Windows with NVDA

Comment 1

[James Teh [:Jamie]]

I do hear the label, but it's preceded by the number, which is definitely wrong. For example, I hear:
"4111111111111111 Card Number edit required 4111111111111111"
It should be just:
"Card Number edit required 4111111111111111"

This is actually an a11y engine bug. :( Distilled test case:
data:text/html,<label><div hidden>Some text</div><input type="text" value="4111111111111111">Card number
I don't know why yet, but that div before the input causes the input's value to be included in the label, even if the div is hidden. If you remove the preceding div, the problem goes away.

Comment 2

[James Teh [:Jamie]]

Looking into this more, this behaviour of the a11y engine is intentional and is needed to support use cases like this:
data:text/html,<label>Go to sleep after <input type="text" value="5"> minutes</label>
In that case, despite the redundancy, we need to read the value as part of the label to give the user sufficient context.

It's a bit surprising in this particular case because the triggering span is hidden. While that's arguably an a11y engine bug, this #invalidCardNumberString span could presumably be visible in some cases (although I failed to make it appear regardless of what I typed into the field), at which point this issue would manifest itself regardless. This error message really should not be inside the label.

The fix here is to move the message outside of the label. I'd be happy to submit a patch, but I think this is going to be sensitive to visual styling and I can't confirm visual styling, so I think someone else will need to take care of this.

Comment 3

[James Teh [:Jamie]]

[Tracking Requested - why for this release]: This is a very noticeable accessibility problem in credit card autofill, which is a Shirley feature and will thus likely have significant visibility.

Comment 4

[Ryan VanderMeulen [:RyanVM]]

tracking+, but we're pretty low on time to fix this for 81

Comment 5

[James Teh [:Jamie]]

Attachment: Bug 1662876: Use aria-labelledby on the credit card number field to avoid the value being included in the label.

Ideally, the error message would be outside of the wrapping label element, which would avoid inclusion of the value in the label.
However, I didn't want to potentially mess with the visual presentation, especially given the tight timeline.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7eead7eaf33a
Use aria-labelledby on the credit card number field to avoid the value being included in the label. r=zbraniecki

Comment 7

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/7eead7eaf33a

Comment 8

[Jim Mathies [:jimm]]

Comment on attachment 9174577 [details]
Bug 1662876: Use aria-labelledby on the credit card number field to avoid the value being included in the label.

Beta/Release Uplift Approval Request

• User impact if declined: Accessibility issue with narrators and the new credit card autofill feature.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Since this would get uplifted to an RC, I plan to

1. take tomorrow's nightly for a spin to be sure everything is laid out right and working properly.
2. Ask QA to run through a quick test of the feature and preferences next week.

• String changes made/needed: none

Comment 9

[Jim Mathies [:jimm]]

Comment on attachment 9174577 [details]
Bug 1662876: Use aria-labelledby on the credit card number field to avoid the value being included in the label.

Cancelling, no need for an uplift to 81 as the feature will not ship in that release.

Comment 10

[Jim Mathies [:jimm]]

Comment on attachment 9174577 [details]
Bug 1662876: Use aria-labelledby on the credit card number field to avoid the value being included in the label.

See below for request details. We'll be shipping through an experiment in 81, so we want to get these into the RC build kicking off today.

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9174577 [details]
Bug 1662876: Use aria-labelledby on the credit card number field to avoid the value being included in the label.

Given that we're still planning to ship this for 81 via the experiment path, it makes sense to take this still. Approved for 81.0rc2.

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-release/rev/40664177e467