Page MenuHomePhabricator

Accessibility: Update TextView to Button if it shows as a button
Closed, ResolvedPublic

Assigned To
Authored By
cooltey
Aug 2 2019, 11:17 PM
Referenced Files
F30037365: Screenshot_20190815-120205.png
Aug 15 2019, 10:06 AM
F30008141: Screenshot_20190812-120906.png
Aug 12 2019, 10:37 AM
F30008138: Screenshot_20190812-121228.png
Aug 12 2019, 10:37 AM
F30008128: Screenshot_20190812-121309.png
Aug 12 2019, 10:37 AM
F30008126: Screenshot_20190812-121340.png
Aug 12 2019, 10:37 AM
F30008133: Screenshot_20190812-120956.png
Aug 12 2019, 10:37 AM
F30008131: Screenshot_20190812-122642.png
Aug 12 2019, 10:37 AM
F30004655: 註解 2019-08-09 130233.jpg
Aug 9 2019, 8:03 PM

Description

Based on the accessibility report:

04) In the customize your Explore feed card, the “Got it” and ”Customize” buttons are not announced as buttons.

In the current build, we use TextView for a button, which will make the accessibility tools (e.g. TalkBack) read only the text on the view but not specify it as a button.

To solve the issue, we can replace the existing TextView buttons with Button instead of an adding extra contentDescription to the view.

For the designer (cc @schoenbaechler), this ticket requires to check the style of the buttons to see if they are consistent.

Event Timeline

A design check note for @schoenbaechler:

I've replaced the button views with actual Button component instead of TextView. The design looks almost the same, and I think it would be better if you can have a quick check on the changes.

Please see the examples below (not all of the changes).

註解 2019-08-09 130233.jpg (1×3 px, 486 KB)

Great @cooltey, I noticed three discrepancies:

01) Keep height of 48dp for bottom sheet buttons

ProductionAlpha
Screenshot_20190812-121340.png (2×1 px, 1 MB)
Screenshot_20190812-121309.png (2×1 px, 496 KB)

02a) I noticed that the letter-spacing value has changed, can we reset it to the one before? (which was no/minor letter spacing)

02b) Also, if I’m not mistaken, the border-radius of the buttons seems to have changed, please reset it to 2dp.

ProductionAlpha
Screenshot_20190812-122642.png (2×1 px, 468 KB)
Screenshot_20190812-120956.png (2×1 px, 462 KB)
Screenshot_20190812-121228.png (2×1 px, 374 KB)
Screenshot_20190812-120906.png (2×1 px, 380 KB)

Thanks!

Hi @schoenbaechler

For the following founds:

02a) I noticed that the letter-spacing value has changed, can we reset it to the one before? (which was no/minor letter spacing)
02b) Also, if I’m not mistaken, the border-radius of the buttons seems to have changed, please reset it to 2dp.

I didn't change any of those settings, and I think they are the default styles of the material button (https://material.io/design/components/buttons.html)

Even though we can still update the styles to match the needs and it will definitely need extra codes to do that.

Do you think it would be fine if we adopt the new design changes?

Hey @cooltey, thanks for mentioning this. Quick question, are we currently using Roboto Medium 14sp with a letter-spacing value of 0.5sp for the buttons? If yes, let’s keep it like that! Thanks!

As discussed on Slack, @cooltey will apply the letter-spacing value of Widget.MaterialComponents.Button to Widget.AppCompat.Button.Borderless 🎯

Issue that @RHo spotted at Wikimania @cooltey:

Screenshot_20190815-120205.png (1×1 px, 1 MB)

Hi @RHo, do you have the information about the brand and OS version of the device?

and cc @schoenbaechler because we can create a ticket for the issue above.

Hi @RHo, do you have the information about the brand and OS version of the device?

and cc @schoenbaechler because we can create a ticket for the issue above.

Hi there, it's occurring on my Nexus 5, Android OS 6.0.1, in the most recent Beta v2.7.50287-beta-2019-08-01 (as well as the alpha v2.7.50287-alpha-2019-08-13)

Filed a separate phab task for the issue that @RHo spotted: T230606.


Moving this task to QA signoff @cooltey, since the issues I previously mentioned are solved. Thanks!