1030346 - Improve accessibility for of the contacts app.

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Contacts, defect)

Description

[Eitan Isaacson [:eeejay]]

Each one of the fieldsets such as phone/email/address is container in an <li>. We should probably give better accessibility roles to those elements, like groups, maybe event with relevant aria labels.

Comment 1

[Eitan Isaacson [:eeejay]]

Re-aligning priorities with 2.1 accessibility goals.

Comment 2

[Yura Zenevich [:yzen] (please use "needinfo")]

Hey Jim, this one should be a good one. Basically you need to go through contacts app and see what sections/elements do not sounds semantically correct, for example what Eitan mentioned in Comment 0. If you have any questions mark me with needinfo? Thanks!

Comment 3

[Yura Zenevich [:yzen] (please use "needinfo")]

Hi Jim, do you need any more info or pointers regarding this bug? Thanks!

Comment 4

[Yura Zenevich [:yzen] (please use "needinfo")]

Unassigning.

Comment 5

[Yura Zenevich [:yzen] (please use "needinfo")]

Some of the things to address:
* get rid of false lists when navigating to phone number field and elsewhere
* use correct roles on controls such as checkboxes and listboxes
* fix issues around empty label containers

Comment 6

[Yura Zenevich [:yzen] (please use "needinfo")]

* Fix issues with dropdowns

Comment 7

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Github pull request.

Here's a number of a11y improvements. Mostly markup roles and aria attributes. Only a few CSS changes to make the markup consistent with presentation. I split up the PR as well to be easier to read.

Comment 8

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8479637 [details] [review]
Github pull request.

Hi Yura,

thanks for the fantastic work, unfortunately I've been really busy with feature work and now your PR is not mergeable.

Could you rebase and ask me again for r?

Thanks

Comment 9

[Yura Zenevich [:yzen] (please use "needinfo")]

Comment on attachment 8479637 [details] [review]
Github pull request.

Rebased as requested. Should look good now again.

Comment 10

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8479637 [details] [review]
Github pull request.

As I'm going on PTO and don't want this to be delayed more, would like Sergi to do a proper review.

I did a install, and everything is looking good to me, but will let him to do the final r?

Thx

Comment 11

[Sergi Mansilla [:sergi] (Telenor) [PTO]]

Comment on attachment 8479637 [details] [review]
Github pull request.

Looking good to me too, r+. Good job!

Comment 12

[Yura Zenevich [:yzen] (please use "needinfo")]

Comment on attachment 8479637 [details] [review]
Github pull request.

This pull request improves overall Contacts app accessibility and makes it virtually all usable by the screen reader.

[Bug caused by] (feature/regressing bug #): Improvement not a regression

[User impact] if declined: Screen reader user will not be able to fully use some of the contacts app interfaces (switches, listitems, etc). The pull request improves the verbosity of elements spoken as well.

[Testing completed]: Tests are passing. Most of the things here are markup and l10n changes.
[Risk to taking this patch] (and alternatives if risky): Medium. Some CSS changes. Most of the markup changes only add/remove attributes that should have affect on users that do not use the screen reader.

[String changes made]: https://github.com/mozilla-b2g/gaia/pull/23348/files#diff-10

Comment 13

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Yura Zenevich [:yzen] from comment #12)
> Comment on attachment 8479637 [details] [review]

> [Risk to taking this patch] (and alternatives if risky): Medium. Some CSS
> changes. Most of the markup changes only add/remove attributes that should

*should not*

> have affect on users that do not use the screen reader.

Comment 14

[Yura Zenevich [:yzen] (please use "needinfo")]

https://github.com/mozilla-b2g/gaia/commit/77a475a68d3a17ca74cae64bc63e3263b353156a

Comment 15

[Doug Sherk (:drs) (inactive)]

This broke the call info page in the dialer. I'm fixing this in bug 1059087 by accident. In the future, we must be careful to mirror changes in details.html to phone_details.html and email_details.html, at least until bug 1060290 and bug 1060076 are fixed.

Comment 16

[[:fabrice] Fabrice Desré]

Comment on attachment 8479637 [details] [review]
Github pull request.

a- since this has already caused regressions on trunk.

Comment 17

[Yura Zenevich [:yzen] (please use "needinfo")]

Comment on attachment 8479637 [details] [review]
Github pull request.

Asking for re-approval again. The only CSS regression that it caused was fixed in bug 1059087, that is also up for an approval.

Fix missing spacing between "Carrier Name" and "Type Label".
This pull request improves overall Contacts app accessibility and makes it virtually all usable by the screen reader.

[Bug caused by] (feature/regressing bug #): improvement, not a regression

[User impact] if declined: Screen reader user will not be able to fully use some of the contacts app interfaces (switches, list items, etc). The pull request improves the verbosity of elements spoken as well.

[Testing completed]: Tests are passing. Tested manually with screen reader. It did cause a regression fixed in bug 1059087. Other than that it has been in master for a while without any more issues.

[Risk to taking this patch] (and alternatives if risky): Medium. Some CSS changes. It did cause 1 regression because the old markup being used in dialer that was fixed in bug 1059087 that is also up for approval.

[String changes made]: https://github.com/mozilla-b2g/gaia/pull/23348/files#diff-10

Comment 18

[Yura Zenevich [:yzen] (please use "needinfo")]

Scratch: "Fix missing spacing between "Carrier Name" and "Type Label"."

Comment 19

[Ryan VanderMeulen [:RyanVM]]

Needs rebasing for v2.1 uplift.

Comment 20

[Doug Sherk (:drs) (inactive)]

I was going to rebase this myself so that I could land bug 1059087 on top of it, but it was too complicated an uplift without knowing what I was doing.

Please make sure to make the changes in this patch in both of these places:
https://github.com/mozilla-b2g/gaia/blob/v2.1/apps/communications/contacts/elements/phone_details.html
https://github.com/mozilla-b2g/gaia/blob/v2.1/apps/communications/contacts/elements/details.html

Comment 21

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Github pull request rebased for v2.1.

Comment 22

[Ryan VanderMeulen [:RyanVM]]

v2.1: https://github.com/mozilla-b2g/gaia/commit/36975afde437307b3873a7145f625b9beaa4a947

Comment 23

[Shally Li（leave from Mozilla）]

Hi Eitan,
    Could you provide the expected result for me to verify this bug?

Thank you!

Comment 24

[Eitan Isaacson [:eeejay]]

This is a whole bunch of accessibility improvements. I'll defer to the patch author to determine the best way to verify.

Comment 25

[Yura Zenevich [:yzen] (please use "needinfo")]

There are several things that were worked on:
* settings screen should have all elements readable and accessible (activatable) with the screen reader, that also includes all the sub-pages 
* contacts details should have all elements readable and accessible (activatable) with the screen reader
* add contacts screen should have all elements readable and accessible including things like drop downs and check boxes. 
* the user should be able to search for contacts and consequently select them while using the screen reader