orangewolf commented 1 year ago

ref:

407
393

In addition to this ticket, please create an issue for this in Hyku and link it to this ticket.

Summary

The admin dashboard failed the accessibility audit because, at the tested dimensions described below, a website should adjust itself to be viewable vertically. A user should be able to see and use a vertical scrollbar, but not a horizontal one.

We've determined that this currently does not work because the admin dashboard has a left sidebar that does not collapse by default. Once we manually collapse the sidebar, it passes the audit test.

Some solution options may include:

[ ] When visiting the admin dashboard page, the side bar should be collapsed by default. All users must manually expand the sidebar to view its options.

Or, with CSS the above would only happen after certain dimensions are met. (please see the notes section)

For inspiration + things to consider:

Gitlab passes this requirement! Notice how the left side bar is collapsed, but when you hover over the icons the additional options are revealed.

Currently, when you hover over the collapsed icons in hyku, the user really has no idea what their significance is. See demo: https://share.getcloudapp.com/xQuw9yKb

Acceptance Criteria

~~[ ] Viewing the admin dashboard at 320 CSS pixels (see notes section) should pass the accessibility audit. The website should be responsive and align it self for vertical viewing.~~
~~[ ] no horizontal scrolling should be available~~
~~[ ] Please reference this document for additional details, section 1.4.10 Reflow: Report for https__test.hykucommons.org.pdf~~
[x] Collapse sidebar at a specific width
[x] Add title on hover over to the sidebar icons

Testing Instructions (On desktop only)

Visit the UTK staging site.
Login as an admin user.
Go to the dashboard.
Adjust your viewing settings to meet the dimensions described below.
Check the Acceptance Criteria for pass/fail

How to adjust settings:

right-click inspect to adjust width: https://share.getcloudapp.com/Wnu7ARdA
Zoom to 400% by holding command btn and + several times. Hold cmd and - to zoom out.

Notes

This ticket has been created as a result of an accessibility audit: ref: Report for https__test.hykucommons.org.pdf

NOTE: The following pages were tested at 320 CSS pixels, which is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom.

DiemBTran commented 1 year ago

Linked items:

EPIC: Accessibility Improvements

DiemBTran commented 1 year ago

Kirk June 2022:

Potentially reach out to Samvera community to see if they have a solution for this.

DiemBTran commented 1 year ago

LaRita June 2022:

Notes regarding design:

If we set the selection to minimize automatically, then we probably want some sort of hover menu rather than the current dropdown menus for standard sized views. Additionally, we need to make sure that if it starts as minimized, once it is toggled, it remains maximized until the user minimizes it again. Currently just removing the maximized keyword isn’t adequate.

Using hover menus means we need a different menu structure for touch screens where hover isn’t an option. The ticket shows gitlab menus as an example. If you view those on a phone, they switch to a hamburger menu structure rather than the hover they use for standard views.

DiemBTran commented 1 year ago

Shana - June 2022

Discussed during team planning mtg:

[ ] At a certain size cut off/media query, sidebar menu should be collapsed and stay collapsed.
- [ ] investigate the query cut off responsible for turning the top bar into a hamburger icon. (760px wide and below). Use the same.
- [ ] how does the top bar go back in forth between an expanded and hamburger?
- [ ]
- [ ]
[ ] Once collapsed, only icons will show. On hov, display the text of that menu icon.