From 3b764469fd6872d3c0d1e7536757b8764e026e04 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Fri, 19 Jan 2024 11:13:17 +0300 Subject: [PATCH 1/3] Refactor #5106 - OrderList accessibility --- components/lib/orderlist/OrderList.vue | 107 ++++++++++++++----------- 1 file changed, 60 insertions(+), 47 deletions(-) diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue index b161371d1..55eebd88f 100755 --- a/components/lib/orderlist/OrderList.vue +++ b/components/lib/orderlist/OrderList.vue @@ -141,17 +141,7 @@ export default { }, onListFocus(event) { this.focused = true; - const selectedFirstItem = this.autoOptionFocus - ? DomHandler.findSingle(this.list, '[data-p-highlight="true"]') || DomHandler.findSingle(this.list, '[data-pc-section="item"]') - : DomHandler.findSingle(this.list, '[data-p-highlight="true"]'); - - if (selectedFirstItem) { - const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.list.children); - const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1; - - this.changeFocusedOptionIndex(index); - } - + this.findCurrentFocusedIndex(); this.$emit('focus', event); }, onListBlur(event) { @@ -203,7 +193,7 @@ export default { this.focusedOptionIndex = index; }, onArrowDownKey(event) { - const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex); + const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstSelectedOptionIndex(); this.changeFocusedOptionIndex(optionIndex); @@ -214,7 +204,7 @@ export default { event.preventDefault(); }, onArrowUpKey(event) { - const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex); + const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastSelectedOptionIndex(); this.changeFocusedOptionIndex(optionIndex); @@ -226,9 +216,7 @@ export default { }, onHomeKey(event) { if (event.ctrlKey && event.shiftKey) { - const items = DomHandler.find(this.list, '[data-pc-section="item"]'); - const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + const matchedOptionIndex = this.findMatchedOptionIndex(); this.d_selection = [...this.modelValue].slice(0, matchedOptionIndex + 1); this.$emit('update:selection', this.d_selection); @@ -244,9 +232,7 @@ export default { }, onEndKey(event) { if (event.ctrlKey && event.shiftKey) { - const items = DomHandler.find(this.list, '[data-pc-section="item"]'); - const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + const matchedOptionIndex = this.findMatchedOptionIndex(); this.d_selection = [...this.modelValue].slice(matchedOptionIndex, items.length); this.$emit('update:selection', this.d_selection); @@ -255,28 +241,23 @@ export default { value: this.d_selection }); } else { - this.changeFocusedOptionIndex(DomHandler.find(this.list, '[data-pc-section="item"]').length - 1); + this.changeFocusedOptionIndex(this.findAllItems().length - 1); } event.preventDefault(); }, onEnterKey(event) { - const items = DomHandler.find(this.list, '[data-pc-section="item"]'); - const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + const matchedOptionIndex = this.findMatchedOptionIndex(); this.onItemClick(event, this.modelValue[matchedOptionIndex], matchedOptionIndex); - event.preventDefault(); }, onSpaceKey(event) { event.preventDefault(); if (event.shiftKey && this.d_selection && this.d_selection.length > 0) { - const items = DomHandler.find(this.list, '[data-pc-section="item"]'); const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.modelValue]); - const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + const matchedOptionIndex = this.findMatchedOptionIndex(); this.d_selection = [...this.modelValue].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1); this.$emit('update:selection', this.d_selection); @@ -288,20 +269,61 @@ export default { this.onEnterKey(event); } }, - findNextOptionIndex(index) { - const items = DomHandler.find(this.list, '[data-pc-section="item"]'); - const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + findAllItems() { + return DomHandler.find(this.list, '[data-pc-section="item"]'); + }, + findFocusedItem() { + return DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); + }, + findCurrentFocusedIndex() { + this.focusedOptionIndex = this.findFirstSelectedOptionIndex(); + + if (this.autoOptionFocus && this.focusedOptionIndex === -1) { + this.focusedOptionIndex = this.findFirstFocusedOptionIndex(); + } + + this.scrollInView(this.focusedOptionIndex); + }, + findFirstFocusedOptionIndex() { + const firstFocusableItem = DomHandler.findSingle(this.list, '[data-pc-section="item"]'); + + return DomHandler.getAttribute(firstFocusableItem, 'id'); + }, + findFirstSelectedOptionIndex() { + if (this.hasSelectedOption) { + const selectedFirstItem = DomHandler.findSingle(this.list, '[data-p-highlight="true"]'); + + return DomHandler.getAttribute(selectedFirstItem, 'id'); + } + + return -1; + }, + findLastSelectedOptionIndex() { + if (this.hasSelectedOption) { + const selectedItems = DomHandler.find(this.list, '[data-p-highlight="true"]'); + + return ObjectUtils.findIndexInList(selectedItems[selectedItems.length - 1], this.list.children); + } + + return -1; + }, + findMatchedOptionIndex(id = this.focusedOptionIndex) { + const items = this.findAllItems(); + + return [...items].findIndex((link) => link.id === id); + }, + findNextOptionIndex(id) { + const matchedOptionIndex = this.findMatchedOptionIndex(id); return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; }, - findPrevOptionIndex(index) { - const items = DomHandler.find(this.list, '[data-pc-section="item"]'); - const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + findPrevOptionIndex(id) { + const matchedOptionIndex = this.findMatchedOptionIndex(id); return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; }, changeFocusedOptionIndex(index) { - const items = DomHandler.find(this.list, '[data-pc-section="item"]'); + const items = this.findAllItems(); let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index; @@ -429,7 +451,7 @@ export default { const selected = selectedIndex != -1; const metaSelection = this.itemTouched ? false : this.metaKeySelection; - const selectedId = DomHandler.find(this.list, '[data-pc-section="item"]')[index].getAttribute('id'); + const selectedId = this.findAllItems()[index].getAttribute('id'); this.focusedOptionIndex = event?.type === 'click' ? -1 : selectedId; @@ -460,18 +482,6 @@ export default { onItemTouchEnd() { this.itemTouched = true; }, - findNextItem(item) { - let nextItem = item.nextElementSibling; - - if (nextItem) return !(DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item') ? this.findNextItem(nextItem) : nextItem; - else return null; - }, - findPrevItem(item) { - let prevItem = item.previousElementSibling; - - if (prevItem) return !(DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item') ? this.findPrevItem(prevItem) : prevItem; - else return null; - }, updateListScroll() { const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]'); @@ -564,6 +574,9 @@ export default { }, moveBottomAriaLabel() { return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined; + }, + hasSelectedOption() { + return ObjectUtils.isNotEmpty(this.d_selection); } }, components: { From a91450bbc554885b679dc39baa966868da089de8 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Fri, 19 Jan 2024 12:51:50 +0300 Subject: [PATCH 2/3] Refactor #5106 - OrderList improvements --- components/lib/orderlist/OrderList.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue index 55eebd88f..0bc7e67aa 100755 --- a/components/lib/orderlist/OrderList.vue +++ b/components/lib/orderlist/OrderList.vue @@ -193,7 +193,7 @@ export default { this.focusedOptionIndex = index; }, onArrowDownKey(event) { - const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstSelectedOptionIndex(); + const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex() : this.findFirstSelectedOptionIndex(); this.changeFocusedOptionIndex(optionIndex); @@ -204,7 +204,7 @@ export default { event.preventDefault(); }, onArrowUpKey(event) { - const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastSelectedOptionIndex(); + const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex() : this.findLastSelectedOptionIndex(); this.changeFocusedOptionIndex(optionIndex); @@ -312,13 +312,13 @@ export default { return [...items].findIndex((link) => link.id === id); }, - findNextOptionIndex(id) { - const matchedOptionIndex = this.findMatchedOptionIndex(id); + findNextOptionIndex() { + const matchedOptionIndex = this.findMatchedOptionIndex(); return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; }, - findPrevOptionIndex(id) { - const matchedOptionIndex = this.findMatchedOptionIndex(id); + findPrevOptionIndex() { + const matchedOptionIndex = this.findMatchedOptionIndex(); return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; }, From fbe1b664d565733abf10d89843b1b9589fd17835 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Fri, 19 Jan 2024 12:52:18 +0300 Subject: [PATCH 3/3] Refactor #5106 - PickList accessibility --- components/lib/picklist/PickList.vue | 98 ++++++++++++++++++---------- 1 file changed, 62 insertions(+), 36 deletions(-) diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue index 876460562..63f709cc7 100755 --- a/components/lib/picklist/PickList.vue +++ b/components/lib/picklist/PickList.vue @@ -260,7 +260,7 @@ export default { selection(newValue) { this.d_selection = newValue; }, - breakpoint(newValue) { + breakpoint() { this.destroyMedia(); this.initMedia(); } @@ -276,10 +276,10 @@ export default { this.destroyStyle(); this.destroyMedia(); }, - beforeMount() { - this.id = this.id || UniqueComponentId(); - }, + beforeMount() {}, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.responsive) { this.createStyle(); this.initMedia(); @@ -302,17 +302,7 @@ export default { }, onListFocus(event, listType) { this.focused[listType] = true; - const selectedFirstItem = this.autoOptionFocus - ? DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]') || DomHandler.findSingle(this.$refs[listType].$el, '[data-pc-section="item"]') - : DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]'); - - if (selectedFirstItem) { - const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.$refs[listType].$el.children); - const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1; - - this.changeFocusedOptionIndex(index, listType); - } - + this.findCurrentFocusedIndex(listType); this.$emit('focus', event); }, onListBlur(event, listType) { @@ -665,7 +655,7 @@ export default { } }, onArrowDownKey(event, listType) { - const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex, listType); + const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(listType) : this.findFirstSelectedOptionIndex(listType); this.changeFocusedOptionIndex(optionIndex, listType); @@ -676,7 +666,7 @@ export default { event.preventDefault(); }, onArrowUpKey(event, listType) { - const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex, listType); + const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(listType) : this.findLastSelectedOptionIndex(listType); this.changeFocusedOptionIndex(optionIndex, listType); @@ -687,10 +677,8 @@ export default { event.preventDefault(); }, onEnterKey(event, listType) { - const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); - const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); const listId = listType === 'sourceList' ? 0 : 1; + const matchedOptionIndex = this.findMatchedOptionIndex(listType); this.onItemClick(event, this.modelValue[listId][matchedOptionIndex], matchedOptionIndex, listId); @@ -701,10 +689,8 @@ export default { if (event.shiftKey && this.d_selection && this.d_selection.length > 0) { const listId = listType === 'sourceList' ? 0 : 1; - const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[listId][0], [...this.modelValue[listId]]); - const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + const matchedOptionIndex = this.findMatchedOptionIndex(listType); this.d_selection[listId] = [...this.modelValue[listId]].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1); this.$emit('update:selection', this.d_selection); @@ -719,9 +705,7 @@ export default { onHomeKey(event, listType) { if (event.ctrlKey && event.shiftKey) { const listId = listType === 'sourceList' ? 0 : 1; - const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); - const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + const matchedOptionIndex = this.findMatchedOptionIndex(listType); this.d_selection[listId] = [...this.modelValue[listId]].slice(0, matchedOptionIndex + 1); this.$emit('update:selection', this.d_selection); @@ -736,12 +720,11 @@ export default { event.preventDefault(); }, onEndKey(event, listType) { - const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); + const items = this.findAllItems(listType); if (event.ctrlKey && event.shiftKey) { const listId = listType === 'sourceList' ? 0 : 1; - const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); - const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + const matchedOptionIndex = this.findMatchedOptionIndex(listType); this.d_selection[listId] = [...this.modelValue[listId]].slice(matchedOptionIndex, items.length); this.$emit('update:selection', this.d_selection); @@ -755,21 +738,61 @@ export default { event.preventDefault(); }, - findNextOptionIndex(index, listType) { - const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); + findAllItems(listType) { + return DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); + }, + findFocusedItem(listType) { + return DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); + }, + findCurrentFocusedIndex(listType) { + this.focusedOptionIndex = this.findFirstSelectedOptionIndex(listType); - const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + if (this.autoOptionFocus && this.focusedOptionIndex === -1) { + this.focusedOptionIndex = this.findFirstFocusedOptionIndex(listType); + } + + this.scrollInView(this.focusedOptionIndex, listType); + }, + findFirstFocusedOptionIndex(listType) { + const firstFocusableItem = DomHandler.findSingle(this.$refs[listType].$el, '[data-pc-section="item"]'); + + return DomHandler.getAttribute(firstFocusableItem, 'id'); + }, + findFirstSelectedOptionIndex(listType) { + if (this.hasSelectedOption(listType)) { + const selectedFirstItem = DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]'); + + return DomHandler.getAttribute(selectedFirstItem, 'id'); + } + + return -1; + }, + findLastSelectedOptionIndex(listType) { + if (this.hasSelectedOption(listType)) { + const selectedItems = DomHandler.find(this.$refs[listType].$el, '[data-p-highlight="true"]'); + + return ObjectUtils.findIndexInList(selectedItems[selectedItems.length - 1], this.list.children); + } + + return -1; + }, + findMatchedOptionIndex(listType, id = this.focusedOptionIndex) { + const items = this.findAllItems(listType); + + return [...items].findIndex((link) => link.id === id); + }, + findNextOptionIndex(listType) { + const matchedOptionIndex = this.findMatchedOptionIndex(listType); return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; }, - findPrevOptionIndex(index, listType) { - const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); - const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + findPrevOptionIndex(listType) { + const matchedOptionIndex = this.findMatchedOptionIndex(listType); return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; }, changeFocusedOptionIndex(index, listType) { - const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); + const items = this.findAllItems(listType); let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index; @@ -878,6 +901,9 @@ export default { }, moveAllDisabled(list) { return ObjectUtils.isEmpty(this[list]); + }, + hasSelectedOption(listType) { + return listType === 'sourceList' ? ObjectUtils.isNotEmpty(this.d_selection[0]) : ObjectUtils.isNotEmpty(this.d_selection[0]); } }, computed: {