Fix record tab heading level

[maccabeelevine]

From #3039 Accessibility: Moravian Library Report

Pick up location label

Details from https://docs.google.com/document/d/1qII8IRWOk0eP3er-91C5clhTfQq92yPkUbvAtq3xdNU/edit:

LH: Only a heading with location name should be 2nd level, just like the "Similar Units" heading, not 3rd.

[maccabeelevine]

I changed the holdings tab h3 headings to h2s. I agree that's correct since there is no other h2 in between.

In theory I would have said this is wrong though, that the actual tab names should be auto-generated sr-only h2s displayed at the top of each tab's content block. The pattern on the w3.org site is maybe a compromise, it uses aria-labelledby to associate each tab-pane with the text that names the tab in its button. I implemented that for consideration. I did not do any screen reader testing.

[demiankatz]

Thanks, @maccabeelevine! This all makes sense to me, though I'll let the more front-end-facing people weigh in before providing an approval.

The obvious side effect is that headings in tabs are going to be visibly larger. I haven't looked to see how dramatic this is, but is it possible we'll want to add some styling to compensate?

[maccabeelevine]

The obvious side effect is that headings in tabs are going to be visibly larger. I haven't looked to see how dramatic this is, but is it possible we'll want to add some styling to compensate?

@demiankatz Yeah it's a fair question. But I see there are existing h2 headings in some other tabs, like MARC in the Staff View, or Similar Items in Similar Items, and they have no special styling that I can see. So if it's needed to tweak that we should do so globally i.e. .tab-pane > h2. I'm agnostic whether it's needed.

Edit: the difference at full screen with appears to be 20px to 23px.

[demiankatz]

Good point, @maccabeelevine, if other tabs are already using h2 then there's a precedent and this just makes things more consistent. I don't have strong feelings about text size in any case, but just wanted to be sure the issue was surfaced. I'm in favor of taking no special action unless somebody complains about the aesthetics. :-)

[demiankatz]

Thanks, @xmorave2!