diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js index 0fd1c83ccc..0b5bbafd62 100644 --- a/components/lib/multistatecheckbox/MultiStateCheckbox.js +++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js @@ -116,12 +116,13 @@ export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => { const icon = createIcon(); console.log(!!selectedOption); const ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel'); + const ariaChecked = !!selectedOption ? 'true' : 'false'; return ( <>
+ role="checkbox" aria-checked={ariaChecked} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}> {icon}
{focusedState && {ariaValueLabel}} diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index 2b01bef904..3dc411b5ed 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -65,12 +65,13 @@ export const TriStateCheckbox = React.memo(React.forwardRef((props, ref) => { 'pi pi-times': props.value === false }); const ariaValueLabel = props.value ? ariaLabel('trueLabel') : (props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel')); + const ariaChecked = (props.value === null || props.value === undefined) ? 'mixed' : props.value.toString(); return ( <>
+ role="checkbox" aria-checked={ariaChecked} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}>
{focusedState && {ariaValueLabel}}