Labels for eg-org-select combobox

Bug #1999158 reported by Stephanie Leary
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Confirmed
Medium
Unassigned
3.11
Confirmed
Medium
Unassigned

Bug Description

<eg-org-select> prints an <input> field with a list of org units. For WCAG compliance, this input field must have a <label> tag whose "for" attribute matches the field’s ID attribute. (Note that wrapping the <label> around the <input> is no longer recommended due to inconsistent screen reader & voice controller support, particularly Dragon Naturally Speaking.)

While it is best to make the label visible, there are many places where doing so would require a significant time investment in redesigning the form layout. For these cases, it’s acceptable to give the <label> the Bootstrap "sr-only" class to hide it visually while leaving it available to screen readers.

Most instances of <eg-org-select> did not include an associated <label>. In some instances where a <label> was supplied, it was separated from the <input> by additional layout markup, which we need to preserve for now until we can take the time to redesign the form layouts.

One potentially confusing thing here is that the word "label" is already being used in this component to describe the text of each option. This makes things like {{selected.label}} in org-select.component.ts somewhat ambiguous.

This is a more specific instance of Bug #1998855, but I wanted to separate this in case of discussion and revision.

Branch coming up...

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Branch here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1999158-org-select-labels

My approach:

- Adjust org-select.component.html to print both the <label> and the <input>

- In org-select.component.ts, provide three new input directives:
-- labelText, defaulting to "Library" (as org-family-select.component.html already did; this is localized)
-- labelClass, for additional classes like "sr-only" or layout-related classes
-- labelSuppressed, which can be set to true for instances where the <label> needs to be placed elsewhere in the layout

The rest of the files changed are instances of <eg-org-select>, which have all been updated to either remove adjacent <label> tags that are now printed automatically, or to add labelSuppressed="true" where a <label> existed but was not directly adjacent to the <input> for layout reasons.

tags: added: pullrequest
Andrea Neiman (aneiman)
Changed in evergreen:
status: New → Confirmed
importance: Undecided → Medium
Revision history for this message
Galen Charlton (gmc) wrote :

A couple comments upon initial review of the patch:

- I double-checked and confirmed that the way we extract strings for translation recognizes $localize. Not surprising, as I don't believe that we're doing anything unusual, but I wanted to confirm.
- An i18n-labelText attribute needs to be added anywhere that labelText is used in the templates so that the label can be translated.

Andrea Neiman (aneiman)
Changed in evergreen:
milestone: none → 3.next
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Thanks, Galen! I've updated the branch to catch several instances of missing i18n-labelText.

Revision history for this message
Terran McCanna (tmccanna) wrote :

This patch breaks the holdings view due to an extraneous semicolon added into Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.html

tags: added: signedoff
Galen Charlton (gmc)
tags: removed: signedoff
tags: added: needswork
removed: pullrequest
Revision history for this message
Terran McCanna (tmccanna) wrote :

As of the time of this testing, Evergreen is still using Bootstrap ~4.3.0 so the change from using "sr-only" to "visually-hidden" (which is introduced in Bootstrap 5.0) doesn't work and is adding visual labels to the org selectors in some places where they were hidden before (like on the Angular Staff Catalog page and the Acq PO Search Form)

For work on upgrading to Bootstrap 5.0, see: https://bugs.launchpad.net/evergreen/+bug/2000482

So, would it be best to create a new branch that implements all *but* the visually-hidden changes now and move that forward, or wait to implement any of this fix until Evergreen is updated to Bootstrap 5.0?

Also - the bug in comment #4 will need to be addressed either way.

Removing pullrequest for the time being.

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

I've found the stray semicolon and rebased this branch.

tags: added: pullrequest
removed: needswork
Andrea Neiman (aneiman)
Changed in evergreen:
milestone: 3.next → 3.11-beta
Revision history for this message
Terran McCanna (tmccanna) wrote :

Getting merge conflicts on current master.

tags: added: needsrebase
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Rebased. Thanks, Terran!

tags: removed: needsrebase
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

If you are adding this to a test server, note that I've just updated the branch to clean up a leftover Bootstrap 4 class.

Revision history for this message
Blake GH (bmagic) wrote :

Stephanie: Too many merge conflicts for me to tackle today. Please rebase against master.

tags: added: needsrebase
tags: removed: pullrequest
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Rebased again!

tags: added: pullrequest
removed: needsrebase
Revision history for this message
Terran McCanna (tmccanna) wrote :

I haven't checked every page that this affects, but I did notice some visibility/layout issues on the Library Settings Editor page that appear to be caused by this (see attachments).

Revision history for this message
Terran McCanna (tmccanna) wrote :
Changed in evergreen:
milestone: 3.11-beta → 3.11.0
Revision history for this message
Galen Charlton (gmc) wrote :

The issue in comment #15 isn't due to the patch for this bug; it's a long-standing issue with the Angular library settings editor (as well as its AngularJS predecessor). I've opened bug 2020371 for that one.

Changed in evergreen:
milestone: 3.11.0 → 3.11.1
Changed in evergreen:
milestone: 3.11.1 → 3.12-beta
tags: added: needswork
removed: pullrequest
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.