olh screen reader improvements

[StephDriver]

closes #4220
closes #4225

[StephDriver]

pages for previewing box link work:

• Journal Homepage (/) - carousel, popular, box_article templates
• Journal Collections (/collections/) - collections template
• Journal Issues (/issues/) - issue_list template
• Press Homepage (/) - journals_and_html template, journals templates
• Repository List (repository/list/) - list template

[StephDriver]

Work done:

• focus on journal home page, getting screen reader accessible as per OLH theme: box links used in lists of articles are not accessible #4220.
  • box links (and then updated across other templates)
  • carousel - updates for screen reader, reduced motion and colour contrast.

Not done:

• carousel is not perfect, but better. now has bullets to select individual slides, and doesn't autoplay. This is a compromise because I couldn't get an override to autoplay working well with reduced motion preference or screen reader and it would swap between slides in the middle of reading them out.

[StephDriver]

OLH Navigation

Issues already fixed on master:

Started this by testing again - and found these had already been covered by other work:

• Sample 1, item 2.
  • hamburger menu is incorrectly identified as "[article number] link". tab is to the search icon (magnifying glass) and not into the dropdown.
• Sample 1, item 10.
  • "button" read next (hamburger menu below author line). no identity.
  • Can be activated but next tab is to the word 'options' which has not been related to the button.
• Sample Other, item 8. navigation menu - Login and Register appear side by side, but all other links have their own line
• Sample Other, item 23. navigation within pages
  • a skip to main content would be nice and
  • For long lists of articles, some way to know how long the list - either pagination or a 'showing results x of y would be helpful.
  • - something that makes it clear one has reached the footer. [edit fixed by landmarks work]
• Sample Other, item 1. When navigating away from Sample 1 page, e.g. following a link to another page, the back button ends up returning to the article search page (from which this article was chosen) and not to the article itself. This is highly confusing.

Remaining Work:

• Sample 1, item 2. - Menu can be entered, which opens up the drop down options but the next tab is to the search icon (magnifying glass) and not into the dropdown.
• Sample 4, item 1. the navigation menu itself doesn't work appropriately when navigating by link, particularly having entered a dropdown, you can fall off the bottom of the menu and end up either back in the main article or back on the main part of the menu - but the screen still showing the drop down, and then not be able to get back. The back button at the top of a dropdown also is not selectably having navigated away from it - e.g. having gone down the list from within the dropdown, and then going back up, instead of reaching' back' one ends up in the main navigation on the 'home item.' In short: navigation menu needs reviewing and updating to work with screenreader navigating by links and/or tabs, both backwards and forwards.

New problems noticed:

• Options menu only keyboard navigable to first and last items, the text display options are not navigable.
• keyboard focus visible updates (not start submission is focusable but not visible).
• mobile nav alignment - those with dropdowns are left aligned, those without are centre aligned.

[StephDriver]

Note:

• the narrow and wide screen navs are better, but the wide screen handles better than narrow in screen reader tests, so recommend to screen reader users they request desktop site.
• I had to change the layout on the nav.html to understand the template, which meant most lines changed. This is on a single commit so I have to to reverse it I will. aa65329
• I have not fixed the search/menu toggle issue on narrow screens. I tried a few work arounds, but this needs a much larger restructuring to make it work and that put it out of scope for this work.
• orbit containers are focusable - this is handled by Foundation and setting `tabindex="-1" makes no difference. The article banner image is an orbit container, so this is not limited to the carousel.
• I can't get the tinymce on the contacts page to show the focus ring (but it does handle its own focus.