1662879 - credit card autofill: card type not labeled for screen reader users.

Status: RESOLVED FIXED

(Toolkit :: Form Autofill, defect)

Description

[Asa Dotzler [:asa]]

We show credit card logos in the credit card edit dialog and the autofill pop-up and those logos contain meaningful information, the card issuer, which is not read to screen reader users.

Steps to reproduce:

1. With a credit card saved, focus a credit card field
2. Arrow down to the first credit card in your list

Results: the cardholder's name and starred out credit card number are announced by the screen reader but the credit card issuer, which is visually available, is not announced by the screen reader.

Expected: the card issuer's name is announced.

Additional Information: this is also a problem with the saved credit cards dialog too.

Tested on today's Nightly on Windows with NVDA

Comment 1

[James Teh [:Jamie]]

The list in preferences uses CSS background images based on an attribute (cc-type) set on the options. Making this accessible is probably going to require setting aria-label.

I'm not quite sure how to make the autocomplete result accessible. it uses nsIAutoCompleteResult.getImageAt. Because we use nsIAutoCompleteResult here, we don't have direct access to the item, so I don't know how we could set aria-label or similar.

This is pretty problematic if a user has multiple credit cards under the same name but different types, so marking access-s2.

Comment 2

[James Teh [:Jamie]]

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

Comment 3

[Ryan VanderMeulen [:RyanVM]]

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

Comment 4

[James Teh [:Jamie]]

Attachment: Bug 1662879 part 1: Expose the credit card type via aria-label in the credit card list in Preferences.

Comment 5

[James Teh [:Jamie]]

Attachment: Bug 1662879 part 2: Expose the credit card type via aria-label for credit card autocomplete results.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5daec3a7ae6f
part 1: Expose the credit card type via aria-label in the credit card list in Preferences. r=zbraniecki
https://hg.mozilla.org/integration/autoland/rev/3952f1301e38
part 2: Expose the credit card type via aria-label for credit card autocomplete results. r=zbraniecki

Comment 7

[Natalia Csoregi [:nataliaCs]]

Backed out for multiple failures e.g. browser_manageCreditCardsDialog.js

backout: https://hg.mozilla.org/integration/autoland/rev/3c70ce80b49e7229d82f4118cbd96b4802e5ed62

push: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=3952f1301e388ddd1ed8fdcf692e5b91d597fdb2&group_state=expanded

push where the failures appeared: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=f0551b411d485a75e1f60ac837768d9cf59ef91e&group_state=expanded&selectedTaskRun=WRSlXm0LTYiDyLFwNcIOfQ.0

failure log:

• TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/browser/creditCard/browser_manageCreditCardsDialog.js | Test timed out -
• TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/unit/test_profileAutocompleteResult.js | xpcshell return code: 0
• TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/mochitest/creditCard/test_basic_creditcard_autocomplete_form.html | Checking menu entry #0 - got "{"primary":"John Doe","secondary":"****1045","ariaLabel":"Visa John Doe ****1045"}", expected "{"primary":"John Doe","secondary":"****1045"}"
• and more

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/928ddc1ceffb
part 1: Expose the credit card type via aria-label in the credit card list in Preferences. r=zbraniecki
https://hg.mozilla.org/integration/autoland/rev/9845c9d150a0
part 2: Expose the credit card type via aria-label for credit card autocomplete results. r=zbraniecki

Comment 9

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/928ddc1ceffb
https://hg.mozilla.org/mozilla-central/rev/9845c9d150a0

Comment 10

[Jim Mathies [:jimm]]

Comment on attachment 9174578 [details]
Bug 1662879 part 1: Expose the credit card type via aria-label in the credit card list in Preferences.

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 uplifed 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 11

[Jim Mathies [:jimm]]

Comment on attachment 9174578 [details]
Bug 1662879 part 1: Expose the credit card type via aria-label in the credit card list in Preferences.

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

Comment 12

[Jim Mathies [:jimm]]

Comment on attachment 9174578 [details]
Bug 1662879 part 1: Expose the credit card type via aria-label in the credit card list in Preferences.

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 13

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9174578 [details]
Bug 1662879 part 1: Expose the credit card type via aria-label in the credit card list in Preferences.

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 14

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-release/rev/b8a07311a53f
https://hg.mozilla.org/releases/mozilla-release/rev/0d92ff30d3bd