From 92529cd409d12786985a1d418412b180aa37f070 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 22 Sep 2016 13:38:40 -0400 Subject: [PATCH] FIX: Tab ordering and outlines for wizard --- .../javascripts/wizard/components/wizard-field.js.es6 | 2 +- .../javascripts/wizard/components/wizard-step.js.es6 | 10 +++++++--- .../wizard/templates/components/invite-list.hbs | 2 +- .../wizard/templates/components/radio-button.hbs | 2 +- .../templates/components/wizard-field-dropdown.hbs | 3 ++- .../wizard/templates/components/wizard-field-text.hbs | 2 +- .../templates/components/wizard-field-textarea.hbs | 2 +- .../wizard/templates/components/wizard-step.hbs | 8 ++++---- app/assets/stylesheets/wizard.scss | 2 -- 9 files changed, 18 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/wizard/components/wizard-field.js.es6 b/app/assets/javascripts/wizard/components/wizard-field.js.es6 index 4b09212fbeb..27d291d4c06 100644 --- a/app/assets/javascripts/wizard/components/wizard-field.js.es6 +++ b/app/assets/javascripts/wizard/components/wizard-field.js.es6 @@ -7,7 +7,7 @@ export default Ember.Component.extend({ typeClass: type => `${Ember.String.dasherize(type)}-field`, @computed('field.id') - fieldClass: id => `field-${Ember.String.dasherize(id)}`, + fieldClass: id => `field-${Ember.String.dasherize(id)} wizard-focusable`, @computed('field.type', 'field.id') inputComponentName(type, id) { diff --git a/app/assets/javascripts/wizard/components/wizard-step.js.es6 b/app/assets/javascripts/wizard/components/wizard-step.js.es6 index b0a0618ab2e..c8b628f24cd 100644 --- a/app/assets/javascripts/wizard/components/wizard-step.js.es6 +++ b/app/assets/javascripts/wizard/components/wizard-step.js.es6 @@ -48,7 +48,11 @@ export default Ember.Component.extend({ keyPress(key) { if (key.keyCode === 13) { - this.send('nextStep'); + if (this.get('showDoneButton')) { + this.send('quit'); + } else { + this.send('nextStep'); + } } }, @@ -63,13 +67,13 @@ export default Ember.Component.extend({ autoFocus() { Ember.run.scheduleOnce('afterRender', () => { - const $invalid = $('.wizard-field.invalid:eq(0) input'); + const $invalid = $('.wizard-field.invalid:eq(0) .wizard-focusable'); if ($invalid.length) { return $invalid.focus(); } - $('input:eq(0)').focus(); + $('.wizard-focusable:eq(0)').focus(); }); }, diff --git a/app/assets/javascripts/wizard/templates/components/invite-list.hbs b/app/assets/javascripts/wizard/templates/components/invite-list.hbs index fb0299b704d..6b383776682 100644 --- a/app/assets/javascripts/wizard/templates/components/invite-list.hbs +++ b/app/assets/javascripts/wizard/templates/components/invite-list.hbs @@ -9,7 +9,7 @@
- {{input class="invite-email" value=inviteEmail placeholder="user@example.com"}} + {{input class="invite-email wizard-focusable" value=inviteEmail placeholder="user@example.com" tabindex="9"}}
{{combo-box value=inviteRole content=roles nameProperty="label" width="200px"}} diff --git a/app/assets/javascripts/wizard/templates/components/radio-button.hbs b/app/assets/javascripts/wizard/templates/components/radio-button.hbs index c7636811889..3973d91324a 100644 --- a/app/assets/javascripts/wizard/templates/components/radio-button.hbs +++ b/app/assets/javascripts/wizard/templates/components/radio-button.hbs @@ -1,5 +1,5 @@
- + {{#if icon}} {{fa-icon icon}} diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs index 6be3fc1a8d5..06e7034c148 100644 --- a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs +++ b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs @@ -3,4 +3,5 @@ value=field.value content=field.choices nameProperty="label" - width="400px"}} + width="400px" + tabindex="9"}} diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs index 0a5d877a82e..7e53f27dc23 100644 --- a/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs +++ b/app/assets/javascripts/wizard/templates/components/wizard-field-text.hbs @@ -1 +1 @@ -{{input elementId=field.id value=field.value class=fieldClass placeholder=field.placeholder}} +{{input elementId=field.id value=field.value class=fieldClass placeholder=field.placeholder tabindex="9"}} diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs index 8e2c042aff2..14707f3a87a 100644 --- a/app/assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs +++ b/app/assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs @@ -1 +1 @@ -{{textarea elementId=field.id value=field.value class=fieldClass placeholder=field.placeholder}} +{{textarea elementId=field.id value=field.value class=fieldClass placeholder=field.placeholder tabindex="9"}} diff --git a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs index 0395db92680..18ffac5463e 100644 --- a/app/assets/javascripts/wizard/templates/components/wizard-step.hbs +++ b/app/assets/javascripts/wizard/templates/components/wizard-step.hbs @@ -30,22 +30,22 @@
{{#if showQuitButton}} - {{i18n "wizard.quit"}} + {{i18n "wizard.quit"}} {{/if}} {{#if showBackButton}} - {{i18n "wizard.back"}} + {{i18n "wizard.back"}} {{/if}} {{#if showNextButton}} - {{/if}} {{#if showDoneButton}} - {{/if}} diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index bae9a0f28c8..8cffd2c879b 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -175,7 +175,6 @@ body.wizard { font-size: 1.0em; border: 0px; padding: 0.5em; - outline: 0; transition: background-color .3s; margin-right: 0.5em; @@ -390,7 +389,6 @@ body.wizard { padding: 6px; border: 1px solid #ccc; transition: border-color .5s; - outline: none; } &.invalid {