mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
fix(scope-selector): drop role=dialog from non-modal popover (a11y)
The scope add-popover wrapped its tabs/search/list in role=dialog with no aria-modal and no focus trap. That promises modality to AT but delivers a non-modal popover users can click past — confusing. Remove the wrapper role. The trigger button already exposes the popup via aria-haspopup=listbox + aria-expanded, and the inner div carries role=listbox aria-multiselectable. Nothing for AT to misinterpret now.
This commit is contained in:
@@ -285,13 +285,13 @@ export function ScopeSelector({ value, onAdd, onRemove, onClear, className }: Sc
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dropdown */}
|
{/* Dropdown — this is a non-modal popover containing tabs + search +
|
||||||
|
listbox. role="dialog" would imply modality and own the focus, but
|
||||||
|
we keep the page reachable behind it. The button's aria-haspopup
|
||||||
|
and aria-expanded already announce the popup; AT can navigate into
|
||||||
|
it directly. The inner div carries role="listbox". */}
|
||||||
{isDropdownOpen && (
|
{isDropdownOpen && (
|
||||||
<div
|
<div className="absolute left-0 right-0 top-full z-50 mt-1 rounded-xl border border-dark-700/50 bg-dark-800 shadow-xl backdrop-blur-md">
|
||||||
className="absolute left-0 right-0 top-full z-50 mt-1 rounded-xl border border-dark-700/50 bg-dark-800 shadow-xl backdrop-blur-md"
|
|
||||||
role="dialog"
|
|
||||||
aria-label={t('admin.referralNetwork.scope.addScope')}
|
|
||||||
>
|
|
||||||
{/* Max reached banner */}
|
{/* Max reached banner */}
|
||||||
{isMaxReached && (
|
{isMaxReached && (
|
||||||
<div className="border-b border-dark-700/50 px-3 py-1.5 text-center text-xs text-warning-400">
|
<div className="border-b border-dark-700/50 px-3 py-1.5 text-center text-xs text-warning-400">
|
||||||
|
|||||||
Reference in New Issue
Block a user