1651109 - Narrate popup overlaps the content being narrated

Status: NEW

(Toolkit :: Reader Mode, defect, P3)

Description

[Andrew Gillett]

Attachment: Annotation 2020-07-07 170634.jpg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Go to Reader View and click the "Listen" button.

Actual results:

The new design of Reader View has two problems:

1. The buttons used to be on the left-hand side of the window, but now they're directly to the left of the page text. This means that the pop-out controls for the Listen button now overlap the text. So if I want to be able to read the text at the same time as listening to the TTS, I have to click a second time on the Listen button to hide the pop-up. Then I have to click on it for a third time if I want to stop the TTS.

2. Given that this feature is particularly important for those with eyesight problems and other disabilities, it seems like a bad move to have made the buttons smaller.

A screenshot is attached.

Expected results:

It would be preferable to have the buttons far enough to the left that the pop-up does not overlap the text (if enough space is available), and to have the buttons restored to their previous size.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[:Gijs (he/him)]

In terms of the sizing, the previous size was 40x40px, and now it's 32x32px, which I don't think is a huge difference. We could conceivably make the hit area for the buttons larger and keep the styling the same, if that would help, though it's not clear to me whether it would.

Moving the buttons closer to the text was done to make it more obvious they were there at all - user research showed that people generally did not find the controls at all, which meant they had a suboptimal experience.

Abe, what do you reckon we should do here?

Comment 3

[Abraham Wallin]

This is an existing issue prior to the redesign. Depending on the screen and column width the popup for listen mode overlaps. See attached screenshot.

We could redesign the listen menu to minimize the chances of overlap. Possible using a vertical layout.

Comment 4

[Abraham Wallin]

Attachment: Screen Shot 2020-07-09 at 8.34.50 AM.png

Example of overlap occurring in the current release version of Firefox.

Comment 5

[Jintao Hu]

Attachment: Bug 1651109 - Fix narrate popup position to prevent overlapping. r=niklas,mtigley

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.