Clean-up of the existing components/styles for accessibility & theming

[heathergreerklein]

Added per @tdonohue -- task to clean up the existing UI theme. No estimate, requires investigation

Rescoped as of March 4, 2020

Dependencies

• This ticket relates to Support separate themes per community or collection (like XMLUI) #729 (See PRs Add support for dynamic themes #1035 and Make all non-admin page-level components themeable #1042), which makes all (public) components themeable & creates our strategy for theming.
  • Themes are all under /src/themes/, with an easily modifiable template/scaffolding in /src/themes/custom
• This ticket also relates to Simple default theme for UI #727 , which is a basic default theme (of just CSS and images) on top of the changes in this PR.

Scope of Ticket

The goal of this ticket is to cleanup all current source components (under /src/app), including:

1. Ensure Angular components meet basic accessibility guidelines (e.g. alternative labels included, color contrast exists, etc). This should NOT be a deep accessibility analysis (as we hire a firm to do that at a later date), just a resolution of most obvious, highest priority issues based on using automated accessibility tools
2. Per accessibility & readability, we may want to switch to a more readable font. This free font was recommended from within LYRASIS: https://brailleinstitute.org/freefont If possible, I'd recommend we use this font as the default.
3. Ensure Angular components provide consistent layout/look and feel for common components (e.g. OK and Cancel buttons should always appear in the same order and have the same base styles applied). This includes ensuring we have common Bootstrap look and feel to similar Angular components (e.g. lists, buttons, forms, pagination is all implemented similarly across the site)
   • This should include fixing The page title and breadcrumb trail are not set consistently. #976, which is one of these consistency issues.
   • The cleanup steps should be documented as we hope to use them as the start for more formal "DSpace UI style guidelines" for all future components. Initial notes in the PR itself are fine, but we'll want to move them to the Wiki eventually to formalize them.
4. Minor cleanup to CSS or HTML is expected to be necessary to ensure the above two points are met. However, we are not doing a larger style redesign as part of this ticket. Instead, concentrate on the basics, like header and footer and minor cleanup elsewhere.
   • For example, in February we discussed concentrating on header/footer. Notes copied below from Simple default theme for UI #727 (comment)
   • We like the idea of a smaller header (ideally all one line), similar to some of the designs at https://wiki.lyrasis.org/pages/viewpage.action?pageId=204308676 (However, the login/globe can be on that same line instead of in a separate gray bar at the top)
   • We like the idea of having a double footer (as many institutions seem to use that), also in those same designs (see wiki page above). The upper section of the footer can just be "lorem ipsum" but can provide an example for institutions to easily override (or comment out if they just want the smaller bottom footer)
   • One (other) minor change noted is to remove the duplication of the DSpace logo (e.g. on the homepage it appears in the header, the footer and the news section....it may only be needed in the header)

End Result

When completed...

• All components (under /src/app) should have a more consistent layout
• All components should meet basic accessibility guidelines (NOTE: Steering is working on scheduling a more thorough accessibility analysis will be scheduled during or around Testathon, so this just needs to be a "first pass" to do minor cleanup)
• All components should (continue to) use default Bootstrap styles/CSS. (i.e. All overrides/theming of default Bootstrap should be kept to /src/themes, which is out of scope for this ticket)

DSpace UI Theming Guidelines

1. All default HTML / Component code lives in /src/app . It should only use default Bootstrap styling.
2. Any theming work above "default Bootstrap styling" belongs under /src/themes/ in our default Theme. The default Theme should include no HTML changes.

This ticket should NOT touch anything under /src/themes, but it may need to closely watch the work in #1035 and #1042, as we had to change from SCSS to CSS variables (see why in #1035)

[tdonohue]

Turning the old Mantis theme (or something like it) into our new base, Production-ready theme. It should no longer be named Mantis.

[tdonohue]

@artlowel will add an estimate

[artlowel]

Bringing the current mantis theme up to date (taking in to account changes that have been made to the themed components since it was made), making it the default, and theming all the new components will take an estimated 40h

[tdonohue]

Depends on our upgrade to Angular 10: #787 as we'll be switching to Ivy (https://angular.io/guide/ivy) which will result in changes to the current theming strategies.