Consistent styles required for header text in web client

[Kathy Lussier]

In the web client interfaces, we're already seeing some inconsistencies in the way we display text that acts as a heading.

Several interfaces use a heading where the text is styled using the alert-info class. This class provides a light blue background with a font that is darker blue. You can see these headings in:

* Check In
* Pull List for Holds Request
* Renew Items
* Pending Patrons
* Holds Shelf
* Scan Items as Missing Pieces

We have one interface - Verify Credentials - which wraps its heading in <legend> tags.

Another interface - In-House Use - uses a class of eg-grid-primary-label for what I would consider to be the heading. I'm guessing it was being treated as a label for the grid on the page rather than the heading for that particular interface?

Two interfaces use the <h2> tag for its headings:

* Item Status
* Replace Barcode

Looking at webby, there are a few cataloging interfaces that don't have text that serve as a heading:

* Copy/Record buckets
* Retrieve Record by ID
* Retrieve Record by TCN

I'm not considering Dojo interfaces at this time since I would expect those interfaces to be inconsistent. I also am not considering the patron search/record at this time, but we may want to revisit it in the future.

I suggest that all of these interfaces should have headings and that the style should be consistent from one interface to another.

I can work on the code to do so, but I first want to make sure I'm heading in the right direction.

Can we all rally around the style with the light blue background / blue font as a starting point for the style?

Also, to provide some semantic structure to the page, no matter what the style, I would like to wrap all of these headings in <h2> tags. Any objections?

[Terran McCanna (tmccanna)]

I'd like to expand this to include more consistent page headers in general from screen to screen so that it's easier for staff to know where they are (and also to report problems when they run across them).

For instance, on the Item Status page in the web client, it does not display a page title and the "Scan Item" text is so large that it looks like a page title. The regular staff client clearly shows the "Item Status" title as well as the barcode number and current status (see screenshot).

[Kathy Lussier (klussier)]

Removing myself as an assignee for now because I haven't had a chance to work on it. I still plan to work on it, but I wanted to leave it available for somebody else in case they are able to get to it before I can.

[Billy Horn (bhorn)]

So I'm looking at grabbing this card to work on, I just have a couple of quick questions. For wrapping things in h2 tags do you want the size to be that big since that is bigger than the areas currently using the alert-info class. Also I assume the centered flexbox at the top of the pages using alert-info is what is wanted on all the pages for consistency. Finally for the areas using the eg-grid-primary label it seems like adding a new area for the header to these pages is better than changing the current label.

[Dan Wells (dbw2)]

I've started working on this with the intention of nailing something down with the others at the Hack-a-way next week. Sorry for not doing so earlier, but assigning to myself now. I'll release it again after next week if nothing comes of it.

Dan

[Terran McCanna (tmccanna)]

An additional note: using consistent heading tags in the proper places will also improve accessibility.

[Kathy Lussier (klussier)]

Dan, are you still working on this?

[Jane Sandberg (sandbergja)]

Grabbing this one to work on the Angular client.

[Jane Sandberg (sandbergja)]

Here is a branch that ensures that all Angular staff interfaces have the same header at the top: user/sandbergja/lp1474874-consistent-header-ng

This does not touch any dojo or AngularJS interfaces, so they will need separate branches.

Here is the commit message:

This commit ensures that each screen in the Angular staff client uses
the <eg-staff-banner> component to better orient its users.

This commit also gives the eg-staff-banner some <h1> semantics, per
WebAIM's guidance: "Pages should be structured in a hierarchical manner,
generally with one 1st degree headings (<h1>) being the most important
(usually page titles or main content heading)" -- https://webaim.org/techniques/semanticstructure/

To test:

1) Go to [your-server]/eg2/en-US/staff/catalog/search
2) Confirm that there is a header that gives the page title at the top
of the page.
3) Go to an Angular Vandelay page.
4) Confirm that you see a similar header as in step 2.
5) Go to an Angular Administration page.
6) repeat step 4.

[Jane Sandberg (sandbergja)]

I force-pushed a small change to my branch. It removes the "alert" role from the header text. This role doesn't apply here (since it's a page title, not an alert). Including it here causes screen readers to announce it as an alert that requires the user's attention.

[Lynn Floyd (lfloyd)]

"I have tested this code and consent to signing off on it with my name, Lynn Floyd and my email address, <email address hidden> .

[Chris Sharp (chrissharp123)]

Jane,

Could you please rebase this fix to current master? There's a Git conflict in Open-ILS/src/eg2/src/app/staff/share/staff-banner.component.ts that needs resolving.

Adding needsrepatch tag.

Thanks!

Chris

[Jane Sandberg (sandbergja)]

Sure! I rebased user/sandbergja/lp1474874-consistent-header-ng against master.

[Jason Boyer (jboyer)]

I've pushed this to rel_3_4, rel_3_5, and master with the addition of the </eg-staff-banner> closing tag for the browse and cnbrowse components. Thanks everyone!

[Jason Boyer (jboyer)]

That said, this is a partial fix since AngularJS interfaces are likely still in the same shape they were when this was filed. Is anyone looking into that or is the hope that they'll be caught in the Angular transition?

[Jason Boyer (jboyer)]

Ugh, apologies Lynn, I forgot to manually add your signoff to the commit when it went in. Thank you for testing!