Workstation admin: "Workstations Registered With This Browser" dropdown has no accessible name

Bug #2002362 reported by Jane Sandberg
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Fix Released
Medium
Unassigned

Bug Description

Expected behavior:

On the workstation registration screen, the text "Workstations Registered With This Browser" should be programmatically with the <select> element.

Actual behavior:

The <select> is not associated with any label, so assistive technologies don't know what to call it. VoiceOver, for example, reads it as "collapsed popup menu".

Steps to reproduce:
* In Firefox, navigate to the workstation registration screen
* Right-click on the dropdown
* Note that in the name column, the combobox's name is an empty string, as opposed to the expected "Workstations Registered With This Browser".

An easy way to fix this would be to:
1. add an id to the <select>
2. Wrap the "Workstations Registered With This Browser" in a <label for="id_you_just_added_to_the_select"></label>

Note that this affects both the AngularJS and Angular clients.

Revision history for this message
Dawn Dale (ddale) wrote :

Hi Jane, I am not seeing this behavior in 3.10.0. Am I missing something.

Changed in evergreen:
status: New → Confirmed
Revision history for this message
Terran McCanna (tmccanna) wrote :

I can confirm by looking at the dropdown menu in the browser console that the text is not associated with the SELECT element. Patch here:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp2002362_label_for_registered_workstations

ANGULARJS:

I applied the label to "Workstations Registered With This Browser."

That had the side effect of making that line bold, so the first line (Register a new Workstation For This Browser) looked weird because it wasn't bolded. Since it's not a label, I just went ahead and made it bold to match.

I also added an h2 title to make it consistent with the other Administration > Workstation pages.

ANGULAR:

I applied the label to "Workstations Registered With This Browser."

Note - the Angular workstation screen isn't available through a menu, but you can get to it by changing the URL to (domain)/eg2/en-US/staff/admin/workstation/workstations/manage

tags: added: pullrequest
Revision history for this message
Dawn Dale (ddale) wrote :

Hi Jane,
I apologize, I misunderstood the bug. I am glad Terran could verify it.
Thanks,

Revision history for this message
Galen Charlton (gmc) wrote :

Upon reviewing the patch, I see an inconsistency: it makes "Register a New Workstation For This Browser" a label on the Angular side (specifically, the OU selector) but not the AngularJS side.

I feel that it should be more consistent, and if "Register a New Workstation For This Browser" is to be a label, it should probably be bound to both of the input controls needed to register a new workstation (via grouping roles, a fieldset, or maybe a wrapping form) rather than just the OU selector.

Changed in evergreen:
assignee: nobody → Terran McCanna (tmccanna)
assignee: Terran McCanna (tmccanna) → nobody
tags: added: needswork
removed: pullrequest
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

I've updated Terran's branch to match the org unit selector changes we just made in bug 1999158. All fields on both AngularJS and Angular screens should now have visible labels, and if you run Axe DevTools or WAVE on them, you should see no form label errors reported.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2002362_label_for_registered_workstations-updated

tags: added: pullrequest
removed: needswork
Changed in evergreen:
milestone: none → 3.12-beta
assignee: nobody → Terran McCanna (tmccanna)
Revision history for this message
Terran McCanna (tmccanna) wrote :

I'm getting a merge conflict when I try to apply this to main today.

Changed in evergreen:
assignee: Terran McCanna (tmccanna) → nobody
tags: added: needsrebase
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Thanks, Terran! That org selector is a branch killer. Rebased, forced an update.

tags: removed: needsrebase
Changed in evergreen:
assignee: nobody → Terran McCanna (tmccanna)
Changed in evergreen:
milestone: 3.12-beta → 3.12-rc
Revision history for this message
Terran McCanna (tmccanna) wrote :

Stephanie, it applied cleanly to main today and the Angular page looks good but the Register button on the AngularJS page isn't aligned properly (screenshot attached).

Changed in evergreen:
assignee: Terran McCanna (tmccanna) → nobody
tags: added: needswork
removed: pullrequest
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Thanks, Terran! I've fixed the alignment and rebased the Angular screen to play nice with the re-revised org unit labels. Same branch: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2002362_label_for_registered_workstations-updated

tags: added: pullrequest
removed: needswork
Changed in evergreen:
assignee: nobody → Terran McCanna (tmccanna)
Revision history for this message
Terran McCanna (tmccanna) wrote :

Thanks, Stephanie! Gave it a final test and merged for 3_12

Changed in evergreen:
status: Confirmed → Fix Committed
tags: added: signedoff
Changed in evergreen:
assignee: Terran McCanna (tmccanna) → nobody
Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.