Fix primefaces#2819: Checkbox aria-checked

melloware · Apr 30, 2022 · 0272ac9 · 0272ac9
1 parent d05f1ef
commit 0272ac9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git 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 (
         <>
             <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
                 <div className={boxClassName} style={selectedOption && selectedOption.style} tabIndex={props.tabIndex} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown}
-                    role="checkbox" aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}>
+                    role="checkbox" aria-checked={ariaChecked} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}>
                     {icon}
                 </div>
                 {focusedState && <span className="p-sr-only" aria-live="polite">{ariaValueLabel}</span>}

diff --git 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 (
         <>
             <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
                 <div className={boxClassName} tabIndex={props.tabIndex} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown}
-                    role="checkbox" aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}>
+                    role="checkbox" aria-checked={ariaChecked} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}>
                     <span className={iconClassName}></span>
                 </div>
                 {focusedState && <span className="p-sr-only" aria-live="polite">{ariaValueLabel}</span>}