Make tokens more accessible to assitive technologies

Summary:
Ref T4843.

  - The token award buttons are just icons.
  - The tokens themselves are just icons.
  - Also spread the tokens out a tiny bit, they feel a little tight to me right now.

Test Plan: Used VoiceOver to read out tokens and token actions. Looked at an object with several token awards.

Reviewers: chad, btrahan

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T4843

Differential Revision: https://secure.phabricator.com/D8982

resources/celerity/map.php

@@ -103,7 +103,7 @@ return array(
     'rsrc/css/application/settings/settings.css' => 'ea8f5915',
     'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
     'rsrc/css/application/subscriptions/subscribers-list.css' => '5bb30c78',
-    'rsrc/css/application/tokens/tokens.css' => '5f7bca25',
+    'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '7dff07c3',
     'rsrc/css/core/remarkup.css' => '0ec9ea61',
@@ -806,7 +806,7 @@ return array(
     'sprite-tokens-css' => '1706b943',
     'subscribers-list-css' => '5bb30c78',
     'syntax-highlighting-css' => '3c18c1cb',
-    'tokens-css' => '5f7bca25',
+    'tokens-css' => '3d0f239e',
   ),
   'requires' =>
   array(

src/applications/tokens/controller/PhabricatorTokenGiveController.php

@@ -73,6 +73,13 @@ final class PhabricatorTokenGiveController extends PhabricatorTokenController {
     $buttons = array();
     $ii = 0;
     foreach ($tokens as $token) {
+      $aural = javelin_tag(
+        'span',
+        array(
+          'aural' => true,
+        ),
+        pht('Award "%s" Token', $token->getName()));
+
       $buttons[] = javelin_tag(
         'button',
         array(
@@ -85,7 +92,10 @@ final class PhabricatorTokenGiveController extends PhabricatorTokenController {
             'tip' => $token->getName(),
           )
         ),
-        $token->renderIcon());
+        array(
+          $aural,
+          $token->renderIcon(),
+        ));
       if ((++$ii % 4) == 0) {
         $buttons[] = phutil_tag('br');
       }

src/applications/tokens/event/PhabricatorTokenUIEventListener.php

@@ -115,16 +115,29 @@ final class PhabricatorTokenUIEventListener
       }
 
       $token = $tokens[$token_given->getTokenPHID()];
+      $aural = javelin_tag(
+        'span',
+        array(
+          'aural' => true,
+        ),
+        pht(
+          '"%s" token, awarded by %s.',
+          $token->getName(),
+          $handles[$token_given->getAuthorPHID()]->getName()));
 
       $list[] = javelin_tag(
         'span',
         array(
           'sigil' => 'has-tooltip',
+          'class' => 'token-icon',
           'meta' => array(
             'tip' => $handles[$token_given->getAuthorPHID()]->getName(),
           ),
         ),
-        $token->renderIcon());
+        array(
+          $aural,
+          $token->renderIcon(),
+        ));
     }
 
     $view = $event->getValue('view');

webroot/rsrc/css/application/tokens/tokens.css

@@ -18,3 +18,7 @@ button.token-button {
 .token-grid {
   text-align: center;
 }
+
+.token-icon + .token-icon {
+  margin-left: 4px;
+}