scrollTo() does not move focus to the element being scrolled to #24555

leafsy · 2019-09-16T21:46:07Z

What's the issue?

Demo: https://codepen.io/leafsy/full/WNeypRE

In the example above, clicking on an anchor link would put focus on the element with corresponding id inside main content; however, clicking on an item with scrollTo action binding does not move focus to the element with corresponding id. For a11y best practice, the behaviors should be consistent.

What browsers are affected?

All browsers.

Which AMP version is affected?

Version 1909141411050

The text was updated successfully, but these errors were encountered:

dritter · 2019-09-30T14:49:57Z

Your example was not valid AMP code.

This should work:

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>responsive sidebar with autofocus</title>
  <link rel="canonical" href="amps.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    body {
      font-family: 'Courier New', Courier, monospace;
    }
    .hamburger{
      font-size: 2em;
      display:block;
      cursor: pointer;
      position: fixed;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      background: #03A9F4;
      z-index: 1;
    }
    h1, h2, h3, h4 {
      margin: 0px;
      padding: 5px;
      display: block;
    }
    header {
      background: #9C27B0;
      height: 100px;
    }
    article {
      background: #FFD54F
    }
    nav {
      margin: 0px;
    }
    aside {
      display: none;
    }
    ul.nav-container {
      display: block;
      padding: 0;
      background: #4CAF50;
      margin: 0px;
      width: 300px;
    }
    ul.nav-container > * {
      height: 100px;
      display: block;
      border-bottom: 1px solid #EEE;
      padding: 2px;
    }
    .selected {
      background: #FF9800;
    }
    /*  desktop */
    @media (min-width: 767px) {
      nav[toolbar] {
        position: sticky;
        top: 0;
        max-height: calc(100vh - 100px);
        overflow: auto;
        margin: 20px;
      }
      nav ul {
        display: block;
      }
      .hamburger {
        display: none;
      }
      main {
        display: flex;
        flex-direction: row;
      }
      aside {
        display: flex;
        flex-direction: column;
      }
      article {
        flex: 1
      }
    }
  </style>
</head>
<body>
  

  <amp-sidebar id="sidebar" layout="nodisplay">
      <nav toolbar="(min-width: 767px)" toolbar-target="desktop-sidebar">
     <ul>
       <li><span>anchor links</span></li>
       <li><a href="#a1">section 1</a></li>
       <li><a href="#a2">section 2</a></li>
       <li><a href="#a3">section 3</a></li>

       <li><span>scrollTo()</span></li>
       <li on="tap:sidebar.close(), a1.scrollTo(), a1.focus()" tabindex="0" role="nav">section 1</li>
       <li on="tap:sidebar.close(), a2.scrollTo(), a2.focus()" tabindex="0" role="nav">section 2</li>
       <li on="tap:sidebar.close(), a3.scrollTo(), a3.focus()" tabindex="0" role="nav">section 3</li>
      </ul>
    </nav>
  </amp-sidebar>

  <header>
      <h2>Header</h2>
      <button
        class="hamburger"
        on='tap:sidebar.toggle'
        aria-label="Click to open sidebar">
      =
    </button>
  </header>

   <main>
      <aside id="desktop-sidebar"></aside>

      <article>
        <h1>Main Content<h1>
        <h2 id="a1" tabindex="0">section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 id="a2" tabindex="0">section 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 id="a3" tabindex="0">section 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

  </main>
</body>
</html>

The main difference is that I had to define what should happen on click on the list item. I changed it to close the sidebar, scroll to the element and focus that element: on="tap:sidebar.close(), a1.scrollTo(), a1.focus()". This is indeed a bit verbose.

Other changes to your code:

The nav element in the amp-sidebar should only contain ul or ol elements
The correct syntax to use amp-mustace is to add it as custom-template (instead of custom-element)
Removed !important in CSS

dmanek · 2020-10-19T19:58:57Z

Seems like this issue is WAI. Will update the docs for scrollTo to pair with focus() as an a11y best practice.

…roject#24555)

caroqliu · 2020-10-19T20:29:01Z

Closing as this is marked WAI and clarified in a follow up PR.

…) (#30737)

…roject#24555) (ampproject#30737)

leafsy added the Type: Bug label Sep 16, 2019

dreamofabear added the WG: components label Sep 16, 2019

caroqliu added this to Accessibility in wg-components Starter Issues Oct 12, 2020

caroqliu added this to Focus in A11y Week - Q4 2020 Oct 19, 2020

dmanek added a commit to dmanek/amphtml that referenced this issue Oct 19, 2020

Update doc to pair focus with scrollTo as an a11y best practice (ampp…

8383d0f

…roject#24555)

caroqliu mentioned this issue Oct 19, 2020

📖 Update doc to pair focus with scrollTo as an a11y best practice (#24555) #30737

Merged

caroqliu closed this as completed Oct 19, 2020

caroqliu pushed a commit that referenced this issue Oct 23, 2020

Update doc to pair focus with scrollTo as an a11y best practice (#24555…

2990e68

…) (#30737)

ed-bird pushed a commit to ed-bird/amphtml that referenced this issue Dec 10, 2020

Update doc to pair focus with scrollTo as an a11y best practice (ampp…

2d8bee0

…roject#24555) (ampproject#30737)

caroqliu moved this from Accessibility to Done in wg-components Starter Issues Jul 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

scrollTo() does not move focus to the element being scrolled to #24555

scrollTo() does not move focus to the element being scrolled to #24555

leafsy commented Sep 16, 2019

dritter commented Sep 30, 2019

dmanek commented Oct 19, 2020

caroqliu commented Oct 19, 2020

scrollTo() does not move focus to the element being scrolled to #24555

scrollTo() does not move focus to the element being scrolled to #24555

Comments

leafsy commented Sep 16, 2019

What's the issue?

What browsers are affected?

Which AMP version is affected?

dritter commented Sep 30, 2019

dmanek commented Oct 19, 2020

caroqliu commented Oct 19, 2020