From 470f22e58a7dfac977650ffe38680dbabf65beba Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Thu, 21 Mar 2024 14:41:31 -0400
Subject: [PATCH] Fix #6208: Datatable radio and checkbox selection

---
 components/lib/api/Locale.js               |  6 +++++-
 components/lib/api/api.d.ts                | 16 ++++++++++++++++
 components/lib/datatable/DataTableBase.js  |  8 ++++----
 components/lib/datatable/RowRadioButton.js |  8 +++++---
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
index 18a20cdddc..e674b81969 100644
--- a/components/lib/api/Locale.js
+++ b/components/lib/api/Locale.js
@@ -74,8 +74,10 @@ let locales = {
         aria: {
             cancelEdit: 'Cancel Edit',
             close: 'Close',
+            collapseLabel: 'Collapse',
             collapseRow: 'Row Collapsed',
             editRow: 'Edit Row',
+            expandLabel: 'Expand',
             expandRow: 'Row Expanded',
             falseLabel: 'False',
             filterConstraint: 'Filter Constraint',
@@ -99,8 +101,8 @@ let locales = {
             next: 'Next',
             nextPageLabel: 'Next Page',
             nullLabel: 'Not Selected',
-            pageLabel: 'Page {page}',
             otpLabel: 'Please enter one time password character {0}',
+            pageLabel: 'Page {page}',
             passwordHide: 'Hide Password',
             passwordShow: 'Show Password',
             previous: 'Previous',
@@ -111,6 +113,7 @@ let locales = {
             saveEdit: 'Save Edit',
             scrollTop: 'Scroll Top',
             selectAll: 'All items selected',
+            selectLabel: 'Select',
             selectRow: 'Row Selected',
             showFilterMenu: 'Show Filter Menu',
             slide: 'Slide',
@@ -119,6 +122,7 @@ let locales = {
             stars: '{star} stars',
             trueLabel: 'True',
             unselectAll: 'All items unselected',
+            unselectLabel: 'Unselect',
             unselectRow: 'Row Unselected',
             zoomImage: 'Zoom Image',
             zoomIn: 'Zoom In',
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 0ae2a96a39..714d1ef9f0 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -1182,6 +1182,22 @@ export interface LocaleOptions {
          * Rotate Left
          */
         rotateLeft?: string;
+        /**
+         * Select
+         */
+        selectLabel?: string;
+        /**
+         * Unselect
+         */
+        unselectLabel?: string;
+        /**
+         * Expand
+         */
+        expandLabel?: string;
+        /**
+         * Collapse
+         */
+        collapseLabel?: string;
     };
 }
 
diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
index 8f4e794b79..482761ec40 100644
--- a/components/lib/datatable/DataTableBase.js
+++ b/components/lib/datatable/DataTableBase.js
@@ -389,11 +389,11 @@ const classes = {
     emptyMessage: 'p-datatable-emptymessage',
     sortBadge: 'p-sortable-column-badge',
     sortIcon: 'p-sortable-column-icon',
-    checkboxWrapper: ({ rowProps: props, focusedState }) => classNames('p-checkbox p-component', { 'p-checkbox-focused': focusedState, 'p-disabled': props.disabled }),
-    checkbox: ({ rowProps: props, focusedState }) => classNames('p-checkbox-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }),
+    checkboxWrapper: ({ rowProps: props, focusedState }) => classNames('p-checkbox p-component', { 'p-highlight': props.checked, 'p-focus': focusedState, 'p-disabled': props.disabled }),
+    checkbox: ({ rowProps: props, focusedState }) => classNames('p-checkbox-box p-component', { 'p-focus': focusedState }),
     checkboxIcon: 'p-checkbox-icon',
-    radiobuttonWrapper: ({ rowProps: props, focusedState }) => classNames('p-radiobutton p-component', { 'p-radiobutton-focused': focusedState, 'p-disabled': props.disabled }),
-    radiobutton: ({ rowProps: props, focusedState }) => classNames('p-radiobutton-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }),
+    radiobuttonWrapper: ({ rowProps: props, focusedState }) => classNames('p-radiobutton p-component', { 'p-highlight': props.checked, 'p-focus': focusedState, 'p-disabled': props.disabled }),
+    radiobutton: ({ rowProps: props, focusedState }) => classNames('p-radiobutton-box p-component', { 'p-focus': focusedState }),
     radiobuttonIcon: 'p-radiobutton-icon',
     headerTitle: 'p-column-title',
     headerCheckboxWrapper: 'p-checkbox p-component',
diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js
index b69987eee9..5fd4e98d53 100644
--- a/components/lib/datatable/RowRadioButton.js
+++ b/components/lib/datatable/RowRadioButton.js
@@ -57,9 +57,12 @@ export const RowRadioButton = React.memo((props) => {
     };
 
     const name = `${props.tableSelector}_dt_radio`;
+    const tabIndex = props.disabled ? null : '0';
     const radiobuttonWrapperProps = mergeProps(
         {
-            className: cx('radiobuttonWrapper', { rowProps: props, focusedState })
+            className: cx('radiobuttonWrapper', { rowProps: props, focusedState }),
+            tabIndex: tabIndex,
+            'aria-label': props.ariaLabel
         },
         getColumnPTOptions('radiobuttonWrapper')
     );
@@ -78,8 +81,7 @@ export const RowRadioButton = React.memo((props) => {
             onFocus: (e) => onFocus(e),
             onBlur: (e) => onBlur(e),
             onChange: (e) => onChange(e),
-            onKeyDown: (e) => onKeyDown(e),
-            'aria-label': props.ariaLabel
+            onKeyDown: (e) => onKeyDown(e)
         },
         getColumnPTOptions('hiddenInput')
     );