Labels for eg-org-select combobox
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.
This is a more specific instance of Bug #1998855, but I wanted to separate this in case of discussion and revision.
Branch coming up...
Changed in evergreen: | |
status: | New → Confirmed |
importance: | Undecided → Medium |
Changed in evergreen: | |
milestone: | none → 3.next |
tags: | added: signedoff |
tags: | removed: signedoff |
tags: |
added: needswork removed: pullrequest |
Changed in evergreen: | |
milestone: | 3.next → 3.11-beta |
tags: | added: needsrebase |
tags: | removed: pullrequest |
Changed in evergreen: | |
milestone: | 3.11-beta → 3.11.0 |
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 |
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: select. component. html already did; this is localized)
-- labelText, defaulting to "Library" (as org-family-
-- 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.