VPR-104 fix(a11y): Students and Directory accessibility improvements (PR 5 of 6)#140
Open
VPR-104 fix(a11y): Students and Directory accessibility improvements (PR 5 of 6)#140
Conversation
There was a problem hiding this comment.
Pull request overview
This PR is part of the VPR-104 accessibility workstream, improving Students and Directory UI accessibility by correcting heading structure, adding descriptive image alt text, improving control labeling, and adding route-change focus management.
Changes:
- Add descriptive
alttext for student/user photos across Vue PhotoGallery components and Students/Directory Razor views. - Promote key page headings from
h2toh1and update Directory card markup/styles to avoid using heading tags for visual styling. - Add accessibility enhancements:
aria-labelon PhotoGallery view toggles,role="none"for non-clickable left-nav items, and route focus management viauseRouteFocus.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| web/wwwroot/css/directory.css | Switch Directory typography styling from heading selectors to semantic class selectors. |
| web/Areas/Students/Views/StudentClassYearImport.cshtml | Promote page heading to h1; add bound alt text for student thumbnails. |
| web/Areas/Students/Views/StudentClassYear.cshtml | Promote page heading to h1; add bound alt text for student avatars in table. |
| web/Areas/Directory/Views/Table.cshtml | Promote page heading to h1. |
| web/Areas/Directory/Views/Card.cshtml | Promote page heading to h1; replace card heading hierarchy with class-based elements; add alt text for profile image. |
| VueApp/src/Students/router/index.ts | Register route-change focus management via useRouteFocus(router). |
| VueApp/src/Students/pages/StudentsHome.vue | Promote page heading to h1. |
| VueApp/src/Students/pages/StudentClassYearImport.vue | Promote page heading to h1; make student photo alt text descriptive. |
| VueApp/src/Students/pages/StudentClassYear.vue | Promote page heading to h1; make student photo alt text descriptive. |
| VueApp/src/Students/pages/PhotoGallery.vue | Add aria-label to view toggle buttons (grid/list/print). |
| VueApp/src/Students/components/PhotoGallery/StudentPhotoDialog.vue | Add bound alt text for dialog image. |
| VueApp/src/Students/components/PhotoGallery/StudentPhotoCard.vue | Add bound alt text for student photo card image. |
| VueApp/src/Students/components/PhotoGallery/PhotoList.vue | Add bound alt text for list view images. |
| VueApp/src/layouts/LeftNav.vue | Add role="none" for non-clickable nav items. |
rlorenzo
force-pushed
the
VPR-104-accessibility-audit-Students-Directory
branch
3 times, most recently
from
9793a7d to
a4a73dc
Compare
rlorenzo
force-pushed
the
VPR-104-accessibility-audit-Students-Directory
branch
from
34e2deb to
45c4221
Compare
rlorenzo
force-pushed
the
VPR-104-accessibility-audit-Students-Directory
branch
5 times, most recently
from
a225431 to
daa856a
Compare
…(PR 5 of 6) - Fix C1: add descriptive alt text to student photos in PhotoList, StudentPhotoCard, StudentPhotoDialog, StudentClassYear, StudentClassYearImport - Fix C5: h2 → h1 on StudentsHome, StudentClassYear, StudentClassYearImport, Directory Card and Table views - Fix C5: replace invalid heading hierarchy in Directory Card.cshtml (h5→h1→h2→h3→h4) with semantic div classes - Fix S6: add aria-label to PhotoGallery view toggle buttons - Fix S11: add role="none" to non-clickable LeftNav q-items - Add route focus management via useRouteFocus composable - Update directory.css to use class selectors instead of heading elements - Add alt text to student photos in Razor views
… Students+Directory - Replace color="red" with color="negative" (Merlot) on delete button and Ross badges - Replace color="orange" with color="warning" text-color="dark" on left-reason badges - Replace color="green" with color="positive" on Directory search toggles - Replace color="blue" with color="primary" on Directory ID toggles - Migrate 2 error banners in PhotoGallery to StatusBanner component - Fix text-grey contrast in PhotoGallery empty states (text-grey → text-grey-8) - Remove commented-out debug toggle from Directory Card view - Axe-core verified: zero violations on all 4 routes
- Add ViewData["Title"] to Students Razor views - Add accessible label to avatar table column
Directory (Card.cshtml, Table.cshtml): - Add aria-label to all icon-only action links (User Info, Email, Emulate, AAUD Check, ID Check, MSO, UCPath, Alt Photo) including the user's name for context - Replace raw <img> with q-img + error slot to avoid broken-image alt text overflow when photos fail to load - Descriptive column labels (Photo, IDs, Detail, Actions) - Match toggle colors (primary for both Search all of UCD and Display IDs) - Email tooltip includes @ucdavis.edu Directory CSS (directory.css): - Non-SVM card header background changed to dark grey (#666) so white icons have proper contrast; light grey bg was invisible - Icon color defaults to white; SVM variant keeps existing light blue for consistency on dark blue header StudentPhotoCard: - Use text-grey-7 (#757575, 4.6:1 on white) for secondary text lines instead of the failing text-grey (#9e9e9e, 2.7:1)
rlorenzo
force-pushed
the
VPR-104-accessibility-audit-Students-Directory
branch
from
daa856a to
fb75859
Compare
Remove duplicate v-if on ID Check anchor and fix Alt. Photo URL, which referenced an undefined props.row.mailId in the v-for scope, was missing `=` after iamID, and passed an unencoded user.name.
QImg has no `props` prop — passing the QTable slot props object rendered it as a stringified attribute on the DOM.
AAUD/ID/MSO links were gated only on the `ids` toggle, but when results come from the LDAP-only path (UCD search), mothraId, loginId, or mailId can be empty, producing malformed URLs.
Replace the non-existent user.currentAffiliate check with gates on the iamId / mailId fields that the URL actually consumes. Apply the same iamID= / encodeURIComponent fixes to the Table view as were already applied to the Card view.
The hard-coded prod host broke the photo in non-prod environments. Matches the helper-based pattern already used in StudentClassYear.
- StudentClassYear: add "Photo" header to avatar column, add q-mr-sm between class year buttons so the duplicate-year rows don't abut. - PhotoGallery list view: set role="none" on the q-item inside q-td so Quasar's implicit listitem role doesn't trip the aria-required-parent axe rule (the q-item is being used as a layout primitive, not a real list item).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Alt Text
Heading Hierarchy
Document titles (2.4.2 Page Titled)
ViewData["Title"]to all Students Razor views (Index, StudentClassYear, StudentClassYearImport)Route Focus
Icon-Only Buttons (4.1.2 Name, Role, Value)
aria-labelto all 8 icon-only action links (User Info, Email, Emulate, AAUD Check, ID Check, MSO, UCPath, Alt Photo) — labels include the user's name for context so screen readers announce who the action targetsaria-labelto person / emulate icon buttonsDirectory photo fallback
<img>in Directory Card/Table with<q-img>+#errorslot showing a grey placeholder with a person icon. Previously, when photos failed to load (mixed-content blocking on the HTTP photo endpoint), the browser rendered the alt text at default font size inside the 87px avatar, producing overflowing textEmpty table column labels (1.3.1 Info and Relationships)
ARIA Roles
role="none"to non-clickable LeftNav q-items (4.1.2 Name, Role, Value)Color Contrast (1.4.3 Contrast (Minimum))
text-grey→text-grey-8on PhotoGallery empty state messagestext-grey(#9e9e9e, 2.7:1 on white — fails AA) →text-grey-7(#757575, 4.6:1 — passes AA for small text)#adb5bd→#666so white icons are actually visible; icon color default changed from invisible#a4b5c8on grey to white, with SVM variant preserving the existing light-blue-on-dark-blue look@ucdavis.edusuffix for clarityBrand Colors
color="primary"(Aggie Blue) for visual consistencyStatusBanner Migration
CSS
Cleanup