From 438edde03150984b267347b0374998149f2c45e9 Mon Sep 17 00:00:00 2001 From: epriestley Date: Thu, 16 Aug 2018 13:48:42 -0700 Subject: [PATCH] Add some missing aural button labels for accessibility Summary: Ref T13164. See PHI823. (See that issue for some more details and discussion.) Add aural labels to various buttons which were missing reasonable aural labels. The "Search" button (magnifying glass in the global search input) had an entire menu thing inside it. I moved that one level up and it doesn't look like it broke anything (?). All the other changes are pretty straightforward. Test Plan: {F5806497} {F5806498} - Will follow up on the issue to make sure things are in better shape for the reporting user. Reviewers: amckinley Reviewed By: amckinley Maniphest Tasks: T13164 Differential Revision: https://secure.phabricator.com/D19594 --- ...abricatorFavoritesMainMenuBarExtension.php | 3 +- .../PeopleMainMenuBarExtension.php | 3 +- ...catorApplicationTransactionCommentView.php | 2 +- .../view/PHUIDiffInlineCommentDetailView.php | 15 ++++++--- .../menu/PhabricatorMainMenuSearchView.php | 32 +++++++++++-------- .../page/menu/PhabricatorMainMenuView.php | 3 +- src/view/phui/PHUIButtonView.php | 25 +++++++++++++-- src/view/phui/PHUIHeadThingView.php | 2 +- src/view/phui/PHUITimelineEventView.php | 2 +- 9 files changed, 60 insertions(+), 27 deletions(-) diff --git a/src/applications/favorites/engineextension/PhabricatorFavoritesMainMenuBarExtension.php b/src/applications/favorites/engineextension/PhabricatorFavoritesMainMenuBarExtension.php index 9afb836b94..7b5d6d0720 100644 --- a/src/applications/favorites/engineextension/PhabricatorFavoritesMainMenuBarExtension.php +++ b/src/applications/favorites/engineextension/PhabricatorFavoritesMainMenuBarExtension.php @@ -30,7 +30,8 @@ final class PhabricatorFavoritesMainMenuBarExtension ->addClass('phabricator-core-user-menu') ->setNoCSS(true) ->setDropdown(true) - ->setDropdownMenu($dropdown); + ->setDropdownMenu($dropdown) + ->setAuralLabel(pht('Favorites Menu')); return array( $favorites_menu, diff --git a/src/applications/people/engineextension/PeopleMainMenuBarExtension.php b/src/applications/people/engineextension/PeopleMainMenuBarExtension.php index 152fb2becf..e19cedd305 100644 --- a/src/applications/people/engineextension/PeopleMainMenuBarExtension.php +++ b/src/applications/people/engineextension/PeopleMainMenuBarExtension.php @@ -43,7 +43,8 @@ final class PeopleMainMenuBarExtension ->setIcon($profile_image) ->addClass('phabricator-core-user-menu') ->setHasCaret(true) - ->setNoCSS(true); + ->setNoCSS(true) + ->setAuralLabel(pht('Account Menu')); return array( $user_menu, diff --git a/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php b/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php index a5dcfcb4ae..c0d46e21a5 100644 --- a/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php +++ b/src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php @@ -230,7 +230,7 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView { 'div', array( 'style' => 'background-image: url('.$image_uri.')', - 'class' => 'phui-comment-image', + 'class' => 'phui-comment-image visual-only', )); $wedge = phutil_tag( 'div', diff --git a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php index 27a489a705..a32197059a 100644 --- a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php +++ b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php @@ -233,7 +233,8 @@ final class PHUIDiffInlineCommentDetailView ->setIcon('fa-reply') ->setTooltip(pht('Reply')) ->addSigil('differential-inline-reply') - ->setMustCapture(true); + ->setMustCapture(true) + ->setAuralLabel(pht('Reply')); } if ($this->editable && !$this->preview) { @@ -242,14 +243,16 @@ final class PHUIDiffInlineCommentDetailView ->setIcon('fa-pencil') ->setTooltip(pht('Edit')) ->addSigil('differential-inline-edit') - ->setMustCapture(true); + ->setMustCapture(true) + ->setAuralLabel(pht('Edit')); $action_buttons[] = id(new PHUIButtonView()) ->setTag('a') ->setIcon('fa-trash-o') ->setTooltip(pht('Delete')) ->addSigil('differential-inline-delete') - ->setMustCapture(true); + ->setMustCapture(true) + ->setAuralLabel(pht('Delete')); } else if ($this->preview) { $links[] = javelin_tag( @@ -268,7 +271,8 @@ final class PHUIDiffInlineCommentDetailView ->setTooltip(pht('Delete')) ->setIcon('fa-trash-o') ->addSigil('differential-inline-delete') - ->setMustCapture(true); + ->setMustCapture(true) + ->setAuralLabel(pht('Delete')); } if (!$this->preview && $this->canHide()) { @@ -277,7 +281,8 @@ final class PHUIDiffInlineCommentDetailView ->setTooltip(pht('Collapse')) ->setIcon('fa-times') ->addSigil('hide-inline') - ->setMustCapture(true); + ->setMustCapture(true) + ->setAuralLabel(pht('Collapse')); } $done_button = null; diff --git a/src/view/page/menu/PhabricatorMainMenuSearchView.php b/src/view/page/menu/PhabricatorMainMenuSearchView.php index 0b2ca8ab10..15319a357e 100644 --- a/src/view/page/menu/PhabricatorMainMenuSearchView.php +++ b/src/view/page/menu/PhabricatorMainMenuSearchView.php @@ -94,21 +94,24 @@ final class PhabricatorMainMenuSearchView extends AphrontView { 'action' => '/search/', 'method' => 'POST', ), - phutil_tag_div('phabricator-main-menu-search-container', array( - $input, - phutil_tag( - 'button', - array( - 'id' => $button_id, - 'class' => 'phui-icon-view phui-font-fa fa-search', + phutil_tag( + 'div', + array( + 'class' => 'phabricator-main-menu-search-container', + ), + array( + $input, + phutil_tag( + 'button', + array( + 'id' => $button_id, + 'class' => 'phui-icon-view phui-font-fa fa-search', ), - array( - $selector, - $search_text, - )), - $primary_input, - $target, - ))); + $search_text), + $selector, + $primary_input, + $target, + ))); return $form; } @@ -207,6 +210,7 @@ final class PhabricatorMainMenuSearchView extends AphrontView { id(new PHUIIconView()) ->addSigil('global-search-dropdown-icon') ->setIcon($current_icon)) + ->setAuralLabel(pht('Configure Global Search')) ->setDropdown(true); $input = javelin_tag( diff --git a/src/view/page/menu/PhabricatorMainMenuView.php b/src/view/page/menu/PhabricatorMainMenuView.php index 583952b0a9..67badce911 100644 --- a/src/view/page/menu/PhabricatorMainMenuView.php +++ b/src/view/page/menu/PhabricatorMainMenuView.php @@ -232,7 +232,8 @@ final class PhabricatorMainMenuView extends AphrontView { ->addClass('phabricator-core-user-menu') ->addClass('phabricator-core-user-mobile-menu') ->setNoCSS(true) - ->setDropdownMenu($dropdown); + ->setDropdownMenu($dropdown) + ->setAuralLabel(pht('Page Menu')); } private function renderApplicationMenu() { diff --git a/src/view/phui/PHUIButtonView.php b/src/view/phui/PHUIButtonView.php index 91c336eaaf..1fb2206428 100644 --- a/src/view/phui/PHUIButtonView.php +++ b/src/view/phui/PHUIButtonView.php @@ -31,6 +31,7 @@ final class PHUIButtonView extends AphrontTagView { private $noCSS; private $hasCaret; private $buttonType = self::BUTTONTYPE_DEFAULT; + private $auralLabel; public function setName($name) { $this->name = $name; @@ -123,6 +124,15 @@ final class PHUIButtonView extends AphrontTagView { return $this->buttonType; } + public function setAuralLabel($aural_label) { + $this->auralLabel = $aural_label; + return $this; + } + + public function getAuralLabel() { + return $this->auralLabel; + } + public function setIcon($icon, $first = true) { if (!($icon instanceof PHUIIconView)) { $icon = id(new PHUIIconView()) @@ -265,10 +275,21 @@ final class PHUIButtonView extends AphrontTagView { $caret = phutil_tag('span', array('class' => 'caret'), ''); } + $aural = null; + if ($this->auralLabel !== null) { + $aural = phutil_tag( + 'span', + array( + 'class' => 'aural-only', + ), + $this->auralLabel); + } + + if ($this->iconFirst == true) { - return array($icon, $text, $caret); + return array($aural, $icon, $text, $caret); } else { - return array($text, $icon, $caret); + return array($aural, $text, $icon, $caret); } } } diff --git a/src/view/phui/PHUIHeadThingView.php b/src/view/phui/PHUIHeadThingView.php index dd788399d4..ab2feee984 100644 --- a/src/view/phui/PHUIHeadThingView.php +++ b/src/view/phui/PHUIHeadThingView.php @@ -55,7 +55,7 @@ final class PHUIHeadThingView extends AphrontTagView { $image = phutil_tag( 'a', array( - 'class' => 'phui-head-thing-image', + 'class' => 'phui-head-thing-image visual-only', 'style' => 'background-image: url('.$this->image.');', 'href' => $this->imageHref, )); diff --git a/src/view/phui/PHUITimelineEventView.php b/src/view/phui/PHUITimelineEventView.php index e64b9b06b2..e44332c1b5 100644 --- a/src/view/phui/PHUITimelineEventView.php +++ b/src/view/phui/PHUITimelineEventView.php @@ -404,7 +404,7 @@ final class PHUITimelineEventView extends AphrontView { ($this->userHandle->getURI()) ? 'a' : 'div', array( 'style' => 'background-image: url('.$image_uri.')', - 'class' => 'phui-timeline-image', + 'class' => 'phui-timeline-image visual-only', 'href' => $this->userHandle->getURI(), ), '');