Skip to content

Commit 83a9515

Browse files
pdanpdansaadeghi
pdanpdan
and
saadeghi
authored
docs: use tabindex -1 for <ul> inside dropdowns (saadeghi#4168)
* docs: use tabindex -1 for <ul> inside dropdowns With `tabindex="0", when keyboard navigating, from the dropdown activator (button) you navigate to the <ul> first (and there is no visual indication) and only on the next navigation you end up on the first dropdown list item. With `tabindex="-1" you navigate directly to the first dropdown item, while keeping the feature that you can mouse/pointer focus the whole list to keep it open * format --------- Co-authored-by: Pouya Saadeghi <pouya.saadeghi@gmail.com>
1 parent a382f40 commit 83a9515

File tree

11 files changed

+56
-56
lines changed

11 files changed

+56
-56
lines changed

‎packages/docs/src/components/ChangelogMenu.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</svg>
2020
</div>
2121
<ul
22-
tabindex="0"
22+
tabindex="-1"
2323
class="dropdown-content menu menu-sm bg-base-200 rounded-box mt-7 w-36 border-[length:var(--border)] border-white/5 p-2 shadow-2xl outline-[length:var(--border)] outline-black/5"
2424
>
2525
<li>

‎packages/docs/src/components/ComponentCopyDocsDropdown.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
</svg>
7676
</div>
7777
<ul
78-
tabindex="0"
78+
tabindex="-1"
7979
class="dropdown-content menu-sm menu bg-base-200 rounded-box my-2 w-52 border border-white/5 shadow-2xl outline-[length:var(--border)] outline-black/5"
8080
>
8181
<li>

‎packages/docs/src/routes/(routes)/components/dropdown/+page.md‎

Lines changed: 38 additions & 38 deletions
Large diffs are not rendered by default.

‎packages/docs/src/routes/(routes)/components/navbar/+page.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ classnames:
154154
<img alt="Tailwind CSS Navbar component" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
155155
</div>
156156
</div>
157-
<ul tabindex="0" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
157+
<ul tabindex="-1" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
158158
<li>
159159
<button class="justify-between">
160160
Profile
@@ -184,7 +184,7 @@ classnames:
184184
</div>
185185
</div>
186186
<ul
187-
tabindex="0"
187+
tabindex="-1"
188188
class="$$menu $$menu-sm $$dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
189189
<li>
190190
<a class="justify-between">
@@ -230,7 +230,7 @@ classnames:
230230
<img alt="Tailwind CSS Navbar component" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
231231
</div>
232232
</div>
233-
<ul tabindex="0" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
233+
<ul tabindex="-1" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
234234
<li>
235235
<button class="justify-between">
236236
Profile
@@ -278,7 +278,7 @@ classnames:
278278
</div>
279279
</div>
280280
<ul
281-
tabindex="0"
281+
tabindex="-1"
282282
class="$$menu $$menu-sm $$dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
283283
<li>
284284
<a class="justify-between">
@@ -302,7 +302,7 @@ classnames:
302302
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
303303
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
304304
</div>
305-
<ul tabindex="0" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
305+
<ul tabindex="-1" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
306306
<li><button>Homepage</button></li>
307307
<li><button>Portfolio</button></li>
308308
<li><button>About</button></li>
@@ -333,7 +333,7 @@ classnames:
333333
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
334334
</div>
335335
<ul
336-
tabindex="0"
336+
tabindex="-1"
337337
class="$$menu $$menu-sm $$dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
338338
<li><a>Homepage</a></li>
339339
<li><a>Portfolio</a></li>
@@ -368,7 +368,7 @@ classnames:
368368
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
369369
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
370370
</div>
371-
<ul tabindex="0" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
371+
<ul tabindex="-1" class="mt-3 z-1 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
372372
<li><button>Item 1</button></li>
373373
<li>
374374
<button>Parent</button>
@@ -410,7 +410,7 @@ classnames:
410410
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
411411
</div>
412412
<ul
413-
tabindex="0"
413+
tabindex="-1"
414414
class="$$menu $$menu-sm $$dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
415415
<li><a>Item 1</a></li>
416416
<li>

‎packages/docs/src/routes/(routes)/components/theme-controller/+page.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
278278
Theme
279279
<svg width="12px" height="12px" class="h-2 w-2 fill-current opacity-60 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path></svg>
280280
</div>
281-
<ul tabindex="0" class="dropdown-content z-1 p-2 shadow-2xl bg-base-300 rounded-box w-52">
281+
<ul tabindex="-1" class="dropdown-content z-1 p-2 shadow-2xl bg-base-300 rounded-box w-52">
282282
<li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Default" value="default"/></li>
283283
<li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Retro" value="retro"/></li>
284284
<li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Cyberpunk" value="cyberpunk"/></li>
@@ -300,7 +300,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
300300
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
301301
</svg>
302302
</div>
303-
<ul tabindex="0" class="$$dropdown-content bg-base-300 rounded-box z-1 w-52 p-2 shadow-2xl">
303+
<ul tabindex="-1" class="$$dropdown-content bg-base-300 rounded-box z-1 w-52 p-2 shadow-2xl">
304304
<li>
305305
<input
306306
type="radio"

‎packages/docs/src/routes/(routes)/pages/best-component-library-for-2026/+page.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ daisyUI is pure CSS. Your entire component library adds zero runtime JavaScript:
208208
<!-- Complete interactive dropdown - no JavaScript required -->
209209
<div class="dropdown">
210210
<label tabindex="0" class="btn m-1">Menu</label>
211-
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
211+
<ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
212212
<li><a href="/home">Home</a></li>
213213
<li><a href="/about">About</a></li>
214214
<li><a href="/contact">Contact</a></li>

‎packages/docs/src/routes/(routes)/pages/best-component-library-for-beginners/+page.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ For example, a dropdown menu in daisyUI needs no JavaScript:
216216
<!-- A dropdown without JavaScript -->
217217
<div class="dropdown">
218218
<label tabindex="0" class="btn m-1">Click me</label>
219-
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
219+
<ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
220220
<li><a>Item 1</a></li>
221221
<li><a>Item 2</a></li>
222222
</ul>

‎packages/docs/src/routes/(routes)/pages/easy-component-library/+page.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Everything is just CSS. You don't have to mess with JavaScript to get things lik
4141
```html
4242
<div class="dropdown">
4343
<label tabindex="0" class="btn m-1">Menu</label>
44-
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
44+
<ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
4545
<li><a>Item 1</a></li>
4646
<li><a>Item 2</a></li>
4747
</ul>

‎packages/docs/src/routes/(routes)/pages/scalable-component-library/+page.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ Every component is pure CSS, working perfectly with keyboard navigation, screen
182182
<!-- Interactive dropdown without JavaScript -->
183183
<div class="dropdown">
184184
<label tabindex="0" class="btn m-1">Options</label>
185-
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
185+
<ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow">
186186
<li><a href="/profile">Profile</a></li>
187187
<li><a href="/settings">Settings</a></li>
188188
<li><a href="/logout">Logout</a></li>

‎packages/docs/src/routes/(routes)/theme-generator/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -475,7 +475,7 @@
475475
</svg>
476476
</div>
477477
<ul
478-
tabindex="0"
478+
tabindex="-1"
479479
class="dropdown-content menu bg-base-100 border-base-300 rounded-box z-1 w-48 border p-2 shadow-xl"
480480
>
481481
<li class="menu-title">Options</li>

0 commit comments

Comments
 (0)