docs: up/down keys do not scroll content area

[adrianandreias]

Up/down keys don't work in documentation. Neither do page up/down keys.

They don't work in any of the documentation pages, i.e.:
https://material.angularjs.org/0.9.4/#/

Clicking to focus on the content div on the right of the page doesn't help.

Tested with latest Chrome on Windows: Version 43.0.2357.65 m

This reproduces with current master HEAD as well.

[ThomasBurleson]

@adrianandreias

• Why do you expect the up/down arrow keys to work?
• Are you referring to the sidebar list on the left?

When you select a sideNav item to navigate to new content... we change the focus to the content area. You can use the Tab keys to navigate with the keyboard.

@marcysutton - any additional thoughts here?

[adrianandreias]

Forgot to mention: I have a vertical scroll bar on the right. The content does not fit on the screen.
These keys would work on any regular web page.

[marcysutton]

Arrow keys work on a page that isn't split into separate scrolling columns–what you're seeing may be a bug with Flexbox. If you notice, clicking to focus on the primary column when it overflows and hitting SPACE does not scroll, either. This is the nature of webapps that use this type of layout. We may have to re-implement the browser's scrolling behavior in overflowing columns, which doesn't sound trivial.

This looks similar to the page scrolling limitation I reported on mobile Safari with Voiceover: #2315

If you can find examples of web-app layouts like this that do support arrow and space keys for scrolling, we'd love to see them.

[adrianandreias]

As far as I know a regular iframe and even a div: once they have the focus arrow keys just work.

[joshribakoff]

+1

You can rationalize the "broken" arrow keys all you want, but as a user I expect to simply click on something that has a scrollbar, and press my arrows, and this expectation is broken. Seems like a common theme that this material design trades away usability in favor of eye candy.

@marcysutton Here's an example of a "web app" with an overflow div that I can focus & scroll - http://embed.plnkr.co/4jERkO/preview I know you use flex columns so it is different, but can't the functionality be polyfilled somehow? Seems like if flex is the issue, then flex is not ready for web use.

Also FYI the suggested workaround for navigating the documentation does not work. If I press tab it focuses each nav element one by one. After pressing tab many dozens of times the Chrome URL bar gets focus at which point I can no longer tab away without mouse interaction. At no point am I able to tab or click to focus the content & simply use arrow keys. A version of the documentation that is accessible is essential or [some] people will just pass this material design by & use some other framework.

[ThomasBurleson]

@marcysutton - Looking at a Github issue UX appears to support your posit. Yet the Slack web app has a UX the supports arrow key scrolling in the main content area (on the right); it appears that they are using a custom jquery scroll component 'monkey_scroll'.

Adding this UX feature to our docs (and perhaps to mdContent) may have impacts on other components... so we will approach this with care.

@adrianandreias, @joshribakoff - The simple answer is that we have not yet implemented this feature; nor explored all the ramifications of such features in mdContent. Our team has been extremely busy with component implementations, doc improvements, and bug fixes.

I think this is will be a usability win... please be patient while we keep focused and fast track to a version 1.0 release of Angular Material.

[adrianandreias]

👍 the truth is there are more pressing issues in the milestones. This is a "nice to have" right now.