Add more accessibility labels for screen readers

Summary:
Depends on D19594. See PHI823. Ref T13164.

  - Add a label for the "X" button in comment areas, like "Remove Action: Change Subscribers".
  - Add a label for the floating header display options menu in Differential.
  - Add `role="button"` to `PHUIButtonView` objects that we render with an `<a ...>` tag.

Test Plan:
Viewed a revision with `?__aural__=true`:

  - Saw "Remove Action: ..." label.
  - Saw "Display Options" label.
  - Used inspector to verify that some `<a class="button" ...>` now have `<a class="button" role="button" ...>`. This isn't exhaustive, but at least improves things. A specific example is the "edit", "reply", etc., actions on inline comments.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13164

Differential Revision: https://secure.phabricator.com/D19595
This commit is contained in:
epriestley
2018-08-17 10:53:28 -07:00
parent 5c4c593af3
commit 75a5dd8d8c
7 changed files with 71 additions and 29 deletions

View File

@@ -309,6 +309,7 @@ final class DifferentialChangesetListView extends AphrontView {
'Show All Inlines' => pht('Show All Inlines'),
'List Inline Comments' => pht('List Inline Comments'),
'Display Options' => pht('Display Options'),
'Hide or show all inline comments.' =>
pht('Hide or show all inline comments.'),

View File

@@ -319,14 +319,18 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
foreach ($comment_actions as $key => $comment_action) {
$key = $comment_action->getKey();
$label = $comment_action->getLabel();
$action_map[$key] = array(
'key' => $key,
'label' => $comment_action->getLabel(),
'label' => $label,
'type' => $comment_action->getPHUIXControlType(),
'spec' => $comment_action->getPHUIXControlSpecification(),
'initialValue' => $comment_action->getInitialValue(),
'groupKey' => $comment_action->getGroupKey(),
'conflictKey' => $comment_action->getConflictKey(),
'auralLabel' => pht('Remove Action: %s', $label),
);
$type_map[$key] = $comment_action;

View File

@@ -233,6 +233,13 @@ final class PHUIButtonView extends AphrontTagView {
$classes = array();
}
// See PHI823. If we aren't rendering a "<button>" tag, give the tag we
// are rendering a "button" role as a hint to screen readers.
$role = null;
if ($this->tag !== 'button') {
$role = 'button';
}
return array(
'class' => $classes,
'href' => $this->href,
@@ -240,6 +247,7 @@ final class PHUIButtonView extends AphrontTagView {
'title' => $this->title,
'sigil' => $sigil,
'meta' => $meta,
'role' => $role,
);
}