add aria-selected to tabs

This commit is contained in:
Sine Jespersen 2025-06-11 13:42:50 +02:00
parent 6af91325e2
commit aee60add1d

View File

@ -580,6 +580,7 @@
{#if tabId === 'general'} {#if tabId === 'general'}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'general'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'general' selectedTab === 'general'
@ -613,6 +614,7 @@
{:else if tabId === 'interface'} {:else if tabId === 'interface'}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'interface'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'interface' selectedTab === 'interface'
@ -647,6 +649,7 @@
{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)} {#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'connections'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'connections' selectedTab === 'connections'
@ -680,6 +683,7 @@
{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)} {#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'tools'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'tools' selectedTab === 'tools'
@ -714,6 +718,7 @@
{:else if tabId === 'personalization'} {:else if tabId === 'personalization'}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'personalization'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'personalization' selectedTab === 'personalization'
@ -736,6 +741,7 @@
{:else if tabId === 'audio'} {:else if tabId === 'audio'}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'audio'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'audio' selectedTab === 'audio'
@ -770,6 +776,7 @@
{:else if tabId === 'chats'} {:else if tabId === 'chats'}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'chats'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'chats' selectedTab === 'chats'
@ -803,6 +810,7 @@
{:else if tabId === 'account'} {:else if tabId === 'account'}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'account'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'account' selectedTab === 'account'
@ -836,6 +844,7 @@
{:else if tabId === 'about'} {:else if tabId === 'about'}
<button <button
role="tab" role="tab"
aria-selected={selectedTab === 'about'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'about' selectedTab === 'about'