gsadmin/meet
1
0
Fork 0
mirror of https://github.com/suitenumerique/meet.git synced 2026-08-27 18:56:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

♿️(frontend) improve effects accessibility structure

Browse Source 
* Set sub-headings to level 3, to be coherent
* Set role to list & list-item on background items list
This commit is contained in:
Florent Chehab
2026-06-03 18:53:59 +02:00
parent 6368b676a6
commit c9de7d049f
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+23 -18
View File
@@ -667,7 +667,7 @@ export const EffectsConfiguration = ({
})} })}
> >
<H <H
lvl={2} lvl={3}
style={{ style={{
marginBottom: '0.4rem', marginBottom: '0.4rem',
}} }}
@@ -683,6 +683,7 @@ export const EffectsConfiguration = ({
paddingBottom: '0.5rem', paddingBottom: '0.5rem',
flexWrap: 'wrap', flexWrap: 'wrap',
})} })}
role="list"
> >
{createFileMutation.isPending && {createFileMutation.isPending &&
fileBeingUploadedObjectUrlRef.current && ( fileBeingUploadedObjectUrlRef.current && (
@@ -724,6 +725,7 @@ export const EffectsConfiguration = ({
className={ className={
'hoverGroup ' + css({ position: 'relative' }) 'hoverGroup ' + css({ position: 'relative' })
} }
role="listitem"
> >
<VisualOnlyTooltip tooltip={option.tooltip}> <VisualOnlyTooltip tooltip={option.tooltip}>
<ToggleButton <ToggleButton
@@ -860,7 +862,7 @@ export const EffectsConfiguration = ({
})} })}
> >
<H <H
lvl={2} lvl={3}
style={{ style={{
marginBottom: '0.4rem', marginBottom: '0.4rem',
}} }}
@@ -875,24 +877,27 @@ export const EffectsConfiguration = ({
paddingBottom: '0.5rem', paddingBottom: '0.5rem',
flexWrap: 'wrap', flexWrap: 'wrap',
})} })}
role="list"
> >
{processorOptions.virtualBackgrounds.map((option) => ( {processorOptions.virtualBackgrounds.map((option) => (
<VisualOnlyTooltip key={option.id} tooltip={option.tooltip}> <div role="listitem" key={option.id}>
<ToggleButton <VisualOnlyTooltip tooltip={option.tooltip}>
variant="bigSquare" <ToggleButton
aria-label={option.ariaLabel} variant="bigSquare"
isDisabled={processorOptions.isDisabled} aria-label={option.ariaLabel}
onChange={() => toggleEffect(option.config)} isDisabled={processorOptions.isDisabled}
isSelected={option.isSelected} onChange={() => toggleEffect(option.config)}
className={css({ isSelected={option.isSelected}
bgSize: 'cover', className={css({
})} bgSize: 'cover',
style={{ })}
backgroundImage: `url(${option.thumbnailPath})`, style={{
}} backgroundImage: `url(${option.thumbnailPath})`,
data-attr={`toggle-virtual-preset-${option.index}`} }}
/> data-attr={`toggle-virtual-preset-${option.index}`}
</VisualOnlyTooltip> />
</VisualOnlyTooltip>
</div>
))} ))}
</div> </div>
</div> </div>