# Accessibility

This document is very much still under construction.

## Testing

### Software

Use NVDA from https://www.nvaccess.org/.  The current choice is made based on
internal usage in Mozilla as well as use in the world at large.

Relevant docs:
- https://marcozehe.wordpress.com/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/
- https://webaim.org/articles/nvda/

### Smoke Test Steps

- Bring up a source listing page.
- Press NVDA + space to enter virtual buffer mode.
- Press 't' to select the table.
- Use ctrl + alt + (arrow keys) to move around the table.  Confirm that the
  table layout matches the design below, with column 1 being blame, column 2
  being line numbers, and column 3 being the contents of the source lines.
- In the first column where there is blame data, press the 'enter' key to toggle
  the blame pop-up open.
- Press the down arrow to read the first line of the blame pop-up.  Successive
  down arrow presses should read the rest of the blame lines.

## Design

### Source Listing

The source lists are exposed as a 3-column table using ARIA roles.
1. Blame button, toggling it toggles display of the blame popup.
2. Line number.
3. Source code for the given line.

Here's an example of a 1-row source listing:
```html
<div id="file" class="file" role="table">
  <div role="row" class="source-line-with-number">
    <div role="cell"><div class="blame-strip c1" data-blame="a015fb538abbbdcbfe404c320a8fefdc07a6a54e#%#1" role="button" aria-label="blame" aria-expanded="false"></div></div>
    <div id="l1" role="cell" class="line-number" data-line-number="1"></div>
    <code role="cell" class="source-line" id="line-1"><span class="syn_comment" >/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */</span>
  </code>
</div>
```

Add initial accessibility docs covering how to smoke test with NVDA.
Add initial accessibility docs covering how to smoke test with NVDA.
