1894101 - BETA badge on the Select Translations panel is hidden from assistive technology

Status: VERIFIED FIXED

(Firefox :: Translations, defect, P3)

Description

[Anna Yeddi [:ayeddi] ⛔ Out of office until November 12 ⛔]

Attachment: Inspector results for the BETA badge that is an image without textual alternative in an hbox

STR:

1. Ensure browser.translations.select.enable is set to true in the about:config
2. Ensure a screen reader is running
3. Navigate to a page in a language different from the OS, i.e. for English machine: data:text/html,<p lang="es_ES">Como estas?</p> or https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D0%BE%D1%80%D0%B8%D1%8F_%D0%BB%D0%BE%D0%B6%D0%B5%D0%BA
4. Select a text (using mouse, likely, because screen readers are not yet supporting static text selection) and open a context menu/right click
5. Navigate to and activate Translate Selection to English
6. With a screen reader, navigate to the heading of the dialog and observe the screen reader announcements:

Expected:

1. The BETA badge is announced by a screen reader. Ideally, as a part of the heading announcement, but as a separate element would also be appropriate.

Actual:

1. The BETA badge is hidden from assistive technology. Users of screen readers would not know that the feature is still, in fact, in Beta.

Remediation:

1. Ensure the image is marked up as informative. Since this <image> is wrapped in an hbox, try adding role=image and aria-label="Beta" to the <hbox>.
2. Another way is to include Beta in the <h1> announcement

Comment 1

[Anna Yeddi [:ayeddi] ⛔ Out of office until November 12 ⛔]

Attachment: Bug 1894101 - Ensure BETA badges on both the Full page and Select Translations panels are announced by assistive technology. r=nordzilla!

Ensuring the image is marked up as informative. Since this <image> is wrapped in an hbox, try adding role=image and aria-label="Beta" to the <hbox>.

Following up on the Full Page Translations pattern, the word Beta used in the label is not localized, as it is a reflection of the un-localized BETA icon that is in the panel and the icon is not translated.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d08f5dbc29a7
Ensure BETA badges on both the Full page and Select Translations panels are announced by assistive technology. r=nordzilla,translations-reviewers

Comment 3

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/d08f5dbc29a7

Comment 4

[Ciprian Georgiu, Desktop QA]

Hi Anna Yedd! I've checked this fix with Windows 11 and I can confirm on Beta 127.0b7 that the BETA badge is read by the screen reader as soon as the context menu for translation is opened.

However on macOS 13 the Beta badge is not announced by the screen reader, can you please take a look at this?

Comment 5

[Anna Yeddi [:ayeddi] ⛔ Out of office until November 12 ⛔]

(In reply to Ciprian Georgiu, Desktop QA from comment #4)

Hi Anna Yedd! I've checked this fix with Windows 11 and I can confirm on Beta 127.0b7 that the BETA badge is read by the screen reader as soon as the context menu for translation is opened.

However on macOS 13 the Beta badge is not announced by the screen reader, can you please take a look at this?

Thank you for confirming this!

On macOS, the VoiceOver is not announcing it because the image is not a part of the dialog heading, but when reviewing the dialog with VO+arrow navigation, the image is now not skipped by VO, but focused separately and announced as beta, image. I hope it helps.

Comment 6

[Ciprian Georgiu, Desktop QA]

Thanks, Anna! Yes, it does. I can confirm that the VO announce the beta, image when focused with Beta 127.0b8, macOS 14.