Limestone rewrite

[Nealium104]

Related to this exploreuk-web-app PR, this pull request is a full UI rewrite of the findingaid. This rewrite is primarily for addressing accessibility concerns.

This PR fixes #7, fixes #8, fixes #9, fixes #10, fixes #22, fixes #24, fixes #33, fixes #34, fixes #35,

[nrsa222]

To do:

• Related to Insufficient color contrast on FA request buttons #9 and Color contrast on select button #35 - Once the button is selected the hover color remains.
• Objects were removed from accordions, but we've decided to temporarily revert change for visual context. Accordion style - https://patternlab.uky.edu/?p=components-zipper-slab, https://patternlab.uky.edu/?p=molecules-zipper
• Empty divs are nested under every class="fa-component"
• "Requests" block is missing option to remove items
• "Requests" block buttons need style cleanup
• "More from this collection" link in TOC is broken
• General cleanup of development helpers and duplicated code, can also remove unused code

[nrsa222]

Fixes #57

[Nealium104]

My last two commits need some explanation.

Accordions

Limestone's accordion components weren't made with the idea that they might be used as nested components, so the js file for jquery-accessible-accordion.js needed to be patched to force controls on only the top level of an expansion/collapse.

While I would prefer making a PR to the original source, it is an MIT license, and there would be multiple steps of approvals to get to production. I've added the file to the repo and then committed my patches in a separate commit for any future reader.

CSS loading/layers

During the CSS work, I got a bit frustrated with the specificity wars between limestone and extra.css, so I read a bit into css layers. Extra.css now imports limestone into its own layer, meaning that all unlayered styles in extra.css now win any conflicting rules, regardless of specificity. All overrides (things that limestone designates as !important) will need to be in the overrides layer due to how !important works in layers.

To accomodate the above change, limestone is now loaded with preload and imported in the extra.css file. The preload would normally cause a flash-of-unstyled-content, but the import rule forces render blocking.

[Nealium104]

Accordion / component rendering

Components are now collapsible only when they have sub-components. Previously if an accordion had a note (scope/bioghist/processinfo), a leaf component was wrapped with an accordion with nothing to expand into. Now leaves should render like other components at the top level without an accordion heading.

We drafted a few versions of the accordions, including versions with vertical guidelines for user wayfinding in deep hierarchies. In alignment with team feedback, we opted for a borderless presentation to keep a clean UI, and added a separator component from UK's Web Platform to better differentiate sibling components.

There is also a bit of JS written to make accordions work correctly; the original limestone component was not made with the intention of nesting.

Images / media

We are now using Limestone's masonry component for image galleries and added a provisional alt text for images that is derived from the title of the component they are found in (e.g., "Garrett Watts (1796-1873) correspondence, 1848 (image 1 of 5)"). This isn't great, but it is something while we have a lot of content without proper descriptors.

Video and audio buttons now ship with icons indicating content type, as well as aria-labels for accessibility purposes. Video sizing is also handled by CSS, instead of hardcoded values.

Header/ footer

There are a few improvements to the styles in the website search box and footer. These will need to be duplicated over to exploreuk-web-app as we currently don't have a way to share that code.

Accessibility Fixes

There are many more accessibility fixes in the work. Aria-labels for buttons, new provisional alt text, limestone overrides, and general sizing fixes. Nested sub-components now use aria-levels for headings past h6.