From a19965136ad8949e19131072a5b2832bc8735d7e Mon Sep 17 00:00:00 2001 From: sairina Date: Tue, 9 Mar 2021 19:52:24 -0800 Subject: [PATCH 01/10] WIP KTextbox updates --- lib/KTextbox/index.vue | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue index 504f364e7..4685fa40a 100644 --- a/lib/KTextbox/index.vue +++ b/lib/KTextbox/index.vue @@ -20,10 +20,11 @@ :floatingLabel="floatingLabel" :multiLine="textArea" :rows="3" + :style="changedOrFocused ? this.$coreOutline : {} " @input="updateText" @keydown="emitKeydown" - @focus="$emit('focus')" - @blur="$emit('blur')" + @focus="onFocus" + @blur="onBlur" /> @@ -191,9 +192,14 @@ * @public * Focuses on the textbox */ - focus() { + + onFocus(e) { this.changedOrFocused = true; - this.$refs.textbox.$el.querySelector('input').focus(); + this.$emit('focus', e); + }, + onBlur(e) { + this.changedOrFocused = false; + this.$emit('blur', e); }, }, }; From acad8d1f2c6cc11a2d450282f4adb7d413d54729 Mon Sep 17 00:00:00 2001 From: sairina Date: Tue, 11 May 2021 20:00:10 -0700 Subject: [PATCH 02/10] Fix merge conflict --- lib/KTextbox/index.vue | 5 ----- 1 file changed, 5 deletions(-) diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue index 5a16242cc..e8c88d09c 100644 --- a/lib/KTextbox/index.vue +++ b/lib/KTextbox/index.vue @@ -23,13 +23,8 @@ :style="changedOrFocused ? this.$coreOutline : {} " @input="updateText" @keydown="emitKeydown" -<<<<<<< HEAD - @focus="onFocus" - @blur="onBlur" -======= @focus="emitFocus" @blur="emitBlur" ->>>>>>> d98a9dbae7b8c49a9228e97f07f70ed059b7855d /> From 3c0aa4eb907ad4e17098bf7be29d2f49684ca045 Mon Sep 17 00:00:00 2001 From: sairina Date: Wed, 12 May 2021 21:11:16 -0700 Subject: [PATCH 03/10] WIP --- lib/KTextbox/index.vue | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue index e8c88d09c..48a244d1e 100644 --- a/lib/KTextbox/index.vue +++ b/lib/KTextbox/index.vue @@ -23,7 +23,7 @@ :style="changedOrFocused ? this.$coreOutline : {} " @input="updateText" @keydown="emitKeydown" - @focus="emitFocus" + @click="emitFocus" @blur="emitBlur" /> @@ -196,27 +196,19 @@ /** * Emitted with `blur` events */ + this.changedOrFocused = false; this.$emit('blur', e); }, emitFocus(e) { /** * Emitted with `focus` events */ - this.$emit('focus', e); - }, - /** - * @public - * Puts keyboard focus in the text field - */ - - onFocus(e) { + if (document.addEventListener('click')) { + this.changedOrFocused = false; + } this.changedOrFocused = true; this.$emit('focus', e); }, - onBlur(e) { - this.changedOrFocused = false; - this.$emit('blur', e); - }, }, }; From 03f6c33c0fe6fb92be41e3fa36e8cecc4a9c0a43 Mon Sep 17 00:00:00 2001 From: sairina Date: Wed, 19 May 2021 10:29:47 -0700 Subject: [PATCH 04/10] WIP --- lib/KTextbox/index.vue | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue index 48a244d1e..6ff1e7c74 100644 --- a/lib/KTextbox/index.vue +++ b/lib/KTextbox/index.vue @@ -13,6 +13,7 @@ :maxlength="maxlength" :autocomplete="autocomplete" :autocapitalize="autocapitalize" + :style="changedOrFocused ? this.$coreOutline : {'background-color': 'yellow'}" :type="type" :min="min" :max="max" @@ -20,10 +21,9 @@ :floatingLabel="floatingLabel" :multiLine="textArea" :rows="3" - :style="changedOrFocused ? this.$coreOutline : {} " @input="updateText" @keydown="emitKeydown" - @click="emitFocus" + @focus="emitFocus" @blur="emitBlur" /> @@ -197,18 +197,29 @@ * Emitted with `blur` events */ this.changedOrFocused = false; + console.log('emit blur changedorfocused', this.changedOrFocused) this.$emit('blur', e); }, emitFocus(e) { /** * Emitted with `focus` events */ - if (document.addEventListener('click')) { - this.changedOrFocused = false; - } + document.addEventListener('click', this.handleFocusOnKeyboard); this.changedOrFocused = true; this.$emit('focus', e); }, + handleFocusOnKeyboard() { + this.changedOrFocused = false; + console.log('handlefocus on keybard', this.changedOrFocused) + }, + /** + * @public + * Puts keyboard focus in the text field + */ + focus() { + this.changedOrFocused = true; + this.$refs.textbox.$el.querySelector('input').focus(); + }, }, }; @@ -219,6 +230,7 @@ .textbox { max-width: 400px; + } .mh { From 0d7484e60c953f08f2955dc5dc57082d48938cae Mon Sep 17 00:00:00 2001 From: sairina Date: Fri, 21 May 2021 13:51:38 -0700 Subject: [PATCH 05/10] Fix styling in KTextbox and remove focusTriggersKeyboardModality method --- lib/KTextbox/index.vue | 8 +--- lib/styles/trackInputModality.js | 73 ++++++++++++++++---------------- yarn.lock | 8 ++-- 3 files changed, 42 insertions(+), 47 deletions(-) diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue index 6ff1e7c74..74f5854c7 100644 --- a/lib/KTextbox/index.vue +++ b/lib/KTextbox/index.vue @@ -13,7 +13,7 @@ :maxlength="maxlength" :autocomplete="autocomplete" :autocapitalize="autocapitalize" - :style="changedOrFocused ? this.$coreOutline : {'background-color': 'yellow'}" + :style="changedOrFocused ? this.$coreOutline : {}" :type="type" :min="min" :max="max" @@ -197,21 +197,15 @@ * Emitted with `blur` events */ this.changedOrFocused = false; - console.log('emit blur changedorfocused', this.changedOrFocused) this.$emit('blur', e); }, emitFocus(e) { /** * Emitted with `focus` events */ - document.addEventListener('click', this.handleFocusOnKeyboard); this.changedOrFocused = true; this.$emit('focus', e); }, - handleFocusOnKeyboard() { - this.changedOrFocused = false; - console.log('handlefocus on keybard', this.changedOrFocused) - }, /** * @public * Puts keyboard focus in the text field diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js index 5a96fab98..a6a1df2b8 100644 --- a/lib/styles/trackInputModality.js +++ b/lib/styles/trackInputModality.js @@ -9,50 +9,50 @@ import globalThemeState from './globalThemeState'; function setUpEventHandlers(disableFocusRingByDefault) { let hadKeyboardEvent = false; - const keyboardModalityWhitelist = [ - 'input:not([type])', - 'input[type=text]', - 'input[type=number]', - 'input[type=date]', - 'input[type=time]', - 'input[type=datetime]', - 'textarea', - '[role=textbox]', - '[supports-modality=keyboard]', - ].join(','); + // const keyboardModalityWhitelist = [ + // 'input:not([type])', + // 'input[type=text]', + // 'input[type=number]', + // 'input[type=date]', + // 'input[type=time]', + // 'input[type=datetime]', + // 'textarea', + // '[role=textbox]', + // '[supports-modality=keyboard]', + // ].join(','); let isHandlingKeyboardThrottle; - const matcher = (() => { - const el = document.body; + // const matcher = (() => { + // const el = document.body; - if (el.matchesSelector) { - return el.matchesSelector; - } + // if (el.matchesSelector) { + // return el.matchesSelector; + // } - if (el.webkitMatchesSelector) { - return el.webkitMatchesSelector; - } + // if (el.webkitMatchesSelector) { + // return el.webkitMatchesSelector; + // } - if (el.mozMatchesSelector) { - return el.mozMatchesSelector; - } + // if (el.mozMatchesSelector) { + // return el.mozMatchesSelector; + // } - if (el.msMatchesSelector) { - return el.msMatchesSelector; - } - })(); + // if (el.msMatchesSelector) { + // return el.msMatchesSelector; + // } + // })(); - const focusTriggersKeyboardModality = function(el) { - let triggers = false; + // const focusTriggersKeyboardModality = function(el) { + // let triggers = false; - if (matcher) { - triggers = - matcher.call(el, keyboardModalityWhitelist) && matcher.call(el, ':not([readonly])'); - } + // if (matcher) { + // triggers = + // matcher.call(el, keyboardModalityWhitelist) && matcher.call(el, ':not([readonly])'); + // } - return triggers; - }; + // return triggers; + // }; if (disableFocusRingByDefault) { const css = 'body :focus:not([modality=keyboard]) { outline: none; }'; @@ -89,8 +89,8 @@ function setUpEventHandlers(disableFocusRingByDefault) { document.body.addEventListener( 'focus', - e => { - if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) { + () => { + if (hadKeyboardEvent) { globalThemeState.inputModality = 'keyboard'; } }, @@ -119,5 +119,6 @@ export default function trackInputModality({ disableFocusRingByDefault = true } document.addEventListener('DOMContentLoaded', function() { setUpEventHandlers(disableFocusRingByDefault); }); + } } diff --git a/yarn.lock b/yarn.lock index ca6d304bd..2db0b7f7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15488,10 +15488,10 @@ vue-client-only@^2.0.0: resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c" integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA== -vue-docgen-api@^4.15.1: - version "4.38.1" - resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.38.1.tgz#362422c8ab16f007e712744b3a7d2ed16c3230f5" - integrity sha512-w5mM5Vppw+7ucN4HjwLLdqiZee5k7cEVGARGKgBdxRmpr88MUrLlYhUNLiYVhsTLFh0WNpfHAW8qW0lOTE8TXQ== +vue-docgen-api@^4.38.1: + version "4.38.2" + resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.38.2.tgz#c9beafd81a274aa89ebe435351697372658c2f40" + integrity sha512-7kRXrlhabxsqKEwqPBLb+6rNcRSbVsSLm5BjnE5/LTlUNcEiwE5q6rENQRbm0WK+eAPOrQHD0pZXH6+AyR2/gA== dependencies: "@babel/parser" "^7.13.12" "@babel/types" "^7.13.12" From 2b3aeb22c1c927cbaf0829053a253b1751a60cde Mon Sep 17 00:00:00 2001 From: sairina Date: Fri, 21 May 2021 14:08:06 -0700 Subject: [PATCH 06/10] Fix linting --- lib/KTextbox/index.vue | 5 ++--- lib/styles/trackInputModality.js | 1 - 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/KTextbox/index.vue b/lib/KTextbox/index.vue index 74f5854c7..16ea27381 100644 --- a/lib/KTextbox/index.vue +++ b/lib/KTextbox/index.vue @@ -211,8 +211,8 @@ * Puts keyboard focus in the text field */ focus() { - this.changedOrFocused = true; - this.$refs.textbox.$el.querySelector('input').focus(); + this.changedOrFocused = true; + this.$refs.textbox.$el.querySelector('input').focus(); }, }, }; @@ -224,7 +224,6 @@ .textbox { max-width: 400px; - } .mh { diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js index a6a1df2b8..4ba046c86 100644 --- a/lib/styles/trackInputModality.js +++ b/lib/styles/trackInputModality.js @@ -119,6 +119,5 @@ export default function trackInputModality({ disableFocusRingByDefault = true } document.addEventListener('DOMContentLoaded', function() { setUpEventHandlers(disableFocusRingByDefault); }); - } } From f6dd6232cc280ca512e14ccf97dff40fa50f792c Mon Sep 17 00:00:00 2001 From: sairina Date: Fri, 28 May 2021 14:18:16 -0700 Subject: [PATCH 07/10] Make focus ring appear with focus-visible in KSwitch --- lib/KSwitch.vue | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue index 033362ed7..2f1974e33 100644 --- a/lib/KSwitch.vue +++ b/lib/KSwitch.vue @@ -1,6 +1,6 @@