Improve accessibility of some UI elements (forms, icons, timeline)

Summary: Ref T4843. Chips away at a few more things.

Test Plan: Used VoiceOver and got a generally more sensible-seeming result.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T4843

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

src/__phutil_library_map__.php

@@ -42,6 +42,7 @@ phutil_register_library_map(array(
     'AphrontFormPolicyControl' => 'view/form/control/AphrontFormPolicyControl.php',
     'AphrontFormRadioButtonControl' => 'view/form/control/AphrontFormRadioButtonControl.php',
     'AphrontFormRecaptchaControl' => 'view/form/control/AphrontFormRecaptchaControl.php',
+    'AphrontFormSectionControl' => 'view/form/control/AphrontFormSectionControl.php',
     'AphrontFormSelectControl' => 'view/form/control/AphrontFormSelectControl.php',
     'AphrontFormStaticControl' => 'view/form/control/AphrontFormStaticControl.php',
     'AphrontFormSubmitControl' => 'view/form/control/AphrontFormSubmitControl.php',
@@ -2670,6 +2671,7 @@ phutil_register_library_map(array(
     'AphrontFormPolicyControl' => 'AphrontFormControl',
     'AphrontFormRadioButtonControl' => 'AphrontFormControl',
     'AphrontFormRecaptchaControl' => 'AphrontFormControl',
+    'AphrontFormSectionControl' => 'AphrontFormControl',
     'AphrontFormSelectControl' => 'AphrontFormControl',
     'AphrontFormStaticControl' => 'AphrontFormControl',
     'AphrontFormSubmitControl' => 'AphrontFormControl',

src/view/form/control/AphrontFormControl.php

@@ -169,14 +169,11 @@ abstract class AphrontFormControl extends AphrontView {
 
     $custom_class = $this->getCustomControlClass();
 
-    if (strlen($this->getLabel())) {
+    // If we don't have an ID yet, assign an automatic one so we can associate
-      $label = phutil_tag(
+    // the label with the control. This allows assistive technologies to read
-        'label',
+    // form labels.
-        array('class' => 'aphront-form-label'),
+    if (!$this->getID()) {
-        $this->getLabel());
+      $this->setID(celerity_generate_unique_node_id());
-    } else {
-      $label = null;
-      $custom_class .= ' aphront-form-control-nolabel';
     }
 
     $input = phutil_tag(
@@ -184,6 +181,19 @@ abstract class AphrontFormControl extends AphrontView {
       array('class' => 'aphront-form-input'),
       $this->renderInput());
 
+    if (strlen($this->getLabel())) {
+      $label = phutil_tag(
+        'label',
+        array(
+          'class' => 'aphront-form-label',
+          'for' => $this->getID(),
+        ),
+        $this->getLabel());
+    } else {
+      $label = null;
+      $custom_class .= ' aphront-form-control-nolabel';
+    }
+
     if (strlen($this->getError())) {
       $error = $this->getError();
       if ($error === true) {

src/view/form/control/AphrontFormSectionControl.php

@@ -0,0 +1,13 @@
+<?php
+
+final class AphrontFormSectionControl extends AphrontFormControl {
+
+  protected function getCustomControlClass() {
+    return 'aphront-form-control-section';
+  }
+
+  protected function renderInput() {
+    return $this->getValue();
+  }
+
+}

src/view/phui/PHUIIconView.php

@@ -101,6 +101,7 @@ final class PHUIIconView extends AphrontTagView {
     return array(
       'href' => $this->href,
       'style' => $style,
+      'aural' => false,
       'class' => $classes,
     );
   }

src/view/phui/PHUITimelineEventView.php

@@ -154,7 +154,14 @@ final class PHUITimelineEventView extends AphrontView {
           'sigil' => 'timeline-extra',
           'class' => 'phui-timeline-extra',
         ),
-        phutil_implode_html(self::DELIMITER, $extra));
+        phutil_implode_html(
+          javelin_tag(
+            'span',
+            array(
+              'aural' => false,
+            ),
+            self::DELIMITER),
+          $extra));
     } else {
       $extra = null;
     }