luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Keyboard navigation improvements (#7090) 

* ui: Improve keyboard access for some custom components

* ui: Add some accessibility related metadata
This commit is contained in:
John Cowen 2020-01-20 14:15:15 +00:00 committed by GitHub
parent 35c4fd03ab
commit 9dc83806d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 47 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui-v2/app/components/radio-group.js
View File

@ -1,5 +1,14 @@
import Component from '@ember/component'; import Component from '@ember/component';
const ENTER = 13;
export default Component.extend({ export default Component.extend({
tagName: 'fieldset', tagName: '',
keyboardAccess: false,
actions: {
keydown: function(e) {
if (e.keyCode === ENTER) {
e.target.dispatchEvent(new MouseEvent('click'));
}
},
},
}); });

11
ui-v2/app/components/tab-nav.js
View File

@ -1,7 +1,14 @@
import Component from '@ember/component'; import Component from '@ember/component';
const ENTER = 13;
export default Component.extend({ export default Component.extend({
name: 'tab', name: 'tab',
tagName: 'nav', tagName: '',
classNames: ['tab-nav'], actions: {
keydown: function(e) {
if (e.keyCode === ENTER) {
e.target.dispatchEvent(new MouseEvent('click'));
}
},
},
}); });

2
ui-v2/app/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="{{content-for "root-class"}}"> <html lang="en" class="{{content-for "root-class"}}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

2
ui-v2/app/templates/components/acl-filter.hbs
View File

@ -1,4 +1,4 @@
{{!<form>}} {{!<form>}}
{{freetext-filter searchable=searchable value=search placeholder="Search by name/token"}} {{freetext-filter searchable=searchable value=search placeholder="Search by name/token"}}
{{radio-group name="type" value=type items=filters onchange=(action onchange)}} {{radio-group keyboardAccess=true name="type" value=type items=filters onchange=(action onchange)}}
{{!</form>}} {{!</form>}}

2
ui-v2/app/templates/components/catalog-filter.hbs
View File

@ -1,6 +1,6 @@
{{!<form>}} {{!<form>}}
{{freetext-filter searchable=searchable value=search placeholder="Search by name"}} {{freetext-filter searchable=searchable value=search placeholder="Search by name"}}
{{radio-group name="status" value=status items=(array {{radio-group keyboardAccess=true name="status" value=status items=(array
(hash label='All (Any Status)' value='' ) (hash label='All (Any Status)' value='' )
(hash label='Critical Checks' value='critical') (hash label='Critical Checks' value='critical')
(hash label='Warning Checks' value='warning') (hash label='Warning Checks' value='warning')

6
ui-v2/app/templates/components/hashicorp-consul.hbs
View File

@ -1,6 +1,6 @@
<header role="banner" data-test-navigation> <header role="banner" data-test-navigation>
<a data-test-main-nav-logo href={{href-to 'index'}}><svg width="28" height="27" xmlns="http://www.w3.org/2000/svg"><path d="M13.284 16.178a2.876 2.876 0 1 1-.008-5.751 2.876 2.876 0 0 1 .008 5.75zm5.596-1.547a1.333 1.333 0 1 1 0-2.667 1.333 1.333 0 0 1 0 2.667zm4.853 1.249a1.271 1.271 0 1 1 .027-.107c0 .031 0 .067-.027.107zm-.937-3.436a1.333 1.333 0 1 1 .986-1.595c.033.172.033.348 0 .52-.07.53-.465.96-.986 1.075zm4.72 3.29a1.333 1.333 0 1 1-1.076-1.538 1.333 1.333 0 0 1 1.116 1.417.342.342 0 0 0-.027.12h-.013zm-1.08-3.33a1.333 1.333 0 1 1 1.088-1.524c.014.114.014.229 0 .342a1.333 1.333 0 0 1-1.102 1.182h.014zm-.925 7.925a1.333 1.333 0 1 1 .165-.547c-.01.193-.067.38-.165.547zm-.48-12.191a1.333 1.333 0 1 1 .507-1.814c.14.237.198.514.164.787-.038.438-.289.828-.67 1.045v-.018zM13.333 26.667C5.97 26.667 0 20.697 0 13.333 0 5.97 5.97 0 13.333 0c2.929-.01 5.778.955 8.098 2.742L19.8 4.89a10.667 10.667 0 0 0-17.133 8.444 10.667 10.667 0 0 0 17.137 8.471l1.627 2.13a13.218 13.218 0 0 1-8.098 2.733z" fill="#FFF"/></svg></a> <a data-test-main-nav-logo href={{href-to 'index'}}><svg width="28" height="27" xmlns="http://www.w3.org/2000/svg"><title>Consul</title><path d="M13.284 16.178a2.876 2.876 0 1 1-.008-5.751 2.876 2.876 0 0 1 .008 5.75zm5.596-1.547a1.333 1.333 0 1 1 0-2.667 1.333 1.333 0 0 1 0 2.667zm4.853 1.249a1.271 1.271 0 1 1 .027-.107c0 .031 0 .067-.027.107zm-.937-3.436a1.333 1.333 0 1 1 .986-1.595c.033.172.033.348 0 .52-.07.53-.465.96-.986 1.075zm4.72 3.29a1.333 1.333 0 1 1-1.076-1.538 1.333 1.333 0 0 1 1.116 1.417.342.342 0 0 0-.027.12h-.013zm-1.08-3.33a1.333 1.333 0 1 1 1.088-1.524c.014.114.014.229 0 .342a1.333 1.333 0 0 1-1.102 1.182h.014zm-.925 7.925a1.333 1.333 0 1 1 .165-.547c-.01.193-.067.38-.165.547zm-.48-12.191a1.333 1.333 0 1 1 .507-1.814c.14.237.198.514.164.787-.038.438-.289.828-.67 1.045v-.018zM13.333 26.667C5.97 26.667 0 20.697 0 13.333 0 5.97 5.97 0 13.333 0c2.929-.01 5.778.955 8.098 2.742L19.8 4.89a10.667 10.667 0 0 0-17.133 8.444 10.667 10.667 0 0 0 17.137 8.471l1.627 2.13a13.218 13.218 0 0 1-8.098 2.733z" fill="#FFF"/></svg></a>
<input type="checkbox" name="menu" id="main-nav-toggle" onchange={{ action 'change'}} /> <input type="checkbox" name="menu" id="main-nav-toggle" onchange={{action 'change'}} />
<label for="main-nav-toggle"> <label for="main-nav-toggle">
Toggle Menu Toggle Menu
</label> </label>
@ -8,7 +8,7 @@
<label for="main-nav-toggle"> <label for="main-nav-toggle">
<span>Close</span> <span>Close</span>
</label> </label>
<nav> <nav aria-label="Main">
{{#if dc}} {{#if dc}}
<ul> <ul>
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (gt nspaces.length 0))}} {{#if (and (env 'CONSUL_NSPACES_ENABLED') (gt nspaces.length 0))}}

2
ui-v2/app/templates/components/intention-filter.hbs
View File

@ -1,4 +1,4 @@
{{!<form>}} {{!<form>}}
{{freetext-filter searchable=searchable value=search placeholder="Search by Source or Destination"}} {{freetext-filter searchable=searchable value=search placeholder="Search by Source or Destination"}}
{{radio-group name="action" value=action items=filters onchange=(action onchange)}} {{radio-group keyboardAccess=true name="action" value=action items=filters onchange=(action onchange)}}
{{!</form>}} {{!</form>}}

16
ui-v2/app/templates/components/radio-group.hbs
View File

@ -1,10 +1,10 @@
{{!<fieldset>}} <fieldset>
<div role="radiogroup" id="radiogroup_{{name}}" data-test-radiogroup="{{name}}">{{! menu?}} <div role="radiogroup" id="radiogroup_{{name}}" data-test-radiogroup={{name}}>{{! menu?}}
{{#each items as |item|}} {{#each items as |item|}}
<label class="type-radio value-{{item.value}}" data-test-radiobutton="{{name}}_{{item.value}}"> {{! slugify }} <label tabindex={{if keyboardAccess '0'}} onkeydown={{if keyboardAccess (action 'keydown')}} class="type-radio value-{{item.value}}" data-test-radiobutton="{{name}}_{{item.value}}"> {{! slugify }}
<input type="radio" name={{name}} value={{item.value}} checked={{if (eq (concat value) item.value) 'checked'}} onchange={{action onchange}} /> <input type="radio" name={{name}} value={{item.value}} checked={{if (eq (concat value) item.value) 'checked'}} onchange={{action onchange}} />
<span>{{item.label}}</span> <span>{{item.label}}</span>
</label> </label>
{{/each}} {{/each}}
</div> </div>
{{!</fieldset>}} </fieldset>

22
ui-v2/app/templates/components/tab-nav.hbs
View File

@ -1,15 +1,15 @@
{{!<nav role="tablist">}} <nav role="tablist" class="tab-nav">
<ul> <ul>
{{#each items as |item|}} {{#each items as |item|}}
<li class={{if (or item.selected (eq selected (if item.label (slugify item.label) (slugify item)))) 'selected'}}> <li class={{if (or item.selected (eq selected (if item.label (slugify item.label) (slugify item)))) 'selected'}}>
<label for="radiogroup_{{name}}_{{if item.label (slugify item.label) (slugify item)}}" data-test-radiobutton="{{name}}_{{if item.label (slugify item.label) (slugify item)}}" role="tab" aria-controls="radiogroup_{{name}}_{{if item.label (slugify item.label) (slugify item)}}_panel"> <label role="tab" onkeydown={{action 'keydown'}} tabindex="0" aria-controls="radiogroup_{{name}}_{{if item.label (slugify item.label) (slugify item)}}_panel" for="radiogroup_{{name}}_{{if item.label (slugify item.label) (slugify item)}}" data-test-radiobutton="{{name}}_{{if item.label (slugify item.label) (slugify item)}}">
{{#if item.href }} {{#if item.href }}
<a href="{{ item.href }}">{{ item.label }}</a> <a href={{item.href}}>{{item.label}}</a>
{{ else }} {{else}}
<a>{{ item }}</a> <a>{{ item }}</a>
{{/if}} {{/if}}
</label> </label>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
{{!</nav>}} </nav>

4
ui-v2/app/templates/components/tab-section.hbs
View File

@ -1,4 +1,4 @@
<input onchange={{action onchange}} type="radio" name="radiogroup_{{name}}" id="radiogroup_{{name}}_{{slugify id}}" value="{{id}}" checked={{if selected 'checked'}} /> <input onchange={{action onchange}} type="radio" name="radiogroup_{{name}}" id="radiogroup_{{name}}_{{slugify id}}" value={{id}} checked={{if selected 'checked'}} />
<div role="tabpanel" id="radiogroup_{{name}}_{{id}}_panel"> <div role="tabpanel" id="radiogroup_{{name}}_{{id}}_panel">
{{yield}} {{yield}}
</div> </div>