From f4cc4e6c6b1dd6409543339f9567a561cc94dd5e Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Wed, 21 Sep 2022 09:44:03 -0400
Subject: [PATCH] Fix #839: ARIA fixes

---
 components/lib/button/Button.js              | 3 ++-
 components/lib/datatable/BodyCell.js         | 2 +-
 components/lib/datatable/RowTogglerButton.js | 2 +-
 components/lib/inplace/Inplace.js            | 2 +-
 components/lib/tree/UITreeNode.js            | 2 +-
 components/lib/treetable/TreeTableRow.js     | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
index 6823b709b8..179d88e177 100644
--- a/components/lib/button/Button.js
+++ b/components/lib/button/Button.js
@@ -87,5 +87,6 @@ Button.defaultProps = {
     tooltipOptions: null,
     disabled: false,
     loading: false,
-    loadingIcon: 'pi pi-spinner pi-spin'
+    loadingIcon: 'pi pi-spinner pi-spin',
+    visible: true
 };
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index c866854c66..d11f34fac0 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -557,7 +557,7 @@ export const BodyCell = React.memo((props) => {
             };
 
             content = (
-                <Button className={expanderProps.className} onClick={expanderProps.onClick} type="button" icon={expanderProps.iconClassName} aria-expanded={props.expanded} aria-controls={ariaControls} tabIndex={props.tabIndex} ariaLabel={label} />
+                <Button className={expanderProps.className} onClick={expanderProps.onClick} type="button" icon={expanderProps.iconClassName} aria-expanded={props.expanded} aria-controls={ariaControls} tabIndex={props.tabIndex} aria-label={label} />
             );
 
             if (body) {
diff --git a/components/lib/datatable/RowTogglerButton.js b/components/lib/datatable/RowTogglerButton.js
index acde3b714c..390c24642d 100644
--- a/components/lib/datatable/RowTogglerButton.js
+++ b/components/lib/datatable/RowTogglerButton.js
@@ -14,7 +14,7 @@ export const RowTogglerButton = React.memo((props) => {
     const iconClassName = classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
     const label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
 
-    return <Button className="p-row-toggler p-link" onClick={onClick} type="button" icon={iconClassName} tabIndex={props.tabIndex} ariaLabel={label} />;
+    return <Button className="p-row-toggler p-link" onClick={onClick} type="button" icon={iconClassName} tabIndex={props.tabIndex} aria-label={label} />;
 });
 
 RowTogglerButton.displayName = 'RowTogglerButton';
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 603f3dc2b3..8fb9148efe 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -66,7 +66,7 @@ export const Inplace = React.forwardRef((props, ref) => {
 
     const createCloseButton = () => {
         if (props.closable) {
-            return <Button type="button" className="p-inplace-content-close" icon="pi pi-times" onClick={close} ariaLabel={localeOption('close')} />;
+            return <Button type="button" className="p-inplace-content-close" icon="pi pi-times" onClick={close} aria-label={localeOption('close')} />;
         }
 
         return null;
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 13cf286895..27ce68e88d 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -578,7 +578,7 @@ export const UITreeNode = React.memo((props) => {
     const createToggler = () => {
         const label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
         const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', { 'pi-chevron-right': !expanded, 'pi-chevron-down': expanded });
-        let content = <Button type="button" className="p-tree-toggler p-link" tabIndex={-1} onClick={onTogglerClick} icon={iconClassName} ariaLabel={label} />;
+        let content = <Button type="button" className="p-tree-toggler p-link" tabIndex={-1} onClick={onTogglerClick} icon={iconClassName} aria-label={label} />;
 
         if (props.togglerTemplate) {
             const defaultContentOptions = {
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index 6ab30f21a6..f0ac25bdf9 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -272,7 +272,7 @@ export const TreeTableRow = React.memo((props) => {
         const iconClassName = classNames('p-treetable-toggler-icon pi pi-fw', { 'pi-chevron-right': !expanded, 'pi-chevron-down': expanded });
         const style = { marginLeft: props.level * 16 + 'px', visibility: props.node.leaf === false || (props.node.children && props.node.children.length) ? 'visible' : 'hidden' };
 
-        return <Button type="button" className="p-treetable-toggler p-link p-unselectable-text" style={style} tabIndex={-1} onClick={onTogglerClick} icon={iconClassName} ariaLabel={label} />;
+        return <Button type="button" className="p-treetable-toggler p-link p-unselectable-text" style={style} tabIndex={-1} onClick={onTogglerClick} icon={iconClassName} aria-label={label} />;
     };
 
     const createCheckbox = () => {