ampproject / ampproject/amphtml

Lightbox controls do not appear when in a touch environment (mouseless)

Open
#36,896 4 comments 0 reactions 0 assignees View on GitHub
P2: Soon Stale
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

The `` component should create Prev/Next buttons on the left and right side of the screen.
When emulating a phone (or on an actual phone), the controls never appear.

See:
![image](https://user-images.githubusercontent.com/4656974/141329666-26365ea2-1694-4090-a9d4-95c5b3d669f0.png)

---

I believe the root cause is the addition of `i-amphtml-screen-reader`:

https://github.com/ampproject/amphtml/blob/4b32cefe4bd761d27754db5c9bac76cad6a1b199/extensions/amp-lightbox-gallery/0.1/lightbox-controls.js#L64-L72

### Reproduction Steps

1. In Chrome, enable mobile emulation
1. Go to https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-lightbox-gallery&format=websites
2. Click any image and notice that the left/right arrows do not appear

@ampproject/wg-components

Contributor guide

Open the contributing guide

Research direction

Start with extensions/amp-lightbox-gallery/0.1/lightbox-controls.js, especially lines 64–72 where i-amphtml-screen-reader was added. Reproduce the issue using Chrome mobile emulation and the linked AMP Playground example, then verify that amp-lightbox-gallery shows left and right controls in a touch environment without hiding them from sighted users.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.