[SAK-40878] Portal > improve instructions and contrast of Organize Favourites UI (a11y) - Sakai

XML

Word

Printable

Test Plan:
Hide

As any user with more than 2 sites, go to the "Sites" menu, then click the "Organize Favorites" tab

Verify the instructional message makes direct mention of clicking and dragging the hamburger icon

Verify the hamburger icons have appropriate contrast and can easily be seen
Show
As any user with more than 2 sites, go to the "Sites" menu, then click the "Organize Favorites" tab Verify the instructional message makes direct mention of clicking and dragging the hamburger icon Verify the hamburger icons have appropriate contrast and can easily be seen

There are two issues with the "Organize Favourites" UI being addressed here:

The instructions only state that you can click and drag the sites to reorder them. This is not completely accurate: you need to click and drag the hamburger icon to reorder the sites. Clicking on any other part of the "bar" navigates you to the site in question in the background. The user may not understand what's happening here and think the reorder is failing. The instruction message needs to be improved to make specific mention of clicking and dragging the hamburger icon to reorder the sites.
The icon itself has poor contrast with the background, making it difficult to see. For accessibility, it needs to be darker/contrast better with the background

Before:

After: