Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui: Keyboard navigation improvements #7090

Merged
merged 3 commits into from
Jan 20, 2020
Merged

ui: Keyboard navigation improvements #7090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8faaaa8
ui: Improve keyboard access for some custom components
Jan 20, 2020
33d729d
ui: Add some accessibility related metadata
Jan 20, 2020
c0bb47a
Use conditionals instead of switches
Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion ui-v2/app/components/radio-group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
import Component from '@ember/component';

const ENTER = 13;
export default Component.extend({
tagName: 'fieldset',
tagName: '',
keyboardAccess: false,
actions: {
keydown: function(e) {
if (e.keyCode === ENTER) {
e.target.dispatchEvent(new MouseEvent('click'));
}
},
},
});
11 changes: 9 additions & 2 deletions ui-v2/app/components/tab-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import Component from '@ember/component';

const ENTER = 13;
export default Component.extend({
name: 'tab',
tagName: 'nav',
classNames: ['tab-nav'],
tagName: '',
actions: {
keydown: function(e) {
if (e.keyCode === ENTER) {
e.target.dispatchEvent(new MouseEvent('click'));
}
},
},
});
2 changes: 1 addition & 1 deletion ui-v2/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="{{content-for "root-class"}}">
<html lang="en" class="{{content-for "root-class"}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down
2 changes: 1 addition & 1 deletion ui-v2/app/templates/components/acl-filter.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{{!<form>}}
{{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>}}
2 changes: 1 addition & 1 deletion ui-v2/app/templates/components/catalog-filter.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{!<form>}}
{{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='Critical Checks' value='critical')
(hash label='Warning Checks' value='warning')
Expand Down
6 changes: 3 additions & 3 deletions ui-v2/app/templates/components/hashicorp-consul.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<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>
<input type="checkbox" name="menu" id="main-nav-toggle" onchange={{ action 'change'}} />
<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'}} />
<label for="main-nav-toggle">
Toggle Menu
</label>
<div>
<label for="main-nav-toggle">
<span>Close</span>
</label>
<nav>
<nav aria-label="Main">
{{#if dc}}
<ul>
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (gt nspaces.length 0))}}
Expand Down
2 changes: 1 addition & 1 deletion ui-v2/app/templates/components/intention-filter.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{{!<form>}}
{{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>}}
16 changes: 8 additions & 8 deletions ui-v2/app/templates/components/radio-group.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{{!<fieldset>}}
<div role="radiogroup" id="radiogroup_{{name}}" data-test-radiogroup="{{name}}">{{! menu?}}
<fieldset>
<div role="radiogroup" id="radiogroup_{{name}}" data-test-radiogroup={{name}}>{{! menu?}}
{{#each items as |item|}}
<label 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}} />
<span>{{item.label}}</span>
</label>
<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}} />
<span>{{item.label}}</span>
</label>
{{/each}}
</div>
{{!</fieldset>}}
</div>
</fieldset>
22 changes: 11 additions & 11 deletions ui-v2/app/templates/components/tab-nav.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{{!<nav role="tablist">}}
<ul>
<nav role="tablist" class="tab-nav">
<ul>
{{#each items as |item|}}
<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">
<li class={{if (or item.selected (eq selected (if item.label (slugify item.label) (slugify item)))) 'selected'}}>
<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 }}
<a href="{{ item.href }}">{{ item.label }}</a>
{{ else }}
<a>{{ item }}</a>
<a href={{item.href}}>{{item.label}}</a>
{{else}}
<a>{{ item }}</a>
{{/if}}
</label>
</li>
</label>
</li>
{{/each}}
</ul>
{{!</nav>}}
</ul>
</nav>
4 changes: 2 additions & 2 deletions ui-v2/app/templates/components/tab-section.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
{{yield}}
{{yield}}
</div>