fix(settings): add role and aria attributes for accessibility in SettingsMainTabs

This commit is contained in:
Haileyesus
2026-02-23 10:48:09 +03:00
parent 2ed5348cf5
commit 1bdee2c1fc

View File

@@ -26,7 +26,7 @@ export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTa
return ( return (
<div className="border-b border-border"> <div className="border-b border-border">
<div className="flex px-4 md:px-6"> <div className="flex px-4 md:px-6" role="tablist" aria-label={t('mainTabs.label', { defaultValue: 'Settings' })}>
{TAB_CONFIG.map((tab) => { {TAB_CONFIG.map((tab) => {
const Icon = tab.icon; const Icon = tab.icon;
const isActive = activeTab === tab.id; const isActive = activeTab === tab.id;
@@ -34,6 +34,8 @@ export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTa
return ( return (
<button <button
key={tab.id} key={tab.id}
role="tab"
aria-selected={isActive}
onClick={() => onChange(tab.id)} onClick={() => onChange(tab.id)}
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${ className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
isActive isActive