Skip to content

fix(accessibility): poll and checkbox structure #17288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joshuai96 wants to merge 3 commits into
base: master
Choose a base branch
from
+68 −31
Open

fix(accessibility): poll and checkbox structure #17288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
becef6b
fix(polls): span to paragraph
joshuai96 Apr 7, 2026
e29d5ff
fix(poll): restructure polls
joshuai96 Apr 7, 2026
da3eed6
feat(checkbox): improve accessibility and structure of checkboxes
joshuai96 Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 48 additions & 6 deletions react/features/base/ui/components/web/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useCallback, useRef } from 'react';
import { makeStyles } from 'tss-react/mui';

import { isMobileBrowser } from '../../../environment/utils';
Expand Down Expand Up @@ -61,6 +61,10 @@ const useStyles = makeStyles()(theme => {
cursor: 'not-allowed'
},

clickableLabel: {
cursor: 'pointer'
},

activeArea: {
display: 'grid',
placeContent: 'center',
Expand Down Expand Up @@ -159,26 +163,64 @@ const Checkbox = ({
}: ICheckboxProps) => {
const { classes: styles, cx, theme } = useStyles();
const isMobile = isMobileBrowser();
const labelRef = useRef<HTMLLabelElement>(null);

const toggleCheckbox = useCallback(() => {
labelRef.current?.click();
}, [ labelRef ]);

let inputId = id;

// Hack the useId hook.
// This is used rarely and the entropy is high enough to not worry about duplication.
// TODO: When v17->v18 is completed, remove this! Ref: https://github.com/jitsi/jitsi-meet/issues/15709
const useId = () => {
const alphabet = 'abcdefghijklmnopqrstuvwxyz1234567890';

let newId = '';

for (let i = 0; i < 10; i++) {
const index = Math.floor(Math.random() * alphabet.length);

newId += alphabet[index];
}

return newId;
};

if (!inputId) {
if (name) {
inputId = name;
} else {
inputId = `checkbox-${useId()}`;
}
}

return (
<label className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
<div className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
<div className = { cx(styles.activeArea, isMobile && 'is-mobile', disabled && styles.disabled) }>
<input
checked = { checked }
disabled = { disabled }
id = { id }
id = { inputId }
name = { name }
onChange = { onChange }
type = 'checkbox' />
<Icon
aria-hidden = { true }
className = 'checkmark'
color = { disabled ? theme.palette.checkboxIconDisabled : theme.palette.checkboxIcon }
color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
onClick = { toggleCheckbox }
size = { 18 }
src = { IconCheck } />
</div>
<div>{label}</div>
</label>
<label
className = { cx(styles.clickableLabel) }
htmlFor = { inputId }
ref = { labelRef }>
{label}
</label>
</div>
);
};

Expand Down
43 changes: 19 additions & 24 deletions react/features/polls/components/web/PollAnswer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,23 @@ const useStyles = makeStyles()(theme => {
margin: '24px',
padding: '16px',
backgroundColor: theme.palette.pollsBackground,
border: `1px solid ${theme.palette.contrastBorder02}`,
borderRadius: '8px',
wordBreak: 'break-word'
},
closeBtn: {
cursor: 'pointer',
float: 'right'
},
header: {
marginBottom: '24px'
},
question: {
...theme.typography.heading6,
color: theme.palette.pollsQuestion,
marginBottom: '8px'
},
creator: {
...theme.typography.bodyShortRegular,
color: theme.palette.pollsSubtitle
color: theme.palette.pollsSubtitle,
marginBottom: '12px'
},
answerList: {
listStyleType: 'none',
Expand Down Expand Up @@ -76,7 +75,7 @@ const PollAnswer = ({
const { classes } = useStyles();

return (
<div
<form
className = { classes.container }
id = { `poll-${poll.pollId}` }>
{
Expand All @@ -88,31 +87,27 @@ const PollAnswer = ({
src = { IconCloseLarge }
tabIndex = { 0 } />
}
<div className = { classes.header }>
<div className = { classes.question }>
<fieldset className = { classes.answerList }>
<legend
className = { classes.question }>
{ poll.question }
</div>
<div className = { classes.creator }>
</legend>
<p className = { classes.creator }>
{ t('polls.by', { name: creatorName }) }
</div>
</div>
<ul className = { classes.answerList }>
</p>
{
poll.answers.map((answer, index: number) => (
<li
<Checkbox
checked = { checkBoxStates[index] }
className = { classes.answer }
key = { index }>
<Checkbox
checked = { checkBoxStates[index] }
disabled = { poll.saved }
id = { `poll-answer-checkbox-${poll.pollId}-${index}` }
key = { index }
label = { answer.name }
onChange = { ev => setCheckbox(index, ev.target.checked) } />
</li>
disabled = { poll.saved }
id = { `poll-answer-checkbox-${poll.pollId}-${index}` }
key = { index }
label = { answer.name }
onChange = { ev => setCheckbox(index, ev.target.checked) } />
))
}
</ul>
</fieldset>
<div className = { classes.footer } >
{
pollSaved ? <>
Expand Down Expand Up @@ -144,7 +139,7 @@ const PollAnswer = ({
</>
}
</div>
</div>
</form>
);
};

Expand Down
2 changes: 1 addition & 1 deletion react/features/polls/components/web/PollsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const PollsList = ({ setCreateMode }: IPollListProps) => {
className = { classes.emptyIcon }
color = { theme.palette.icon03 }
src = { IconMessage } />
<span className = { classes.emptyMessage }>{t('polls.results.empty')}</span>
<p className = { classes.emptyMessage }>{t('polls.results.empty')}</p>
</div>
: listPolls.map((id, index) => (
<PollItem
Expand Down