ariaButton
웹
작성자
khsbory
작성일
2024-10-21 12:31
조회
45
import { useEffect, useCallback } from 'react';
const KeyboardAccessibleRoleButton = () => {
const handleKeyDown = useCallback((event) => {
if (event.key !== 'Enter' && event.key !== ' ') return;
const target = event.target.closest('[role="button"]');
if (target) {
event.preventDefault();
try {
target.click();
} catch (error) {
console.error('Error triggering click event:', error);
}
}
}, []);
useEffect(() => {
const roleButtons = document.querySelectorAll('[role="button"]');
roleButtons.forEach((button) => {
if (!button.hasAttribute('tabindex')) {
button.setAttribute('tabindex', '0');
}
if (!button.hasAttribute('aria-pressed')) {
button.setAttribute('aria-pressed', 'false');
}
});
document.body.addEventListener('keydown', handleKeyDown);
return () => {
document.body.removeEventListener('keydown', handleKeyDown);
};
}, [handleKeyDown]);
return null;
};
export default KeyboardAccessibleRoleButton;