Improve Console screen-reader accessibility: (#11602)

- Add aria-label for Console History entries.
- Add aria-label and aria-labelledby to Console Request 'wrench' menu.
This commit is contained in:
CJ Cenizal 2017-05-11 12:42:39 -07:00 committed by GitHub
parent 2e7fed87fd
commit 880648c9e3
2 changed files with 15 additions and 5 deletions

View file

@ -12,11 +12,20 @@
</a>
</kbn-tooltip>
<span dropdown>
<a class="editor_action" dropdown-toggle href="#">
<i class="fa fa-wrench"></i>
<a
id="consoleRequestOptions"
class="editor_action"
dropdown-toggle href="#"
aria-label="Request options"
>
<span class="kuiIcon fa-wrench"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="split-button">
<ul
class="dropdown-menu"
role="menu"
aria-labelledby="consoleRequestOptions"
>
<li role="menuitem">
<a class="link" id="copy_as_curl">Copy as cURL</a>
</li>

View file

@ -9,7 +9,7 @@
ng-mouseenter="history.viewingReq = req"
ng-mouseleave="history.viewingReq = history.selectedReq"
ng-dblclick="history.restore(req)"
title="{{ req.description }}"
aria-label="{{:: 'Request: ' + history.describeReq(req) }}"
class="list-group-item history-req"
>
{{ history.describeReq(req) }}
@ -25,7 +25,8 @@
<button
class="kuiButton kuiButton--primary"
ng-disabled="!history.selectedReq"
ng-click="history.restore()">
ng-click="history.restore()"
>
Apply
</button>
</div>