Open ggeisler opened 4 years ago
Looking into just the heading levels a bit on these. Maybe we should do a h1->h2->h3 and just style as needed?
https://earthworks.stanford.edu/catalog/stanford-hs643sf0606/metadata
This is the case when the modal link opens to a page, but I would argue the headings withing the modal should stay the same as its the same content.
Maybe we should do a h1->h2->h3 and just style as needed?
Yes.
Structure is currently:
<h1>EarthWorks Geospatial Catalog
<h2>(Missing heading)
<h3>View Metadata
<h1>Zones of Benefit: Santa Cruz County, California, 2015
Better:
<h1>EarthWorks Geospatial Catalog
<h2>View Metadata
<h3>Zones of Benefit: Santa Cruz County, California, 2015
<h4>Identification Information
and style appropriately.
I trust you know more than me, and I wasn't really trying to definitively solve the heading issue with this ticket, but I'm confused by the suggestion. I see the structure of the page as:
<h1>EarthWorks Geospatial Catalog
<h2> HOV Lanes, San Francisco Bay Area, 2002
<h3> Web Map Service (WMS)
<h2>Tools
<h2>Downloads
<h2>Export formats
And since View metadata
is nested within Tools
it seem like it should be one level lower?
Ah. Thanks for asking that, it pointed out something I'd missed.
Modal content is not embedded in the DOM at the point where its trigger exists. The dialog exists outside the <main>
section, either above or below. When the modal is open, the user hears only the content of the modal, though they can also access the complete heading structure. I don't know if it's a rule, but it's an expectation/pattern that the modal heading starts at <h2>
.
There's also a difference between the overall structure on
On the show page, because we place the modal above the <main>
section, the <h1>
occurs after the modal. Since it's an sr-only
heading, I wonder if we can move the <h1>
higher in the DOM so it occurs before any content?
For the context of this ticket: modal dialog headers should be consistently <h2>
, regardless of where the trigger that opens the modal falls in the page structure.
The inconsistency I mentioned above (/metadata vs show page) is because of an issue with the <h1>
that is documented in a separate issue #690.
We should be using the new design system modal:
There is a modal view_component in Blacklight that we should consider using: https://github.com/projectblacklight/blacklight/blob/main/app/components/blacklight/system/modal_component.rb
Pretty sure this is fixed with https://github.com/geoblacklight/geoblacklight/pull/1441/commits/ef891c3a7d785a45719c0ac33798ebc49fa8c8cb
Needs review to see what is still relevant given upstream changes -- blocked by BL8 branch.
Update 2024: steps needed --
There are several different modal windows that can be opened in EW and they aren't very consistent in their styling. We should be able to improve their consistency.
JV edited to clarify heading corrections.
View metadata modal
This one is probably the closest to what we should aim for:
<h3>
and the resulting font size is reasonableEdit: All modal headings should be
<h2>
but can be styled to match<h3>
.Fixes needed:
<h3>
but should be<h2>
Web services modal
[ ] Heading is
<h1>
but should be<h2>
<h3>
to be consistent with the View metadata window for font size and accessibility purposes (@jvine might have other suggestions for the best heading level for the modals, but I think they should at least be consistent and not<h1>
s).[ ] The modal header should have a bottom border similar to the View metadata modal
[ ] We should not show the last bottom border since there is no modal footer
Email this modal
This one might be complicated by the fact it (I believe) is inherited from Blacklight, but:
[ ] Modal title should be sentence-case: "Email this"
[ ] Heading is
<h1>
but should be<h2>
<h3>
to be consistent with the View metadata window for font size and accessibility purposes[ ] The close icon should be inline with the modal title, rather than on its own row
Preferred citation modal
New to EW - see #594. Not sure if we will use the Blacklight citation modal, or create one from scratch, but either way, it should match the modals discussed above in heading level, use of sentence case for the modal title, and displaying the close icon inline with the modal title.