Maniphest T192315

[Bug] Page's change language button focus padding is truncated
Closed, DeclinedPublic
Actions

Assigned To

None

Authored By

	• Niedzielski
	Apr 16 2018, 8:10 PM

Description

Steps to Reproduce

Visit https://en.m.wikipedia.org/wiki/Dog
Right click the change language button and select inspect
Right click the parent li element and force the state to :focus

Expected Results

Change language button has focused padding consistent with the download PDF button

Actual Results

Change language button's focused padding is truncated on one side

Environments Observed

enwiki

Browser Version

Chromium v65.0.3325.181 (Nexus 6P simulator)

OS Version

Ubuntu v17.10 64b

Device Model

Desktop

Device Language

English

Event Timeline

• Niedzielski created this task.Apr 16 2018, 8:10 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 16 2018, 8:10 PM

• Niedzielski updated the task description. (Show Details)Apr 16 2018, 8:12 PM

• Niedzielski moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.

@alexhollender - feel free to increase priority if necessary

Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.Aug 16 2018, 9:38 PM

@Niedzielski in what way were you thinking of this as a bug? In terms of design/alignment it looks correct to me.

In terms of the CSS:

the button has the correct padding
the button is floated left, and the container is set to overflow:hidden, so the padding to the left of the button is clipped

That seems like a fine way to achieve the desired layout to me

@alexhollender, if a user is tabbing through a page, each interactive element should light up uniformly. Visually, the change language button as it is now appears asymmetrical, clipped, and inconsistent with the other buttons. Physically, the change language button hit area is smaller so it's harder to tap the change language buttons.

@Volker_E curious what your thoughts are here? What is the proper way to handle this?

• alexhollender_WMF moved this task from Needs analysis to Designing/discussing right now on the Web-Team-Backlog (Design) board.Aug 23 2018, 4:42 PM

• alexhollender_WMF moved this task from Designing/discussing right now to Queue on the Web-Team-Backlog (Design) board.Sep 24 2018, 3:25 PM

Jdlrobson moved this task from Backlog to Team: web on the MobileFrontend board.Jul 24 2020, 3:00 PM

Jdlrobson edited projects, added Web-Team-Backlog, MinervaNeue; removed Web-Team-Backlog (Design), MobileFrontend.Jun 17 2021, 9:36 PM

Jdlrobson moved this task from Backlog to TODO on the MinervaNeue board.Jul 21 2021, 7:36 PM

Jdlrobson moved this task from Needs Prioritization to Not ready to estimate on the Web-Team-Backlog board.Aug 10 2021, 8:57 PM

ovasileva moved this task from Not ready to estimate to Triaged but Future on the Web-Team-Backlog board.Aug 10 2021, 9:13 PM

Jdlrobson moved this task from Triaged but Future to Needs Prioritization (Tech) on the Web-Team-Backlog board.Aug 25 2021, 10:57 PM

Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.

@Volker_E @alexhollender given the 3 year silence, and Alex's earlier comment closing this out. Let me know if we need to reconsider. T

Given upstream changes, the focus area is consistent for all these menu items, although the border left and right are absent. Please open a specific task for that if we need to consider a follow up, but personally I'd rather focus efforts on getting us onto WVUI and fixing it there.

Screen Shot 2021-08-25 at 3.59.55 PM.png (146×370 px, 5 KB)

	F34620082: Screen Shot 2021-08-25 at 3.59.55 PM.png
	Aug 25 2021, 11:01 PM

	F17014601: Screenshot from 2018-04-16 15-08-44.png
	Apr 16 2018, 8:10 PM

	F17014607: Screenshot from 2018-04-16 15-09-48.png
	Apr 16 2018, 8:10 PM

[Bug] Page's change language button focus padding is truncatedClosed, DeclinedPublicActions