vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #2918 - Improve focus method to Components

pull/2929/head
mertsincan 2022-09-01 00:34:50 +01:00
parent 12190e45fd
commit 5ed1341cff
7 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/accordion/Accordion.vue
View File

@ -196,7 +196,7 @@ export default {
}, },
changeFocusedTab(event, element) { changeFocusedTab(event, element) {
if (element) { if (element) {
element.focus(); DomHandler.focus(element);
if (this.selectOnFocus) { if (this.selectOnFocus) {
const index = parseInt(element.parentElement.parentElement.dataset.index, 10); const index = parseInt(element.parentElement.parentElement.dataset.index, 10);

14
src/components/autocomplete/AutoComplete.vue
View File

@ -278,7 +278,7 @@ export default {
this.overlayVisible = true; this.overlayVisible = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1); this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
isFocus && this.$refs.focusInput.focus(); isFocus && DomHandler.focus(this.$refs.focusInput);
}, },
hide(isFocus) { hide(isFocus) {
const _hide = () => { const _hide = () => {
@ -287,7 +287,7 @@ export default {
this.overlayVisible = false; this.overlayVisible = false;
this.focusedOptionIndex = -1; this.focusedOptionIndex = -1;
isFocus && this.$refs.focusInput && this.$refs.focusInput.focus(); isFocus && DomHandler.focus(this.$refs.focusInput);
} }
setTimeout(() => { _hide() }, 0); // For ScreenReaders setTimeout(() => { _hide() }, 0); // For ScreenReaders
@ -446,7 +446,7 @@ export default {
} }
if (!this.overlay || !this.overlay.contains(event.target)) { if (!this.overlay || !this.overlay.contains(event.target)) {
this.$refs.focusInput.focus(); DomHandler.focus(this.$refs.focusInput);
} }
}, },
onDropdownClick(event) { onDropdownClick(event) {
@ -456,7 +456,7 @@ export default {
this.hide(true); this.hide(true);
} }
else { else {
this.$refs.focusInput.focus(); DomHandler.focus(this.$refs.focusInput);
query = this.$refs.focusInput.value; query = this.$refs.focusInput.value;
if (this.dropdownMode === 'blank') if (this.dropdownMode === 'blank')
@ -544,7 +544,7 @@ export default {
if (this.multiple) { if (this.multiple) {
if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) { if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
this.$refs.multiContainer.focus(); DomHandler.focus(this.$refs.multiContainer);
this.focusedMultipleOptionIndex = this.modelValue.length; this.focusedMultipleOptionIndex = this.modelValue.length;
} }
else { else {
@ -625,7 +625,7 @@ export default {
if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) { if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
this.focusedMultipleOptionIndex = -1; this.focusedMultipleOptionIndex = -1;
this.$refs.focusInput.focus(); DomHandler.focus(this.$refs.focusInput);
} }
}, },
onBackspaceKeyOnMultiple(event) { onBackspaceKeyOnMultiple(event) {
@ -783,7 +783,7 @@ export default {
this.updateModel(event, value); this.updateModel(event, value);
this.$emit('item-unselect', { originalEvent: event, value: removedOption }); this.$emit('item-unselect', { originalEvent: event, value: removedOption });
this.dirty = true; this.dirty = true;
this.$refs.focusInput.focus(); DomHandler.focus(this.$refs.focusInput);
}, },
changeFocusedOptionIndex(event, index) { changeFocusedOptionIndex(event, index) {
if (this.focusedOptionIndex !== index) { if (this.focusedOptionIndex !== index) {

8
src/components/cascadeselect/CascadeSelect.vue
View File

@ -200,7 +200,7 @@ export default {
this.focusedOptionInfo = { index: (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1), level: 0, parentKey: '' }; this.focusedOptionInfo = { index: (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1), level: 0, parentKey: '' };
} }
isFocus && this.$refs.focusInput.focus(); isFocus && DomHandler.focus(this.$refs.focusInput);
}, },
hide(isFocus) { hide(isFocus) {
const _hide = () => { const _hide = () => {
@ -209,7 +209,7 @@ export default {
this.activeOptionPath = []; this.activeOptionPath = [];
this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' }; this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
isFocus && this.$refs.focusInput && this.$refs.focusInput.focus(); isFocus && DomHandler.focus(this.$refs.focusInput);
} }
setTimeout(() => { _hide() }, 0); // For ScreenReaders setTimeout(() => { _hide() }, 0); // For ScreenReaders
@ -305,7 +305,7 @@ export default {
this.activeOptionPath = activeOptionPath; this.activeOptionPath = activeOptionPath;
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide); grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
isFocus && this.$refs.focusInput.focus(); isFocus && DomHandler.focus(this.$refs.focusInput);
}, },
onOptionSelect(event, processedOption, isHide = true) { onOptionSelect(event, processedOption, isHide = true) {
const value = this.getOptionValue(processedOption.option); const value = this.getOptionValue(processedOption.option);
@ -325,7 +325,7 @@ export default {
if (!this.overlay || !this.overlay.contains(event.target)) { if (!this.overlay || !this.overlay.contains(event.target)) {
this.overlayVisible ? this.hide() : this.show(); this.overlayVisible ? this.hide() : this.show();
this.$refs.focusInput.focus(); DomHandler.focus(this.$refs.focusInput);
} }
this.$emit('click', event); this.$emit('click', event);

6
src/components/listbox/Listbox.vue
View File

@ -187,7 +187,7 @@ export default {
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1; return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
}, },
onFirstHiddenFocus() { onFirstHiddenFocus() {
this.list.focus(); DomHandler.focus(this.list);
const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)'); const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
this.$refs.lastHiddenFocusableElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? -1 : undefined; this.$refs.lastHiddenFocusableElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? -1 : undefined;
@ -198,11 +198,11 @@ export default {
if (relatedTarget === this.list) { if (relatedTarget === this.list) {
const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)'); const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not(.p-hidden-focusable)');
firstFocusableEl && firstFocusableEl.focus(); DomHandler.focus(firstFocusableEl);
this.$refs.firstHiddenFocusableElement.tabIndex = undefined; this.$refs.firstHiddenFocusableElement.tabIndex = undefined;
} }
else { else {
this.$refs.firstHiddenFocusableElement.focus(); DomHandler.focus(this.$refs.firstHiddenFocusableElement);
} }
this.$refs.lastHiddenFocusableElement.tabIndex = -1; this.$refs.lastHiddenFocusableElement.tabIndex = -1;

2
src/components/tabview/TabView.vue
View File

@ -231,7 +231,7 @@ export default {
}, },
changeFocusedTab(event, element) { changeFocusedTab(event, element) {
if (element) { if (element) {
element.focus(); DomHandler.focus(element);
this.scrollInView({ element }); this.scrollInView({ element });
if (this.selectOnFocus) { if (this.selectOnFocus) {

4
src/components/utils/DomHandler.js
View File

@ -503,6 +503,10 @@ export default {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement); return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
}, },
focus(el, options) {
el && document.activeElement !== el && el.focus(options);
},
getFocusableElements(element, selector = '') { getFocusableElements(element, selector = '') {
let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}, let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}, [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},

1
src/components/utils/Utils.d.ts vendored
View File

@ -44,6 +44,7 @@ export declare class DomHandler {
static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void; static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
static isExist(el: HTMLElement): boolean; static isExist(el: HTMLElement): boolean;
static isClient(): boolean; static isClient(): boolean;
static focus(el: HTMLElement, options?: FocusOptions): void;
static getFocusableElements(el: HTMLElement, selector?: string): any[]; static getFocusableElements(el: HTMLElement, selector?: string): any[];
static getFirstFocusableElement(el: HTMLElement, selector?: string): any; static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
static isClickable(el: HTMLElement): boolean; static isClickable(el: HTMLElement): boolean;