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.

[joemull]

Really great work!

I just have one question / suggestion about the CSS that is supposed to prevent layout shifts.

[joemull]

I don't believe this is needed, since outline does not add any margin or padding or size to the element. I commented it out and tested it, and I did not get a layout shift when tabbing through.

It is also causing a bit of a visible gap between the focus ring and the element. Do you think we can remove it safely, or is there another reason for it I'm not seeing?

[StephDriver]

This was how I got the links that were within other text to remain stationary rather than move around when receiving/losing focus. The main culprit was where text had flowed such that the link had been split across two lines, for some links, this reflow ended up changing when focused. Using this style prevented that. This was a style choice born of experimenting until something worked rather than theory.

[StephDriver]

inline_block.mov

[joemull]

There is something wrong with the .mov file above that is keeping me from watching it, but that sounds fine--i just wanted to make sure this was needed.

[mauromsl]

Great work! Ready to merge but needs some conflict resolution

[StephDriver]

@mauromsl @ajrbyers your thoughts on the UUID v Threaded Counter approaches for unique element IDs?

Particularly as we need more and more of these with the increase in use of ARIA, and how templates may be used within loops and on occasion with the same template in included not just in a loop, but in more than one different loop on the same page, at times with similar content

e.g. An Article might be in both Popular and Featured articles on a Homepage. So basing the Element ID on the article.id is not sufficient. Similarly, if an two articles by the same author are displayed on the same page.