Set tabindex to -1 for dropdown menus to improve accessibility

This commit is contained in:
Sean Morley
2026-03-31 22:02:30 -04:00
parent e2a7e1886a
commit 2313e8ff0e
12 changed files with 14 additions and 5 deletions

View File

@@ -88,7 +88,7 @@
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
tabindex="-1"
class="dropdown-content z-[100] menu p-4 shadow-2xl bg-base-100 border border-base-300 rounded-2xl w-72 mt-2"
>
<!-- User Info Header -->

View File

@@ -342,6 +342,7 @@
</div>
<div
tabindex="-1"
class="dropdown-content z-[1] w-full mt-1 bg-base-100 rounded-box shadow-xl border border-base-300 max-h-[28rem] overflow-y-auto hidden sm:block"
>
<div class="p-4 border-b border-base-300 space-y-3">

View File

@@ -133,7 +133,7 @@
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
tabindex="-1"
class="menu dropdown-content mt-3 z-[999] p-4 shadow-2xl bg-base-100 border border-base-300 rounded-2xl gap-2 w-80 max-h-[80vh] overflow-y-auto"
>
{#if data.user}
@@ -276,7 +276,7 @@
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
tabindex="-1"
class="dropdown-content bg-base-100 border border-base-300 shadow-2xl z-[999] menu p-4 rounded-2xl w-80"
>
<!-- Quick Actions -->

View File

@@ -164,7 +164,7 @@
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
tabindex="-1"
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
>
<li>

View File

@@ -336,6 +336,7 @@
<DotsHorizontal class="w-5 h-5" />
</button>
<ul
tabindex="-1"
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300"
>
{#if type != 'viewonly'}
@@ -437,6 +438,7 @@
<DotsHorizontal class="w-5 h-5" />
</button>
<ul
tabindex="-1"
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300"
>
<li>

View File

@@ -1967,6 +1967,7 @@
<Plus class="w-5 h-5" />
</button>
<ul
tabindex="-1"
class="dropdown-content menu p-2 shadow bg-base-300 rounded-box w-56"
role="menu"
>

View File

@@ -42,6 +42,7 @@
</div>
{#if basemapOptions?.length}
<div
tabindex="-1"
class="dropdown-content z-20 shadow-lg bg-base-200 rounded-box w-54 max-h-80 overflow-y-auto overflow-x-hidden p-3"
role="menu"
>

View File

@@ -127,7 +127,7 @@
</svg>
</button>
<div class="dropdown-content z-50 w-full">
<div tabindex="-1" class="dropdown-content z-50 w-full">
<div class="card border border-base-300 bg-base-100 shadow-xl w-80 max-w-full">
<div class="p-3 space-y-3">
<label class="input input-bordered flex items-center gap-2">

View File

@@ -797,6 +797,7 @@
<Plus class="w-8 h-8" />
</div>
<ul
tabindex="-1"
class="dropdown-content z-[1] menu p-4 shadow-2xl bg-base-100 rounded-2xl w-64 border border-base-300"
>
<div class="text-center mb-4">

View File

@@ -1536,6 +1536,7 @@
<Plus class="w-8 h-8" />
</div>
<ul
tabindex="-1"
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
>
<p class="text-center font-bold text-lg">{$t('adventures.link_new')}</p>

View File

@@ -547,6 +547,7 @@
<Plus class="w-8 h-8" />
</div>
<ul
tabindex="-1"
class="dropdown-content z-[40] menu p-4 shadow-2xl bg-base-100 rounded-2xl w-64 border border-base-300"
>
<div class="text-center mb-4">

View File

@@ -220,6 +220,7 @@
<DotsVertical class="w-8 h-8" />
</button>
<ul
tabindex="-1"
class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-lg border border-base-300 mb-2"
>
<li>