gsadmin/meet
1
0
Fork 0
mirror of https://github.com/suitenumerique/meet.git synced 2026-07-26 11:58:53 +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
lvl={2}
lvl={3}
style={{
marginBottom: '0.4rem',
}}
@@ -683,6 +683,7 @@ export const EffectsConfiguration = ({
paddingBottom: '0.5rem',
flexWrap: 'wrap',
})}
role="list"
>
{createFileMutation.isPending &&
fileBeingUploadedObjectUrlRef.current && (
@@ -724,6 +725,7 @@ export const EffectsConfiguration = ({
className={
'hoverGroup ' + css({ position: 'relative' })
}
role="listitem"
>
<VisualOnlyTooltip tooltip={option.tooltip}>
<ToggleButton
@@ -860,7 +862,7 @@ export const EffectsConfiguration = ({
})}
>
<H
lvl={2}
lvl={3}
style={{
marginBottom: '0.4rem',
}}
@@ -875,24 +877,27 @@ export const EffectsConfiguration = ({
paddingBottom: '0.5rem',
flexWrap: 'wrap',
})}
role="list"
>
{processorOptions.virtualBackgrounds.map((option) => (
<VisualOnlyTooltip key={option.id} tooltip={option.tooltip}>
<ToggleButton
variant="bigSquare"
aria-label={option.ariaLabel}
isDisabled={processorOptions.isDisabled}
onChange={() => toggleEffect(option.config)}
isSelected={option.isSelected}
className={css({
bgSize: 'cover',
})}
style={{
backgroundImage: `url(${option.thumbnailPath})`,
}}
data-attr={`toggle-virtual-preset-${option.index}`}
/>
</VisualOnlyTooltip>
<div role="listitem" key={option.id}>
<VisualOnlyTooltip tooltip={option.tooltip}>
<ToggleButton
variant="bigSquare"
aria-label={option.ariaLabel}
isDisabled={processorOptions.isDisabled}
onChange={() => toggleEffect(option.config)}
isSelected={option.isSelected}
className={css({
bgSize: 'cover',
})}
style={{
backgroundImage: `url(${option.thumbnailPath})`,
}}
data-attr={`toggle-virtual-preset-${option.index}`}
/>
</VisualOnlyTooltip>
</div>
))}
</div>
</div>