NCIOCPL / cgov-digital-platform

The Cancer.gov Digital Communications Platform
GNU General Public License v2.0
11 stars 33 forks source link

Fix Skipnav target and outline handling for tabindex elements #3295

Open bryanpizzillo opened 2 years ago

bryanpizzillo commented 2 years ago

Issue description

ESTIMATE TBD

So there are a number of issues we are seeing while implementing NCIDS in the transitional theme. One of those has to be with how we are handling tabindex outlining and the skip nav.

Issues:

  1. Our target content is not actually the start of the content but breadcrumbs. This requires a user to tab through breadcrumbs and side nav. This should instead target the container that has the H1 element. (this happens to be main)
  2. We have set a number of tabindex=0 attributes on div elements (at least main and content there are probably more). We have then set a number of rules to set the outline of any of those elements to be hidden. According to @arcepaul we should not be removing the outlines so much.
    • USWDS has an approach for their skip nav and back to top that when clicked:
      • finds the target in the dom
      • turns off the outline
      • adds the tabindex
      • on blue of the target it removes the tab index.
    • USWDS does not litter their pages with tabindex attributes

Some examples of tabindex -- we need to see how the navigation is setup and why we have these. Homepage (Home/Landing) image

PDQ Patient Bladder Cancer Treatment Summary (PDQ CIS) image

Feelings and Cancer (Article) image

olitharp-nci commented 2 years ago

In our cgov transitional theme --

Removed all tab index from cgov page.html.twig

...
    <a class="usa-skipnav" href="#main-content">
      {{ 'Skip to main content'|t }}
    </a>
...
          <div class="legacy">
            <main class="contentzone has-section-nav" id="main-content">
              {{ page.content }}
            </main>
          </div>
...

Tested, and working:

  1. Chrome

https://user-images.githubusercontent.com/85901679/163414805-88ebf8bc-4b54-4c71-a4fb-401df31664d4.mov

  1. Firefox - https://stackoverflow.com/a/66208705

https://user-images.githubusercontent.com/85901679/163414667-2fd0cbca-37b0-4667-8267-8160e4432088.mov

  1. Safari - https://stackoverflow.com/a/1914496/1389807

https://user-images.githubusercontent.com/85901679/163413850-e69432a6-6995-4927-865c-1d13451d4a74.mov

meglake commented 2 years ago

This ticket isn't needed for MVP1, moved to Release 2 backlog.