duskchat
/
app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(DMSidebar): change button to div for better accessibility and keyboard navigation

This commit is contained in:
cloudwithax 2026-02-15 14:14:49 -05:00
parent 42f3f86f08
commit aa640bf81d
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -8,7 +8,7 @@
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"tauri": "WEBKIT_DISABLE_DMABUF_RENDERER=1 GDK_BACKEND=x11 tauri", "tauri": "WEBKIT_DISABLE_DMABUF_RENDERER=1 GDK_BACKEND=x11 tauri",
"tauri:dev-server": "WEBKIT_DISABLE_DMABUF_RENDERER=1 GDK_BACKEND=x11 tauri dev -- -- --features dev-server" "tauri:dev-server": "WEBKIT_DISABLE_DMABUF_RENDERER=1 GDK_BACKEND=x11 tauri dev --features dev-server"
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

11
src/components/layout/DMSidebar.tsx
View File

@ -127,14 +127,19 @@ const DMSidebar: Component = () => {
> >
<For each={filteredConversations()}> <For each={filteredConversations()}>
{(dm) => ( {(dm) => (
<button <div
type="button" role="button"
tabIndex={0}
class={`flex items-center gap-3 w-full px-3 py-2 transition-all duration-200 cursor-pointer group ${ class={`flex items-center gap-3 w-full px-3 py-2 transition-all duration-200 cursor-pointer group ${
activeDMPeerId() === dm.peer_id activeDMPeerId() === dm.peer_id
? "bg-gray-800 text-white" ? "bg-gray-800 text-white"
: "text-white/60 hover:bg-gray-800/60 hover:text-white" : "text-white/60 hover:bg-gray-800/60 hover:text-white"
}`} }`}
onClick={() => handleSelectDM(dm.peer_id)} onClick={() => handleSelectDM(dm.peer_id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ")
handleSelectDM(dm.peer_id);
}}
> >
<Avatar <Avatar
name={dm.display_name} name={dm.display_name}
@ -169,7 +174,7 @@ const DMSidebar: Component = () => {
</p> </p>
</Show> </Show>
</div> </div>
</button> </div>
)} )}
</For> </For>
</Show> </Show>