Web Content: Custom icon cannot be selected with keyboard.

Description

Keyboard users cannot select a custom icon for a Web Content tool. The Choose a custom icon "menu" is completely skipped over when tabbing on the page, and if you open its dialog by clicking on the menu with a mouse, you can't use it to select an icon.

The icon selector "menu" also does not have any text directly on it, which is confusing.

Screencast video illustrating the issue.

Activity

Andrea Schmidt April 20, 2020 at 6:54 PM

Tested on RC03: https://qa2-us.nightly.sakaiproject.org, build: 20.0-rc03

I can search and select a custom icon, hit enter and it displays there, but the next tab takes me to the "Gateway" link instead of "Update Options".

Tested 21x: https://trunk-mysql.nightly.sakaiproject.org, build: 75ac8881 - same behavior

Added 20 to affects for https://sakaiproject.atlassian.net/browse/SAK-43492#icft=SAK-43492

Matthew Jones March 29, 2020 at 9:14 PM
Edited

QA: I think this should get QA'd and merged. I plan to also fix the focus when tabbing out (or selecting an icon) as the focus goes to a (seemingly) random place. That feels like a new issue and created https://sakaiproject.atlassian.net/browse/SAK-43492#icft=SAK-43492 for this, but this component looks better and seems to at least work for keyboard selection. 

Would like some feedback though! Thanks!

Matthew Jones March 15, 2020 at 2:02 PM

FYI The same picker is used in LTI and Site Manage. I'm going to see about replacing all of these. 

Matthew Jones November 17, 2019 at 11:38 AM

This looks like a library that we'd picked up and was modified slightly by Dr. Chuck

https://fonticonpicker.github.io/

The version we have is from 2015 and there is an updated version but it still doesn't look like it has keyboard accessibility to trigger the dialog and even if you did that, there's no keyboard accessibility within the dialog. 

This one is keyboard accessible https://github.com/itsjavi/fontawesome-iconpicker

It looks about the same. The official demo doesn't work but I forked it and the demo there works. https://jonespm.github.io/fontawesome-iconpicker/

I think inside the Dropdown actually works the best.

The escape button currently doesn't work to close the dialog, I'll see if I can fix that as it's a little annoying to test otherwise.

Fixed

Details

Priority

Fix versions

Assignee

Reporter

Environment

https://experimental.nightly.sakaiproject.org/portal/ Version 77.0.3865.120 (Official Build) (64-bit)

Created October 11, 2019 at 2:57 PM
Updated April 20, 2020 at 6:54 PM
Resolved March 28, 2020 at 3:35 AM

Flag notifications