Labels for eg-org-select combobox

[Stephanie Leary]

<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...

[Stephanie Leary (stephanieleary)]

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.

[Galen Charlton (gmc)]

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.

[Stephanie Leary (stephanieleary)]

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

[Terran McCanna (tmccanna)]

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

[Terran McCanna (tmccanna)]

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.

[Stephanie Leary (stephanieleary)]

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

[Terran McCanna (tmccanna)]

Getting merge conflicts on current master.

[Stephanie Leary (stephanieleary)]

Rebased. Thanks, Terran!

[Stephanie Leary (stephanieleary)]

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.

[Blake GH (bmagic)]

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

[Stephanie Leary (stephanieleary)]

Rebased again!

[Terran McCanna (tmccanna)]

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).

[Galen Charlton (gmc)]

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.

[Stephanie Leary (stephanieleary)]

After working on labels for many other components, I've rethought the approach to this one a little. I've eliminated the labelSupressed input in favor of just using the visually-hidden class where needed. This sometimes results in two <label> tags existing in the DOM, one hidden and one visible elsewhere on the page, but this is valid HTML and doesn't cause any accessibility issues.

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

[Blake GH (bmagic)]

Merge conflict against main today: Open-ILS/src/eg2/src/app/staff/share/holds/grid.component.html

please rebase

[Stephanie Leary (stephanieleary)]

Rebased. Thanks, Blake!

[Terran McCanna (tmccanna)]

Sorry, Stephanie - merge conflicts again today!

[Stephanie Leary (stephanieleary)]

No problem, Terran! This branch gets out of sync easily, since org selectors are on so many staff screens. I've rebased it.

[Terran McCanna (tmccanna)]

Thanks Stephanie!

Fix committed to current main for 3.12. Because the interfaces have changed so much, it is not feasible to backport.