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

resources/celerity/map.php

@@ -12,7 +12,7 @@ return array(
     'core.pkg.css' => 'f515619b',
     'core.pkg.js' => '2058ec09',
     'differential.pkg.css' => '06dc617c',
-    'differential.pkg.js' => '11a08e85',
+    'differential.pkg.js' => 'c1cfa143',
     'diffusion.pkg.css' => 'a2d17c7d',
     'diffusion.pkg.js' => '6134c5a1',
     'maniphest.pkg.css' => '4845691a',
@@ -373,7 +373,7 @@ return array(
     'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '453c5375',
     'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => 'd4eecc63',
     'rsrc/js/application/diff/DiffChangeset.js' => 'b49b59d6',
-    'rsrc/js/application/diff/DiffChangesetList.js' => '7b95a80a',
+    'rsrc/js/application/diff/DiffChangesetList.js' => 'e0b984b5',
     'rsrc/js/application/diff/DiffInline.js' => 'e83d28f3',
     'rsrc/js/application/diff/behavior-preview-link.js' => '051c7832',
     'rsrc/js/application/differential/behavior-comment-preview.js' => '51c5ad07',
@@ -423,7 +423,7 @@ return array(
     'rsrc/js/application/search/behavior-reorder-profile-menu-items.js' => 'e2e0a072',
     'rsrc/js/application/search/behavior-reorder-queries.js' => 'e9581f08',
     'rsrc/js/application/slowvote/behavior-slowvote-embed.js' => '887ad43f',
-    'rsrc/js/application/transactions/behavior-comment-actions.js' => '9a6dd75c',
+    'rsrc/js/application/transactions/behavior-comment-actions.js' => '54110499',
     'rsrc/js/application/transactions/behavior-reorder-configs.js' => 'd7a74243',
     'rsrc/js/application/transactions/behavior-reorder-fields.js' => 'b59e1e96',
     'rsrc/js/application/transactions/behavior-show-older-transactions.js' => '8f29b364',
@@ -506,7 +506,7 @@ return array(
     'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
     'rsrc/js/phuix/PHUIXActionView.js' => '8d4a8c72',
     'rsrc/js/phuix/PHUIXAutocomplete.js' => 'df1bbd34',
-    'rsrc/js/phuix/PHUIXButtonView.js' => '8a91e1ac',
+    'rsrc/js/phuix/PHUIXButtonView.js' => '85ac9772',
     'rsrc/js/phuix/PHUIXDropdownMenu.js' => '04b2ae03',
     'rsrc/js/phuix/PHUIXExample.js' => '68af71ca',
     'rsrc/js/phuix/PHUIXFormControl.js' => '210a16c1',
@@ -575,7 +575,7 @@ return array(
     'javelin-behavior-bulk-job-reload' => 'edf8a145',
     'javelin-behavior-calendar-month-view' => 'fe33e256',
     'javelin-behavior-choose-control' => '327a00d1',
-    'javelin-behavior-comment-actions' => '9a6dd75c',
+    'javelin-behavior-comment-actions' => '54110499',
     'javelin-behavior-config-reorder-fields' => 'b6993408',
     'javelin-behavior-conpherence-menu' => '4047cd35',
     'javelin-behavior-conpherence-participant-pane' => 'd057e45a',
@@ -752,7 +752,7 @@ return array(
     'phabricator-darkmessage' => 'c48cccdd',
     'phabricator-dashboard-css' => 'fe5b1869',
     'phabricator-diff-changeset' => 'b49b59d6',
-    'phabricator-diff-changeset-list' => '7b95a80a',
+    'phabricator-diff-changeset-list' => 'e0b984b5',
     'phabricator-diff-inline' => 'e83d28f3',
     'phabricator-drag-and-drop-file-upload' => '58dea2fa',
     'phabricator-draggable-list' => 'bea6e7f4',
@@ -858,7 +858,7 @@ return array(
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8d4a8c72',
     'phuix-autocomplete' => 'df1bbd34',
-    'phuix-button-view' => '8a91e1ac',
+    'phuix-button-view' => '85ac9772',
     'phuix-dropdown-menu' => '04b2ae03',
     'phuix-form-control-view' => '210a16c1',
     'phuix-icon-view' => 'bff6884b',
@@ -1251,6 +1251,15 @@ return array(
       'javelin-vector',
       'javelin-typeahead-static-source',
     ),
+    54110499 => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'javelin-dom',
+      'phuix-form-control-view',
+      'phuix-icon-view',
+      'javelin-behavior-phabricator-gesture',
+    ),
     '549459b8' => array(
       'javelin-behavior',
     ),
@@ -1500,10 +1509,6 @@ return array(
       'owners-path-editor',
       'javelin-behavior',
     ),
-    '7b95a80a' => array(
-      'javelin-install',
-      'phuix-button-view',
-    ),
     '7cbe244b' => array(
       'javelin-install',
       'javelin-util',
@@ -1533,6 +1538,10 @@ return array(
       'javelin-dom',
       'javelin-stratcom',
     ),
+    '85ac9772' => array(
+      'javelin-install',
+      'javelin-dom',
+    ),
     '85ee8ce6' => array(
       'aphront-dialog-view-css',
     ),
@@ -1560,10 +1569,6 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
-    '8a91e1ac' => array(
-      'javelin-install',
-      'javelin-dom',
-    ),
     '8ce821c5' => array(
       'phabricator-notification',
       'javelin-stratcom',
@@ -1640,15 +1645,6 @@ return array(
       'javelin-mask',
       'phabricator-drag-and-drop-file-upload',
     ),
-    '9a6dd75c' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'javelin-dom',
-      'phuix-form-control-view',
-      'phuix-icon-view',
-      'javelin-behavior-phabricator-gesture',
-    ),
     '9a860428' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2021,6 +2017,10 @@ return array(
       'phuix-icon-view',
       'phabricator-prefab',
     ),
+    'e0b984b5' => array(
+      'javelin-install',
+      'phuix-button-view',
+    ),
     'e1d25dfb' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/applications/differential/view/DifferentialChangesetListView.php

@@ -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.'),

src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php

@@ -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;

src/view/phui/PHUIButtonView.php

@@ -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,
     );
   }
 

webroot/rsrc/js/application/diff/DiffChangesetList.js

@@ -1662,9 +1662,12 @@ JX.install('DiffChangesetList', {
 
     _getMenuButton: function() {
       if (!this._menuButton) {
+        var pht = this.getTranslations();
+
         var button = new JX.PHUIXButtonView()
           .setIcon('fa-bars')
-          .setButtonType(JX.PHUIXButtonView.BUTTONTYPE_SIMPLE);
+          .setButtonType(JX.PHUIXButtonView.BUTTONTYPE_SIMPLE)
+          .setAuralLabel(pht('Display Options'));
 
         var dropdown = new JX.PHUIXDropdownMenu(button.getNode());
         this._menuItems = {};
@@ -1703,8 +1706,6 @@ JX.install('DiffChangesetList', {
 
         dropdown.listen('open', JX.bind(this, this._ondropdown));
 
-        var pht = this.getTranslations();
-
         if (this.getInlineListURI()) {
           list.addItem(
             new JX.PHUIXActionView()

webroot/rsrc/js/application/transactions/behavior-comment-actions.js

@@ -163,9 +163,12 @@ JX.behavior('comment-actions', function(config) {
 
     option.disabled = true;
 
+    var aural = JX.$N('span', {className: 'aural-only'}, action.auralLabel);
+
     var icon = new JX.PHUIXIconView()
       .setIcon('fa-times-circle');
-    var remove = JX.$N('a', {href: '#'}, icon.getNode());
+
+    var remove = JX.$N('a', {href: '#'}, [aural, icon.getNode()]);
 
     var control = new JX.PHUIXFormControl()
       .setLabel(action.label)

webroot/rsrc/js/phuix/PHUIXButtonView.js

@@ -13,6 +13,7 @@ JX.install('PHUIXButtonView', {
   members: {
     _node: null,
     _textNode: null,
+    _auralNode: null,
 
     _iconView: null,
     _color: null,
@@ -69,6 +70,12 @@ JX.install('PHUIXButtonView', {
       return this;
     },
 
+    setAuralLabel: function(label) {
+      JX.DOM.setContent(this._getAuralNode(), label);
+      this._redraw();
+      return this;
+    },
+
     getNode: function() {
       if (!this._node) {
         var attrs = {
@@ -95,13 +102,31 @@ JX.install('PHUIXButtonView', {
       return this._textNode;
     },
 
+    _getAuralNode: function() {
+      if (!this._auralNode) {
+        var attrs = {
+          className: 'aural-only'
+        };
+
+        this._auralNode = JX.$N('span', attrs);
+      }
+
+      return this._auralNode;
+    },
+
     _redraw: function() {
       var node = this.getNode();
 
+      var aural = this._auralNode;
       var icon = this._iconView;
       var text = this._textNode;
 
       var content = [];
+
+      if (aural) {
+        content.push(aural);
+      }
+
       if (icon) {
         content.push(icon.getNode());
       }