diff --git a/components/lib/galleria/GalleriaItem.vue b/components/lib/galleria/GalleriaItem.vue
index 0ae843fc4..6c4aa09e1 100755
--- a/components/lib/galleria/GalleriaItem.vue
+++ b/components/lib/galleria/GalleriaItem.vue
@@ -14,12 +14,11 @@
-
+
@@ -41,6 +40,7 @@ import BaseComponent from 'primevue/basecomponent';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
export default {
name: 'GalleriaItem',
@@ -156,8 +156,32 @@ export default {
event.preventDefault();
break;
+ case 'ArrowRight':
+ this.onRightKey();
+ break;
+
+ case 'ArrowLeft':
+ this.onLeftKey();
+ break;
+
+ case 'Home':
+ this.onHomeKey();
+ event.preventDefault();
+ break;
+
+ case 'End':
+ this.onEndKey();
+ event.preventDefault();
+ break;
+
+ case 'Tab':
+ this.onTabKey();
+ break;
+
case 'ArrowDown':
case 'ArrowUp':
+ case 'PageUp':
+ case 'PageDown':
event.preventDefault();
break;
@@ -165,6 +189,51 @@ export default {
break;
}
},
+ onRightKey() {
+ const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+ const activeIndex = this.findFocusedIndicatorIndex();
+
+ this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+ },
+ onLeftKey() {
+ const activeIndex = this.findFocusedIndicatorIndex();
+
+ this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+ },
+ onHomeKey() {
+ const activeIndex = this.findFocusedIndicatorIndex();
+
+ this.changedFocusedIndicator(activeIndex, 0);
+ },
+ onEndKey() {
+ const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+ const activeIndex = this.findFocusedIndicatorIndex();
+
+ this.changedFocusedIndicator(activeIndex, indicators.length - 1);
+ },
+ onTabKey() {
+ const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+ const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
+
+ const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
+ const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+
+ indicators[activeIndex].children[0].tabIndex = '-1';
+ indicators[highlightedIndex].children[0].tabIndex = '0';
+ },
+ findFocusedIndicatorIndex() {
+ const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+ const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
+
+ return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+ },
+ changedFocusedIndicator(prevInd, nextInd) {
+ const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+
+ indicators[prevInd].children[0].tabIndex = '-1';
+ indicators[nextInd].children[0].tabIndex = '0';
+ indicators[nextInd].children[0].focus();
+ },
isIndicatorItemActive(index) {
return this.activeIndex === index;
},