Search keyboard tweaks

[samuelli]

• [x] - Enter should go to search results page
• [x] - Rename 'more collections' to more results? or move it to the bottom?
• [ ] - Up/down should focus next items
• [ ] - / should focus search field

[bkjohnson]

How exactly should the up/down arrows work? I'm imagining it would sort of work like Tab/Shift + Tab, but the current structure doesn't seem ideal for which items would gain focus (and be "enterable")

For example here is a snippet of the first collection item when I search on input:

<div class="container style-scope collection-card" type="collection">
        <a id="header" aria-label="StartPolymer/awesome-input-elements collection" class="style-scope collection-card" href="/collection/StartPolymer/awesome-input-elements">
          <h2 class="style-scope collection-card">awesome-input-elements</h2>
          <div id="numElements" class="style-scope collection-card">8 items</div>
          <div id="description" class="style-scope collection-card">Awesome up-to-date input elements.</div>
        </a>
        <div id="footer" class="style-scope collection-card">
          <img class="avatar style-scope collection-card" role="presentation" src="https://avatars2.githubusercontent.com/u/10231285?v=3&amp;s=40">
          <div class="style-scope collection-card"><a aria-label="StartPolymer author" class="style-scope collection-card" href="/author/StartPolymer">StartPolymer</a></div>
        
      </div>
    </div>

Hitting Tab from the search bar takes me down to the collection and the focus looks good but there isn't an anchor on it:

It isn't until I tab again into the header that hitting enter would take me to the collection:

So, should the arrow keys only give focus to the collection containers, not the header or footer, and should the container be an anchor to the collection? The individual elements don't have this problem.

[samuelli]

Ugh, that is messy - not sure what the right answer is.

Definitely for arrow keys, I would see this as the structure:

search-input
collection collection collection
element
element
element

I think tabbing should behave as it currently does on the home page. ie. header/footer are focused separately. This is actually almost the same in the search results, except the first collection gets the extra container focus, so I dunno what's up with that.

I think any implementation that can give us that behavior would be good. Implications are that it doesn't really matter what is focused exactly on arrow keys, could just be headers of collections and footers are skipped.

Does that make sense?

[bkjohnson]

Yeah, I'll just make the focus go to the headers and skip the container/footer. I'm kinda busy right now so it'll be a day or two before I can work on it.

[bkjohnson]

Sorry for the long delay, but I've just gotten back to this and I have a question before I go any further. Is it ok if I limit the height of the elements in the search box? I noticed that it was possible for there to be more elements than were visible on screen, and even though they could be focused they wouldn't be visible. The compromise I made was to limit the height and give it a vertical scroll.

Thoughts on this approach, or an alternative? https://github.com/bkjohnson/webcomponents.org/commit/58e6a5938837bbd583054d58a5cf97aa8dff352a

(I'll also try to clean up the logic in _onKeyDown)

[bkjohnson]

Also, if you hit the Up key when at the top of the collections, should it take you to the last element, and when you hit down at the last element should it take you to the top collection?

[samuelli]

Thanks for taking a look at this!

Is it ok if I limit the height of the elements in the search box? I noticed that it was possible for there to be more elements than were visible on screen, and even though they could be focused they wouldn't be visible. The compromise I made was to limit the height and give it a vertical scroll.

Hmm not a huge fan of this. Can we limit the to 100vh - x where x is the non-element stuff that takes up space? That way its all visible on a large screen but does the scroll when there's not enough space.

Also, if you hit the Up key when at the top of the collections, should it take you to the last element, and when you hit down at the last element should it take you to the top collection?

Up on collections should go to search box, as down on search box should go to collections. Loop around? Ideally, yes, but also not a deal breaker if its a lot of code.

[bkjohnson]

For the non-element stuff, are you talking about the headers that say "More Elements" and "More Collections"?

[Link2Twenty]

A few questions and points to maybe progress this.

• Why are there 3 collection-cards when only 2 can be seen and accessed from a none touch device? (catalog-search-box#L210)
  • Does it need some have some arrows/chevrons for scrolling? (catalog-search-box#L228) (Example)
• Why are the collection-cards incremental in tab-index, shouldn't they all be zero? (catalog-search-box#L230)
• collection-cards are selectable but actually pressing return with them selected does nothing, shouldn't this open the header anchor? (This is caused by the tab-index)

It's worth thinking about whether or not you want collection-cards to contain two links, if you do perhaps the tab-index should be removed altogether.

While #results.catalog-search-box is focused a listener could listen for / and spaces to covert them to changing the focus to catalog-search-box and returning respectively.

I believe A11y wants space presses to equal return presses but I may be wrong on that.

While the catalog-search-box is expanded a listener for up and down could easily catch presses and convert them to tab and shift-tab respectively.

[samuelli]

What's progress-card?

[Link2Twenty]

That's embarrassing, I meant collection-card. I've corrected the original comment now.