etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): radiogroup semantics for AdminInfoPageEditor button groups

Browse Source 
Wrap page-type and locale button groups in role=radiogroup + aria-labelledby; mark
each option as role=radio with aria-checked (WCAG 4.1.2).
This commit is contained in:
c0mrade
2026-05-26 11:30:18 +03:00
parent 581a2ffb52
commit 30c4c2ecc6
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/AdminInfoPageEditor.tsx
View File

@@ -1184,12 +1184,16 @@ export default function AdminInfoPageEditor() {
{/* Page type selector */} {/* Page type selector */}
<div> <div>
<label className="label">{t('admin.infoPages.fields.pageType')}</label> <label id="ip-pagetype-label" className="label">
<div className="flex gap-1"> {t('admin.infoPages.fields.pageType')}
</label>
<div className="flex gap-1" role="radiogroup" aria-labelledby="ip-pagetype-label">
{(['page', 'faq'] as const).map((pt) => ( {(['page', 'faq'] as const).map((pt) => (
<button <button
key={pt} key={pt}
type="button" type="button"
role="radio"
aria-checked={pageType === pt}
onClick={() => setPageType(pt)} onClick={() => setPageType(pt)}
className={cn( className={cn(
'min-h-[44px] rounded-lg px-4 py-2.5 text-sm font-medium transition-colors', 'min-h-[44px] rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
@@ -1240,12 +1244,16 @@ export default function AdminInfoPageEditor() {
{/* Locale tabs */} {/* Locale tabs */}
<div> <div>
<label className="label">{t('admin.infoPages.localeLabel')}</label> <label id="ip-locale-label" className="label">
<div className="flex flex-wrap gap-1"> {t('admin.infoPages.localeLabel')}
</label>
<div className="flex flex-wrap gap-1" role="radiogroup" aria-labelledby="ip-locale-label">
{AVAILABLE_LOCALES.map((loc) => ( {AVAILABLE_LOCALES.map((loc) => (
<button <button
key={loc} key={loc}
type="button" type="button"
role="radio"
aria-checked={activeLocale === loc}
onClick={() => switchLocale(loc)} onClick={() => switchLocale(loc)}
className={cn( className={cn(
'min-h-[44px] rounded-lg px-4 py-2.5 text-sm font-medium transition-colors', 'min-h-[44px] rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',