Provide text alternative to blame age indicators

Problem

For blame age indicators we have a 10 step scale represented by varying shades of indigo. We only define "Newer" and "Older". Then, these colours are applied to the commit information as a slightly wider coloured left border. They don't have any text alternative, so the entire relative information on the blame age is not accessible to screen reader users.

The classes blame-commit-age-0 through blame-commit-age-9 represent relative age within the project's history:

• blame-commit-age-0: Most recent commits (newest)
• blame-commit-age-9: Oldest commits in the project
• Classes 1-8: Graduated scale between newest and oldest

Solution

Option 1

We decide the relative information isn't that important and that timestamps on each commit are much better at representing the age of it. Then we hide the scale in the blame header from screen readers, to not confused users with random "Newer" and "Older" text.

Option 2

We add aria-label attributes to the blame scale and indicators for screen reader accessibility.

Here are possible alternative texts for screen readers:

const BLAME_AGE_DESCRIPTIONS = {
  'blame-commit-age-0': 'Most recent commit',
  'blame-commit-age-1': 'Very recent commit', 
  'blame-commit-age-2': 'Recent commit',
  'blame-commit-age-3': 'Moderately recent commit',
  'blame-commit-age-4': 'Moderately old commit',
  'blame-commit-age-5': 'Somewhat old commit',
  'blame-commit-age-6': 'Old commit',
  'blame-commit-age-7': 'Very old commit',
  'blame-commit-age-8': 'Ancient commit',
  'blame-commit-age-9': 'Oldest commit',
};

Or more concise versions:

const BLAME_AGE_DESCRIPTIONS = {
  'blame-commit-age-0': 'Newest',
  'blame-commit-age-1': 'Very recent', 
  'blame-commit-age-2': 'Recent',
  'blame-commit-age-3': 'Moderately recent',
  'blame-commit-age-4': 'Moderately old',
  'blame-commit-age-5': 'Somewhat old',
  'blame-commit-age-6': 'Old',
  'blame-commit-age-7': 'Very old',
  'blame-commit-age-8': 'Ancient',
  'blame-commit-age-9': 'Oldest',
};