vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - For FocusTrap

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-06-22 16:53:04 +03:00
parent eea680f535
commit a6e8c4d163
2 changed files with 124 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/lib/focustrap/FocusTrap.js
View file

@ -1,3 +1,4 @@
import { BaseDirective } from 'primevue/basedirective';
import { DomHandler, ObjectUtils } from 'primevue/utils';
function bind(el, binding) {
@ -37,9 +38,9 @@ function unbind(el) {
function autoFocus(el, binding) {
const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not(.p-hidden-focusable)${autoFocusSelector}`);
let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not([data-p-hidden-focusable="true"])${autoFocusSelector}`);
autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not(.p-hidden-focusable)${firstFocusableSelector}`));
autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not([data-p-hidden-focusable="true"])${firstFocusableSelector}`));
DomHandler.focus(focusableElement);
}
@ -47,7 +48,7 @@ function onFirstHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event;
const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
: currentTarget.$_pfocustrap_lasthiddenfocusableelement;
DomHandler.focus(focusableElement);
@ -57,7 +58,7 @@ function onLastHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event;
const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not(.p-hidden-focusable)${currentTarget.$_pfocustrap_focusableselector}`)
? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
: currentTarget.$_pfocustrap_firsthiddenfocusableelement;
DomHandler.focus(focusableElement);
@ -69,10 +70,24 @@ function createHiddenFocusableElements(el, binding) {
const createFocusableElement = (onFocus) => {
const element = document.createElement('span');
element.classList.value = 'p-hidden-accessible p-hidden-focusable';
if (binding.instance.$primevue && binding.instance.$primevue.config && binding.instance.$primevue.config.unstyled) {
element.style.border = '0';
element.style.clip = 'rect(0 0 0 0)';
element.style.height = '1px';
element.style.margin = '-1px';
element.style.overflow = 'hidden';
element.style.padding = '0';
element.style.position = 'absolute';
element.style.width = '1px';
} else {
element.classList = 'p-hidden-accessible p-hidden-focusable';
}
element.tabIndex = tabIndex;
element.setAttribute('aria-hidden', 'true');
element.setAttribute('role', 'presentation');
element.setAttribute('data-p-hidden-accessible', true);
element.setAttribute('data-p-hidden-focusable', true);
element.addEventListener('focus', onFocus);
return element;
@ -83,15 +98,17 @@ function createHiddenFocusableElements(el, binding) {
firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
firstFocusableElement.setAttribute('data-pc-section', 'firstfocusableelement');
lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
lastFocusableElement.setAttribute('data-pc-section', 'lastfocusableelement');
el.prepend(firstFocusableElement);
el.append(lastFocusableElement);
}
const FocusTrap = {
const FocusTrap = BaseDirective.extend('focustrap', {
mounted(el, binding) {
const { disabled } = binding.value || {};
@ -100,7 +117,14 @@ const FocusTrap = {
bind(el, binding);
autoFocus(el, binding);
}
el.setAttribute('data-pc-section', 'root');
el.setAttribute('data-pc-name', 'focustrap');
BaseDirective.directiveElement = el;
BaseDirective.handleCSS('focustrap', el, binding);
},
updated(el, binding) {
const { disabled } = binding.value || {};
@ -109,6 +133,6 @@ const FocusTrap = {
unmounted(el) {
unbind(el);
}
};
});
export default FocusTrap;