Unable to scroll first section-header into view using arrow keys

[tomsontom]

🐛 Bug Report

Once you scroll the first section out view it is impossible to scroll it back into view unless you use the the mouse.

🤔 Expected Behavior

I would expect that if you scroll the first item in a section into view the header not only the item is scrolled into view but also its section header

😯 Current Behavior

Impossible to scroll section-header into view. See the following screencast and one can reproduce in the storybook

https://user-images.githubusercontent.com/52631/110013921-79c13f80-7d22-11eb-93ee-c85d236688a6.mp4

💁 Possible Solution

I hacked a bit into Virtualizer.ts

    let x = this.visibleRect.x;
    let y = this.visibleRect.y;
    let minX = layoutInfo.rect.x - offsetX;
    let minY = layoutInfo.rect.y - offsetY;
    if (layoutInfo.parentKey) {
      let parentLayoutInfo = this.layout.getLayoutInfo(layoutInfo.parentKey);
      if (parentLayoutInfo && parentLayoutInfo.rect.y === layoutInfo.rect.y) {
        let headerInfo = this.layout.getLayoutInfo(layoutInfo.parentKey + ':header');
        if (headerInfo) {
          minY = headerInfo.rect.y - offsetY;
        }
      }
    }

where I added the IF-Block, unfortunately one can not access the header-layout-info via API so this feels a bit hacky because I rely on the fact that the header info is stored with the key + ':header' (which is an implementation detail of ListLayout) so ideally one could call an API on Layout to get the information required.

This change does not only scroll the primary section header into view but always the section header if you reach the first item in a section. Another small caveat is that I can not differentiate if you nativate via keys or using the mouse so if you click on the first item in a section and although the item is visible in the view port it still scrolls because the section is not visible

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
react-spectrum
Browser
Operating System

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[ktabors]

I confirmed this behavior. @majornista do you have any thoughts on how to improve this behavior with accessibility in mind?

[majornista]

@ktabors, @tomsontom Scrolling the preceding header into view to ensure that keyboard-only users can access group heading information seems like a reasonable request. Another option, which may have the additional benefit of allowing group headings to be accessed with VoiceOver on iOS, would be to make the headings focusable, like other items in the list. Considering we've had requests to also make disabled items focusable, this may be worth taking up in that context as well.

[tomsontom]

well at least as a none blind user i would not expect that I can traverse to the section/group header when navigating with the arrow up/down. For a blind user it might make sense that he/she can access the section header using CAPSLOCK+ARROW_UP/DOWN (on OS-X - I don't know the Windows keycombo)

[ktabors]

We will take some time to explore and do research on possible solutions.

[tomsontom]

@ktabors any news on this - If there's a decision what should be done I'd spend some time implementing it.

[LFDanLu]

We'll want to investigate scrolling the section header into view when the user focuses the first item in a section.