search

wvuweb / hammer

A tool for CleanSlate theme development
https://cleanslate.wvu.edu
4 stars 2 forks source link

Move hammer toolbar to the bottom of the document to solve an accessibility error #63

Closed adamjohnson closed 5 years ago

adamjohnson commented 5 years ago

Steps to reproduce the issue

  1. Start hammer via the CLI (hammer-start)
  2. View a template in any theme.
  3. Run the Siteimprove Accessibility Chrome Extension.

Results

The accessibility check will flag the following error:

Bypass Blocks -> No option to skip repeated content

Expected results

Most of our themes (🤞) support this out of the box. This error should not exist.

The reason this is being flagged is because the Hammer Nav bar comes first in the DOM.

Potential Solution

Output the toolbar at the bottom of the DOM, then style it so that it looks like it's at the top. Something like this:

#wvu-hammer-nav.wvu-hammer-breadcrumbs {
  position: absolute;
  top: 0;
}

body {
  padding-top: 52px;
}

Note: Hammer will need some way of hooking into the <body> tag to target it (inline style? adding a class?).

adamjohnson commented 5 years ago

Decided to solve this by just hiding the toolbar when remediating accessibility issues. Do that by adding the following to the top of your mock_data.yml file:

hammer_nav:
  disabled: true