Fix #3292: ARIA expand and collapse labels

components/lib/accordion/Accordion.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ariaLabel } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
 import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
@@ -76,10 +77,11 @@ export const Accordion = React.forwardRef((props, ref) => {
         const tabIndex = tab.props.disabled ? -1 : null;
         const header = tab.props.headerTemplate ? ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : <span className="p-accordion-header-text">{tab.props.header}</span>;
         const icon = IconUtils.getJSXIcon(selected ? props.collapseIcon : props.expandIcon, { className: 'p-accordion-toggle-icon' }, { props, selected });
+        const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
 
         return (
             <div className={className} style={style}>
-                <a href={'#' + ariaControls} id={headerId} className="p-accordion-header-link" aria-controls={ariaControls} role="tab" aria-expanded={selected} onClick={(e) => onTabHeaderClick(e, tab, index)} tabIndex={tabIndex}>
+                <a href={'#' + ariaControls} id={headerId} className="p-accordion-header-link" aria-controls={ariaControls} role="tab" aria-expanded={selected} onClick={(e) => onTabHeaderClick(e, tab, index)} tabIndex={tabIndex} aria-label={label}>
                     {icon}
                     {header}
                 </a>

components/lib/api/Locale.js

@@ -56,7 +56,9 @@ let locales = {
             nextPageLabel: 'Next Page',
             previousPageLabel: 'Previous Page',
             selectLabel: 'Select',
-            unselectLabel: 'Unselect'
+            unselectLabel: 'Unselect',
+            expandLabel: 'Expand',
+            collapseLabel: 'Collapse'
         }
     }
 };

components/lib/datatable/BodyCell.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { useEventListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Ripple } from '../ripple/Ripple';
@@ -524,17 +525,17 @@ export const BodyCell = React.memo((props) => {
         } else if (expander) {
             const iconClassName = classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
             const ariaControls = `${props.tableSelector}_content_${props.rowIndex}_expanded`;
+            const ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
+            const ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
+            const label = `${props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel')} ${ariaLabelText}`;
             const expanderProps = {
                 onClick: onRowToggle,
                 className: 'p-row-toggler p-link',
                 iconClassName
             };
 
             content = (
-                <button className={expanderProps.className} onClick={expanderProps.onClick} type="button" aria-expanded={props.expanded} aria-controls={ariaControls} tabIndex={props.tabIndex}>
-                    <span className={expanderProps.iconClassName}></span>
-                    <Ripple />
-                </button>
+                <Button className={expanderProps.className} onClick={expanderProps.onClick} type="button" icon={expanderProps.iconClassName} aria-expanded={props.expanded} aria-controls={ariaControls} tabIndex={props.tabIndex} ariaLabel={label} />
             );
 
             if (body) {

components/lib/datatable/RowTogglerButton.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames } from '../utils/Utils';
 
 export const RowTogglerButton = React.memo((props) => {
@@ -11,13 +12,9 @@ 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 type="button" onClick={onClick} className="p-row-toggler p-link" tabIndex={props.tabIndex}>
-            <span className={iconClassName}></span>
-            <Ripple />
-        </button>
-    );
+    return <Button className="p-row-toggler p-link" onClick={onClick} type="button" icon={iconClassName} tabIndex={props.tabIndex} ariaLabel={label} />;
 });
 
 RowTogglerButton.displayName = 'RowTogglerButton';

components/lib/tree/UITreeNode.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const UITreeNode = React.memo((props) => {
@@ -561,13 +562,9 @@ 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}>
-                <span className={iconClassName}></span>
-                <Ripple />
-            </button>
-        );
+        let content = <Button type="button" className="p-tree-toggler p-link" tabIndex={-1} onClick={onTogglerClick} icon={iconClassName} ariaLabel={label} />;
 
         if (props.togglerTemplate) {
             const defaultContentOptions = {

components/lib/treetable/TreeTableRow.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { classNames, DomHandler } from '../utils/Utils';
 import { TreeTableBodyCell } from './TreeTableBodyCell';
 
@@ -263,15 +264,11 @@ export const TreeTableRow = React.memo((props) => {
     };
 
     const createToggler = () => {
+        const label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
         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" onClick={onTogglerClick} tabIndex={-1} style={style}>
-                <i className={iconClassName}></i>
-                <Ripple />
-            </button>
-        );
+        return <Button type="button" className="p-treetable-toggler p-link p-unselectable-text" style={style} tabIndex={-1} onClick={onTogglerClick} icon={iconClassName} ariaLabel={label} />;
     };
 
     const createCheckbox = () => {

pages/locale/index.js

@@ -343,6 +343,14 @@ locale('es');
                                 <td>aria.unselectLabel</td>
                                 <td>Unselect</td>
                             </tr>
+                            <tr>
+                                <td>aria.expandLabel</td>
+                                <td>Expand</td>
+                            </tr>
+                            <tr>
+                                <td>aria.collapseLabel</td>
+                                <td>Collapse</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>