Page MenuHomePhabricator

[M] Media Search: Quick view arrow buttons and keyboard shortcuts
Closed, ResolvedPublic

Description

Improving the usability of the quickview by:

  • Making the esc key close quick view
  • Adding arrow buttons at the top right of the image to move to the previous and next image
  • Arrow left and right keys can also move you to the next or previous image

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 14 2020, 4:00 PM
CBogen renamed this task from Media Search: Quick view keyboard shortcuts to [M] Media Search: Quick view keyboard shortcuts.Sep 23 2020, 4:38 PM

Change 632301 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Add keyboard shortcuts to QuickView

https://gerrit.wikimedia.org/r/632301

mwilliams renamed this task from [M] Media Search: Quick view keyboard shortcuts to [M] Media Search: Quick view arrow buttons and keyboard shortcuts.Oct 5 2020, 8:04 PM
mwilliams updated the task description. (Show Details)

Ticket updated to include actual arrow buttons as well to navigate between images quickly

Change 632301 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add controls and keyboard shortcuts to QuickView

https://gerrit.wikimedia.org/r/632301

Tested in betalabs - the arrows look and work fine. Below are my comments on the tasks specs that are marked with exclamation points.

@mwilliams, @AnneT Please review the following - it could be that I just misunderstood the specs or smth.
(1)

Making the esc key close quick view

The esc key works when 'X' is in focus. And it's in focus when the Quickview just opens, i.e.

  • click on any image in the result set on Special:MediaSearch
  • the image will be in the QuickView with 'X' outlined indicating that the focus is on the 'X', e.g.

  • as soon as the arrows are clicked - the focus is gone and the esc button would not work ----

(2)

Arrow left and right keys can also move you to the next or previous image

It's seems that the arrows are not keyboard-focusable (checked on Chrome).

(3)
The arrows do not have any indication that it's the last image in a result set - is it intentional?

Moving to Design QA for review of the previous comment and the final review of the screenshots below.
@mwilliams These screenshots are for illustration only and for your quick look - no issues (at least, from my point of view).

dark image backgroundwhite image backgroundnarrow image

Thanks Elena!

Visually these are looking good, no changes there. We might adjust the design in the future as the white on white isn't perfect but it is functional for now.

@AnneT @Etonkovidova I was hoping that "ESC" closed the quick view no matter the location of the focus when the quick view is open.

I'm not sure the right answer if the UI arrows should be focusable if the keyboard arrows always work. I imagine it would still be helpful for screen readers if they could focus so the UI and capability is known.

Hmmm, I'm seeing the desired action on production, I think I'm confused now :)

https://commons.wikimedia.org/wiki/Special:MediaSearch?type=bitmap&conceptchips=true&q=kitten

Etonkovidova closed this task as Resolved.Oct 21 2020, 10:37 PM
Etonkovidova updated the task description. (Show Details)

Hmmm, I'm seeing the desired action on production, I think I'm confused now :)

https://commons.wikimedia.org/wiki/Special:MediaSearch?type=bitmap&conceptchips=true&q=kitten

Resolved.
I re-checked in production - you're right! And a browser Accessibility check looks good for QuickView arrow buttons.