From 3f7edcbc744d4fe880bc18ee69bae9f24ac99a76 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Sat, 30 Apr 2022 08:32:42 -0400
Subject: [PATCH] Fix #2819: Checkbox aria-checked (#2825)

---
 components/lib/multistatecheckbox/MultiStateCheckbox.js | 3 ++-
 components/lib/tristatecheckbox/TriStateCheckbox.js     | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

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 (
         <>
             <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
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 (
         <>
             <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>}