diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 75e17b0..48f0440 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -68,9 +68,51 @@ const setAttributes = (): void => { }); }; + const updateIndicatorAttributes = (indicator: HTMLElement, isInteractive: boolean) => { + if (isInteractive) { + indicator.setAttribute("role", "button"); + indicator.setAttribute("tabindex", "0"); + indicator.setAttribute("aria-label", "Clear selection"); + } else { + indicator.setAttribute("role", "presentation"); + indicator.removeAttribute("tabindex"); + indicator.removeAttribute("aria-label"); + } + }; + + const setAriaLabelsForIndicators = () => { + document.querySelectorAll('[class*="control"]').forEach((control) => { + const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement; + if (!indicatorsParent) return; + + const indicators = indicatorsParent.querySelectorAll('[class*="indicatorContainer"]'); + const hasSelection = indicators.length === 2; + + indicators.forEach((indicator, index) => { + const isClearButton = hasSelection && index === 0; + updateIndicatorAttributes(indicator as HTMLElement, isClearButton); + }); + }); + }; + + // Initial static setup setRoleToPresentation('[id*="live-region"]', "presentation"); setRoleToPresentation('[class*="indicatorSeparator"]', "separator"); setRoleToPresentation('[class*="a11yText"]', "presentation"); + + // Dynamic setup after render + setTimeout(() => { + setAriaLabelsForIndicators(); + + const observer = new MutationObserver(setAriaLabelsForIndicators); + + document.querySelectorAll('[class*="control"]').forEach((control) => { + const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement; + if (indicatorsParent) { + observer.observe(indicatorsParent, { childList: true, subtree: false }); + } + }); + }, 100); }; export const SelectMultiple = ({ diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index bd5a047..c7c2ad1 100644 --- a/src/components/logo/Logo.tsx +++ b/src/components/logo/Logo.tsx @@ -6,15 +6,18 @@ interface LogoProps { variant?: "header" | "footer" | "navbar"; onClick?: () => any; layoutClassName?: string; + altText?: string; } -export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header" }) => { +export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header", altText }) => { return (
);