Navigate to cells using keyboard commands

[Jenneh]

Problem and context

Cells are a key concept within notebooks. They are clearly visually delineated sections using outlines and color differences. When navigating a notebook with a screen reader, there is no information that cells exist or what type on content they contain.

Counterpoint: For one tester, cells don’t seem to be critical navigation point in this type of document. They were much more interested in content sections in this notebook.

Possible solutions

Ideas:

• [ ] Screen reader Users often navigate through pages using headings. Add headings or subheadings in the HTML titled "cell_#_content type" that the screen reader reads the cell and what is inside of it, but the text is not rendered on the page
• [ ] Create an option for keyboard navigation to each cell. Perhaps with a special command or leveraging the heading command

Acceptance criteria

Tasks to complete

[smythp]

Tony and I had a brief brainstorm about this last week in a meeting mostly about the continuous integration setup. For the goal of making cells navigable, we are considering prototyping this layout, which would allow for multiple notebooks on the same page:

• A main element to enclose all notebooks.
• An article element for each individual notebook.
• Within notebooks, a section element enclosing each cell with an aria-label attribute indicating the type of cell, whether code, markdown, or raw.

Section elements automatically create landmarks, allowing for the tab key to be used for cell navigation. When moving to each cell, the screen reader should announce the type of cell, contained in the aria-label.

Unresolved questions here:

1. We are assuming for now that the page will need to accommodate multiple notebooks. Whether or not this is true, it gives the most flexibility against the future.
2. We are unsure how to handle or differentiate the input and output subsections of each cell.

[tonyfast]

i think the current state of the code makes it possible to navigate to cells. we added a bunch of the suggestion above to code base. we can try solutions different solutions.

the current working solutions adds tabindex="0" to code cells only, there is a flag to turn this feature on markdown too (probably is not right though). this decision makes code cells interactive features that folks can tab to.

[smythp]

I'm going to take a look at this again, but I think for now envisioning code cells as an additional interactive element makes sense to me. The markdown areas are already filled with their own HTML semantics.