1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-02-02 09:58:24 +01:00

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
This commit is contained in:
epriestley 2018-08-16 13:48:42 -07:00
parent a48e6897a4
commit 438edde031
9 changed files with 60 additions and 27 deletions

View file

@ -30,7 +30,8 @@ final class PhabricatorFavoritesMainMenuBarExtension
->addClass('phabricator-core-user-menu') ->addClass('phabricator-core-user-menu')
->setNoCSS(true) ->setNoCSS(true)
->setDropdown(true) ->setDropdown(true)
->setDropdownMenu($dropdown); ->setDropdownMenu($dropdown)
->setAuralLabel(pht('Favorites Menu'));
return array( return array(
$favorites_menu, $favorites_menu,

View file

@ -43,7 +43,8 @@ final class PeopleMainMenuBarExtension
->setIcon($profile_image) ->setIcon($profile_image)
->addClass('phabricator-core-user-menu') ->addClass('phabricator-core-user-menu')
->setHasCaret(true) ->setHasCaret(true)
->setNoCSS(true); ->setNoCSS(true)
->setAuralLabel(pht('Account Menu'));
return array( return array(
$user_menu, $user_menu,

View file

@ -230,7 +230,7 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
'div', 'div',
array( array(
'style' => 'background-image: url('.$image_uri.')', 'style' => 'background-image: url('.$image_uri.')',
'class' => 'phui-comment-image', 'class' => 'phui-comment-image visual-only',
)); ));
$wedge = phutil_tag( $wedge = phutil_tag(
'div', 'div',

View file

@ -233,7 +233,8 @@ final class PHUIDiffInlineCommentDetailView
->setIcon('fa-reply') ->setIcon('fa-reply')
->setTooltip(pht('Reply')) ->setTooltip(pht('Reply'))
->addSigil('differential-inline-reply') ->addSigil('differential-inline-reply')
->setMustCapture(true); ->setMustCapture(true)
->setAuralLabel(pht('Reply'));
} }
if ($this->editable && !$this->preview) { if ($this->editable && !$this->preview) {
@ -242,14 +243,16 @@ final class PHUIDiffInlineCommentDetailView
->setIcon('fa-pencil') ->setIcon('fa-pencil')
->setTooltip(pht('Edit')) ->setTooltip(pht('Edit'))
->addSigil('differential-inline-edit') ->addSigil('differential-inline-edit')
->setMustCapture(true); ->setMustCapture(true)
->setAuralLabel(pht('Edit'));
$action_buttons[] = id(new PHUIButtonView()) $action_buttons[] = id(new PHUIButtonView())
->setTag('a') ->setTag('a')
->setIcon('fa-trash-o') ->setIcon('fa-trash-o')
->setTooltip(pht('Delete')) ->setTooltip(pht('Delete'))
->addSigil('differential-inline-delete') ->addSigil('differential-inline-delete')
->setMustCapture(true); ->setMustCapture(true)
->setAuralLabel(pht('Delete'));
} else if ($this->preview) { } else if ($this->preview) {
$links[] = javelin_tag( $links[] = javelin_tag(
@ -268,7 +271,8 @@ final class PHUIDiffInlineCommentDetailView
->setTooltip(pht('Delete')) ->setTooltip(pht('Delete'))
->setIcon('fa-trash-o') ->setIcon('fa-trash-o')
->addSigil('differential-inline-delete') ->addSigil('differential-inline-delete')
->setMustCapture(true); ->setMustCapture(true)
->setAuralLabel(pht('Delete'));
} }
if (!$this->preview && $this->canHide()) { if (!$this->preview && $this->canHide()) {
@ -277,7 +281,8 @@ final class PHUIDiffInlineCommentDetailView
->setTooltip(pht('Collapse')) ->setTooltip(pht('Collapse'))
->setIcon('fa-times') ->setIcon('fa-times')
->addSigil('hide-inline') ->addSigil('hide-inline')
->setMustCapture(true); ->setMustCapture(true)
->setAuralLabel(pht('Collapse'));
} }
$done_button = null; $done_button = null;

View file

@ -94,21 +94,24 @@ final class PhabricatorMainMenuSearchView extends AphrontView {
'action' => '/search/', 'action' => '/search/',
'method' => 'POST', 'method' => 'POST',
), ),
phutil_tag_div('phabricator-main-menu-search-container', array( phutil_tag(
$input, 'div',
phutil_tag( array(
'button', 'class' => 'phabricator-main-menu-search-container',
array( ),
'id' => $button_id, array(
'class' => 'phui-icon-view phui-font-fa fa-search', $input,
phutil_tag(
'button',
array(
'id' => $button_id,
'class' => 'phui-icon-view phui-font-fa fa-search',
), ),
array( $search_text),
$selector, $selector,
$search_text, $primary_input,
)), $target,
$primary_input, )));
$target,
)));
return $form; return $form;
} }
@ -207,6 +210,7 @@ final class PhabricatorMainMenuSearchView extends AphrontView {
id(new PHUIIconView()) id(new PHUIIconView())
->addSigil('global-search-dropdown-icon') ->addSigil('global-search-dropdown-icon')
->setIcon($current_icon)) ->setIcon($current_icon))
->setAuralLabel(pht('Configure Global Search'))
->setDropdown(true); ->setDropdown(true);
$input = javelin_tag( $input = javelin_tag(

View file

@ -232,7 +232,8 @@ final class PhabricatorMainMenuView extends AphrontView {
->addClass('phabricator-core-user-menu') ->addClass('phabricator-core-user-menu')
->addClass('phabricator-core-user-mobile-menu') ->addClass('phabricator-core-user-mobile-menu')
->setNoCSS(true) ->setNoCSS(true)
->setDropdownMenu($dropdown); ->setDropdownMenu($dropdown)
->setAuralLabel(pht('Page Menu'));
} }
private function renderApplicationMenu() { private function renderApplicationMenu() {

View file

@ -31,6 +31,7 @@ final class PHUIButtonView extends AphrontTagView {
private $noCSS; private $noCSS;
private $hasCaret; private $hasCaret;
private $buttonType = self::BUTTONTYPE_DEFAULT; private $buttonType = self::BUTTONTYPE_DEFAULT;
private $auralLabel;
public function setName($name) { public function setName($name) {
$this->name = $name; $this->name = $name;
@ -123,6 +124,15 @@ final class PHUIButtonView extends AphrontTagView {
return $this->buttonType; 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) { public function setIcon($icon, $first = true) {
if (!($icon instanceof PHUIIconView)) { if (!($icon instanceof PHUIIconView)) {
$icon = id(new PHUIIconView()) $icon = id(new PHUIIconView())
@ -265,10 +275,21 @@ final class PHUIButtonView extends AphrontTagView {
$caret = phutil_tag('span', array('class' => 'caret'), ''); $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) { if ($this->iconFirst == true) {
return array($icon, $text, $caret); return array($aural, $icon, $text, $caret);
} else { } else {
return array($text, $icon, $caret); return array($aural, $text, $icon, $caret);
} }
} }
} }

View file

@ -55,7 +55,7 @@ final class PHUIHeadThingView extends AphrontTagView {
$image = phutil_tag( $image = phutil_tag(
'a', 'a',
array( array(
'class' => 'phui-head-thing-image', 'class' => 'phui-head-thing-image visual-only',
'style' => 'background-image: url('.$this->image.');', 'style' => 'background-image: url('.$this->image.');',
'href' => $this->imageHref, 'href' => $this->imageHref,
)); ));

View file

@ -404,7 +404,7 @@ final class PHUITimelineEventView extends AphrontView {
($this->userHandle->getURI()) ? 'a' : 'div', ($this->userHandle->getURI()) ? 'a' : 'div',
array( array(
'style' => 'background-image: url('.$image_uri.')', 'style' => 'background-image: url('.$image_uri.')',
'class' => 'phui-timeline-image', 'class' => 'phui-timeline-image visual-only',
'href' => $this->userHandle->getURI(), 'href' => $this->userHandle->getURI(),
), ),
''); '');