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

Fixed #6899 - Galleria: 'Indicator' Slot, Keyboard Accessibility Broken

pull/6951/head
tugcekucukoglu 2024-12-11 10:56:33 +03:00
parent 9be739b81f
commit 1abbdabe40
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/primevue/src/galleria/Galleria.d.ts vendored
View File

@ -467,6 +467,14 @@ export interface GalleriaSlots {
* Index of the indicator item
*/
index: number;
/**
* Current active item index as a number.
*/
activeIndex: number;
/**
* Index of the element in tabbing order.
*/
tabindex: number;
}): VNode[];
/**
* Custom thumbnail template.

6
packages/primevue/src/galleria/GalleriaItem.vue
View File

@ -29,7 +29,7 @@
:data-p-active="isIndicatorItemActive(index)"
>
<button v-if="!templates['indicator']" type="button" :tabindex="activeIndex === index ? '0' : '-1'" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
<component v-if="templates.indicator" :is="templates.indicator" :index="index" />
<component v-if="templates.indicator" :is="templates.indicator" :index="index" :activeIndex="activeIndex" :tabindex="activeIndex === index ? '0' : '-1'" />
</li>
</ul>
</div>
@ -216,7 +216,7 @@ export default {
const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);
const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > [tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
indicators[activeIndex].children[0].tabIndex = '-1';
@ -224,7 +224,7 @@ export default {
},
findFocusedIndicatorIndex() {
const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > [tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
},