Improve styling consistency in modals

[ggeisler]

Update 2024: steps needed --

• [ ] Identify any places in GBL and EW where we are using modals that are NOT Blacklight modals
• [ ] Then verify that we are using the DLUX design system in EW (linked above in Figma)

---

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:

• The close icon is inline with the modal title
• The modal heading is an <h3> and the resulting font size is reasonable

Edit: All modal headings should be <h2> but can be styled to match <h3>.

Fixes needed:

• [ ] Heading is <h3> but should be <h2>
• [ ] Modal title should be sentence-case: "View metadata"

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.

[mejackreed]

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.

[jvine]

Maybe we should do a h1->h2->h3 and just style as needed?

Yes.

635 is also related to this.

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.

[ggeisler]

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?

[jvine]

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

1. the /metadata page vs
2. the main show page with the modal overlaid.

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?

[jvine]

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.

[dbranchini]

We should be using the new design system modal:

https://www.figma.com/design/K1syTsalaB1nlRftgOi0Pw/DLSS-Components?node-id=9-933&t=NyQUz1TimcK3ABAl-4

[jcoyne]

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

[dnoneill]

Pretty sure this is fixed with https://github.com/geoblacklight/geoblacklight/pull/1441/commits/ef891c3a7d785a45719c0ac33798ebc49fa8c8cb

[marlo-longley]

Needs review to see what is still relevant given upstream changes -- blocked by BL8 branch.

[marlo-longley]

• [ ] Identify any places in GBL and EW where we are using modals that are NOT Blacklight modals
• [ ] Then verify that we are using the DLUX design system in EW (linked above in Figma)