Fix #839: ARIA fixes (#3349)

primefaces · Sep 21, 2022 · 009c0fb · 009c0fb
1 parent 9b3fbf7
commit 009c0fb
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = () => {