[M] Improve QuickView accessibility features
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	AnneT
	Jul 15 2020, 9:22 PM

Description

As part of the initial QuickView implementation, Eric did a lot of work to enable keyboard navigation to, from, and within the Quickview component. There are a few things we could do to make this even better:

Better focus styles for close button. Currently, we're using the default outline, which looks a little awkward around the round button. @mwilliams is considering alternate designs here.
The call to action button should be a link since it takes the user to a different page. We've considered adding a LinkButton base component, which is a link styled to look like a button. That said, it's typically not ideal for UX to show the user a button when they're actually clicking on a link, so perhaps we should reconsider
Review the w3 spec on asides and see if we need to do anything else to ensure the QuickView UX works via screen reader

Acceptance criteria:

Close button has visually-hidden label or title and visible focus styles
More Details button is a link styled like a button
Code meets standards set in the w3 spec

COVID-19 Deployment Criteria

Can you roll back this change without lasting impact? - Yes
1. A recovery plan is required as this will help identify our capacity for recovering from the failure
2. THIS IS A KEY QUESTION, if you can’t answer it, you shouldn’t deploy

Is specialized knowledge required to support this change in production? If so, are there multiple people with this knowledge? - No specialized knowledge needed

Is there a way to increase confidence about the correctness of this change?
1. Reviews (Design, Code, etc)
2. Testing coverage (unit tests, integration tests)
3. Manual testing (e.g. Beta, vagrant, docker)

Details

	Subject	Repo	Branch	Lines +/-
	Improve QuickView accessibility	mediawiki/extensions/WikibaseMediaInfo	master	+66 -25

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		mwilliams	T256158 [Epic] Add Quickview feature to MediaSearch
		Resolved		Etonkovidova	T258110 [M] Improve QuickView accessibility features

Event Timeline

AnneT created this task.Jul 15 2020, 9:22 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 15 2020, 9:22 PM

AnneT moved this task from Incoming to Doing on the Structured-Data-Backlog (Current Work) board.Jul 16 2020, 8:56 PM

AnneT updated the task description. (Show Details)Jul 16 2020, 8:59 PM

egardner added a parent task: T256158: [Epic] Add Quickview feature to MediaSearch.Jul 22 2020, 5:02 PM

CBogen added a project: SDAW-MediaSearch (MediaSearch-Alpha).Jul 22 2020, 5:55 PM

AnneT renamed this task from Improve keyboard navigation of media search quickview panel to Improve QuickView accessibility features.Aug 13 2020, 7:50 PM

AnneT updated the task description. (Show Details)

AnneT moved this task from Doing to Needs Design on the Structured-Data-Backlog (Current Work) board.

AnneT edited projects, added SDAW-MediaSearch (MediaSearch-Beta); removed SDAW-MediaSearch (MediaSearch-Alpha).

AnneT added a subscriber: mwilliams.

Better focus styles for close button. Currently, we're using the default outline, which looks a little awkward around the round button. @mwilliams is considering alternate designs here.

Currently it looks like we are making a square blue border around the X circle. Could we try a border around the circle to make it stand out a little less?

Screen Shot 2020-08-18 at 12.26.11 PM.png (1×1 px, 2 MB)

The call to action button should be a link since it takes the user to a different page. We've considered adding a LinkButton base component, which is a link styled to look like a button. That said, it's typically not ideal for UX to show the user a button when they're actually clicking on a link, so perhaps we should reconsider

Good point! Technically using a button here is incorrect but I really think this CTA needs to have a bit more visual weight and to be higher up in the layout hierarchy since this a new interaction type and don't want to hide how to get to the file page since that has been the behavior for many years.

That being said, a blue bold link style could get the job done. Here are a few options from text link to primary progressive. Initially we didn't want to use the blue button since we try to only have one blue button per page but I think the search button is in a very different context and we could use it if we wanted.

@mwilliams Thanks for weighing in and for the design options!

For the focus style: I think the round blue border is perfect.

For the "more details" link: I definitely see the reasoning for styling this like a primary button. @egardner, I think I'm going to just set up a one-off link that looks like a button rather than creating a new LinkButton component as we had previously discussed since this is a pattern we will rarely use.

AnneT moved this task from Needs Design to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.Aug 25 2020, 8:26 PM

CBogen renamed this task from Improve QuickView accessibility features to [M] Improve QuickView accessibility features.Aug 26 2020, 4:19 PM

CBogen moved this task from Ready for Estimation to Doing on the Structured-Data-Backlog (Current Work) board.

Change 622658 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Improve QuickView accessibility

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

gerritbot added a project: Patch-For-Review.Aug 26 2020, 8:02 PM

AnneT moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Aug 26 2020, 8:05 PM

Change 622658 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Improve QuickView accessibility

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

egardner moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Sep 3 2020, 3:37 PM

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.8; 2020-09-08).Sep 3 2020, 4:00 PM

Maintenance_bot removed a project: Patch-For-Review.Sep 3 2020, 4:10 PM

Etonkovidova updated the task description. (Show Details)Sep 4 2020, 11:51 PM

Etonkovidova moved this task from To Do to Verify on Production on the Structured Data Engineering board.

Etonkovidova moved this task from Needs QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.Sep 5 2020, 12:02 AM

@Etonkovidova, would you be willing to test this again on production? I was able to verify the close and more details buttons, but I don't have the right tools to verify w3 accessibility compliance.

CBogen reassigned this task from AnneT to Etonkovidova.Sep 15 2020, 4:11 PM

In T258110#6448684, @CBogen wrote:

@Etonkovidova, would you be willing to test this again on production? I was able to verify the close and more details buttons, but I don't have the right tools to verify w3 accessibility compliance.

Re-checking (wmf.8) - Images` filter page result has lower score - 86 than Audio, Video, and Categoriespages -94. The lower score is mainly based on "Image elements do not have [alt] attributes" warning.

Manually check seems to be ok; aside element is present for Quickview.

I'm marking this task as Resolved and add it to my follow-up list of tasks related to accessibility.

	F32187834: Screen Shot 2020-08-18 at 12.26.11 PM.png
	Aug 18 2020, 6:43 PM

[M] Improve QuickView accessibility featuresClosed, ResolvedPublicActions