Fix primefaces#3259: ARIA button helper

melloware · Sep 22, 2022 · 7d59504 · 7d59504
1 parent beea4c4
commit 7d59504
Show file tree

Hide file tree

Showing 27 changed files with 70 additions and 65 deletions.
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -588,7 +588,7 @@ export const AutoComplete = React.memo(
             if (props.dropdown) {
                 const ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose');
 
-                return <Button type="button" icon={props.dropdownIcon} className="p-autocomplete-dropdown" disabled={props.disabled} onClick={onDropdownClick} aria-label={ariaLabel} />;
+                return <Button ariaButton icon={props.dropdownIcon} className="p-autocomplete-dropdown" disabled={props.disabled} onClick={onDropdownClick} aria-label={ariaLabel} />;
             }
 
             return null;

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -17,15 +17,21 @@ export const Button = React.memo(
 
         const createIcon = () => {
             const icon = props.loading ? props.loadingIcon : props.icon;
-            const className = classNames('p-button-icon p-c', {
-                'p-button-loading-icon': props.loading,
-                [`p-button-icon-${props.iconPos}`]: props.label
-            });
+            const className = props.ariaButton
+                ? ''
+                : classNames('p-button-icon p-c', {
+                      'p-button-loading-icon': props.loading,
+                      [`p-button-icon-${props.iconPos}`]: props.label
+                  });
 
             return IconUtils.getJSXIcon(icon, { className }, { props });
         };
 
         const createLabel = () => {
+            if (props.ariaButton) {
+                return null;
+            }
+
             if (props.label) {
                 return <span className="p-button-label p-c">{props.label}</span>;
             }
@@ -46,14 +52,18 @@ export const Button = React.memo(
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const disabled = props.disabled || props.loading;
         const otherProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
-        const className = classNames('p-button p-component', props.className, {
-            'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label,
-            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
-            'p-disabled': disabled,
-            'p-button-loading': props.loading,
-            'p-button-loading-label-only': props.loading && !props.icon && props.label,
-            [`p-button-loading-${props.iconPos}`]: props.loading && props.loadingIcon && props.label
-        });
+        const className = props.ariaButton
+            ? props.className
+            : classNames('p-button p-component', props.className, {
+                  'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label,
+                  'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
+                  'p-disabled': disabled,
+                  'p-button-loading': props.loading,
+                  'p-button-loading-label-only': props.loading && !props.icon && props.label,
+                  [`p-button-loading-${props.iconPos}`]: props.loading && props.loadingIcon && props.label
+              });
+
+        props.ariaButton ? (otherProps['type'] = 'button') : null;
 
         const icon = createIcon();
         const label = createLabel();
@@ -78,15 +88,16 @@ export const Button = React.memo(
 Button.displayName = 'Button';
 Button.defaultProps = {
     __TYPE: 'Button',
-    label: null,
-    icon: null,
-    iconPos: 'left',
+    ariaButton: false,
     badge: null,
     badgeClassName: null,
-    tooltip: null,
-    tooltipOptions: null,
     disabled: false,
+    icon: null,
+    iconPos: 'left',
+    label: null,
     loading: false,
     loadingIcon: 'pi pi-spinner pi-spin',
+    tooltip: null,
+    tooltipOptions: null,
     visible: true
 };
diff --git a/components/lib/button/button.d.ts b/components/lib/button/button.d.ts
@@ -5,18 +5,19 @@ import { IconType } from '../utils';
 type ButtonPositionType = 'top' | 'bottom' | 'left' | 'right';
 
 export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled' | 'ref'> {
-    label?: string;
-    icon?: IconType<ButtonProps>;
-    iconPos?: ButtonPositionType;
+    ariaButton?: boolean;
     badge?: string;
     badgeClassName?: string;
-    tooltip?: string;
-    tooltipOptions?: TooltipOptions;
+    children?: React.ReactNode;
     disabled?: boolean;
-    visible?: boolean;
+    icon?: IconType<ButtonProps>;
+    iconPos?: ButtonPositionType;
+    label?: string;
     loading?: boolean;
     loadingIcon?: IconType<ButtonProps>;
-    children?: React.ReactNode;
+    tooltip?: string;
+    tooltipOptions?: TooltipOptions;
+    visible?: boolean;
 }
 
 export declare class Button extends React.Component<ButtonProps, any> {

diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -479,7 +479,7 @@ export const Carousel = React.memo(
                     'pi-chevron-up': isVertical
                 });
 
-                return <Button type="button" className={className} icon={iconClassName} onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />;
+                return <Button ariaButton className={className} icon={iconClassName} onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />;
             }
 
             return null;
@@ -496,7 +496,7 @@ export const Carousel = React.memo(
                     'pi-chevron-down': isVertical
                 });
 
-                return <Button type="button" className={className} icon={iconClassName} onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('nextPageLabel')} />;
+                return <Button ariaButton className={className} icon={iconClassName} onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('nextPageLabel')} />;
             }
 
             return null;
@@ -511,7 +511,7 @@ export const Carousel = React.memo(
 
             return (
                 <li key={key} className={className}>
-                    <Button type="button" className="p-link" onClick={(e) => onDotClick(e, index)} aria-label={`${ariaLabel('pageLabel')} ${index + 1}`} />
+                    <Button ariaButton className="p-link" onClick={(e) => onDotClick(e, index)} aria-label={`${ariaLabel('pageLabel')} ${index + 1}`} />
                 </li>
             );
         };

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} aria-label={label} />
+                <Button className={expanderProps.className} onClick={expanderProps.onClick} ariaButton icon={expanderProps.iconClassName} aria-expanded={props.expanded} aria-controls={ariaControls} tabIndex={props.tabIndex} aria-label={label} />
             );
 
             if (body) {

diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
@@ -469,7 +469,7 @@ export const ColumnFilter = React.memo((props) => {
             });
             const label = filterLabel();
 
-            return <Button ref={iconRef} type="button" icon="pi pi-filter-icon pi-filter" className={className} aria-haspopup aria-expanded={overlayVisibleState} onClick={toggleMenu} onKeyDown={onToggleButtonKeyDown} aria-label={label} />;
+            return <Button ref={iconRef} ariaButton icon="pi pi-filter-icon pi-filter" className={className} aria-haspopup aria-expanded={overlayVisibleState} onClick={toggleMenu} onKeyDown={onToggleButtonKeyDown} aria-label={label} />;
         }
 
         return null;
@@ -482,7 +482,7 @@ export const ColumnFilter = React.memo((props) => {
             });
             const clearLabel = clearButtonLabel();
 
-            return <Button ref={iconRef} type="button" icon="pi pi-filter-slash" className={className} onClick={clearFilter} aria-label={clearLabel} />;
+            return <Button ref={iconRef} ariaButton icon="pi pi-filter-slash" className={className} onClick={clearFilter} aria-label={clearLabel} />;
         }
 
         return null;
@@ -546,7 +546,7 @@ export const ColumnFilter = React.memo((props) => {
         if (showRemoveIcon()) {
             const removeRuleLabel = removeRuleButtonLabel();
 
-            return <Button type="button" icon="pi pi-trash" className="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" onClick={() => removeConstraint(index)} label={removeRuleLabel} />;
+            return <Button ariaButton icon="pi pi-trash" className="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" onClick={() => removeConstraint(index)} label={removeRuleLabel} />;
         }
 
         return null;

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} aria-label={label} />;
+    return <Button className="p-row-toggler p-link" onClick={onClick} ariaButton icon={iconClassName} tabIndex={props.tabIndex} aria-label={label} />;
 });
 
 RowTogglerButton.displayName = 'RowTogglerButton';
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -420,7 +420,7 @@ export const Dialog = React.forwardRef((props, ref) => {
         if (props.closable) {
             const ariaLabel = props.ariaCloseIconLabel || localeOption('close');
 
-            return <Button ref={closeRef} type="button" className="p-dialog-header-icon p-dialog-header-close p-link" icon="p-dialog-header-close-icon pi pi-times" onClick={onClose} aria-label={ariaLabel} />;
+            return <Button ref={closeRef} ariaButton className="p-dialog-header-icon p-dialog-header-close p-link" icon="p-dialog-header-close-icon pi pi-times" onClick={onClose} aria-label={ariaLabel} />;
         }
 
         return null;

diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
@@ -148,7 +148,7 @@ export const Galleria = React.memo(
                 indicatorPosClassName
             );
 
-            const closeIcon = props.fullScreen && <Button type="button" className="p-galleria-close p-link" icon="p-galleria-close-icon pi pi-times" onClick={hide} aria-label={localeOption('close')} />;
+            const closeIcon = props.fullScreen && <Button ariaButton className="p-galleria-close p-link" icon="p-galleria-close-icon pi pi-times" onClick={hide} aria-label={localeOption('close')} />;
 
             const header = createHeader();
             const footer = createFooter();

diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
 import { useMountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
 import { classNames } from '../utils/Utils';
@@ -85,12 +87,7 @@ export const GalleriaItem = React.memo(
                     'p-disabled': isDisabled
                 });
 
-                return (
-                    <button type="button" className={buttonClassName} onClick={navBackward} disabled={isDisabled}>
-                        <span className="p-galleria-item-prev-icon pi pi-chevron-left"></span>
-                        <Ripple />
-                    </button>
-                );
+                return <Button ariaButton className={buttonClassName} icon="p-galleria-item-prev-icon pi pi-chevron-left" onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />;
             }
 
             return null;
@@ -103,12 +100,7 @@ export const GalleriaItem = React.memo(
                     'p-disabled': isDisabled
                 });
 
-                return (
-                    <button type="button" className={buttonClassName} onClick={navForward} disabled={isDisabled}>
-                        <span className="p-galleria-item-next-icon pi pi-chevron-right"></span>
-                        <Ripple />
-                    </button>
-                );
+                return <Button ariaButton className={buttonClassName} icon="p-galleria-item-next-icon pi pi-chevron-right" onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />;
             }
 
             return null;

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} aria-label={localeOption('close')} />;
+            return <Button ariaButton className="p-inplace-content-close" icon="pi pi-times" onClick={close} aria-label={localeOption('close')} />;
         }
 
         return null;

diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
@@ -34,7 +34,7 @@ export const UIMessage = React.memo(
             if (closable !== false) {
                 const ariaLabel = localeOption('close');
 
-                return <Button type="button" className="p-message-close p-link" icon="p-message-close-icon pi pi-times" onClick={onClose} aria-label={ariaLabel} />;
+                return <Button ariaButton className="p-message-close p-link" icon="p-message-close-icon pi pi-times" onClick={onClose} aria-label={ariaLabel} />;
             }
 
             return null;

diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js
@@ -62,7 +62,7 @@ export const MultiSelectHeader = React.memo((props) => {
 
     const filterElement = createFilterElement();
     const checkboxElement = props.showSelectAll && <Checkbox checked={props.selectAll} onChange={onSelectAll} role="checkbox" aria-checked={props.selectAll} />;
-    const closeElement = <Button type="button" className="p-multiselect-close p-link" icon="p-multiselect-close-icon pi pi-times" onClick={props.onClose} aria-label={localeOption('close')} />;
+    const closeElement = <Button ariaButton className="p-multiselect-close p-link" icon="p-multiselect-close-icon pi pi-times" onClick={props.onClose} aria-label={localeOption('close')} />;
     const element = (
         <div className="p-multiselect-header">
             {checkboxElement}

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
@@ -188,7 +188,7 @@ export const OverlayPanel = React.forwardRef((props, ref) => {
         if (props.showCloseIcon) {
             const ariaLabel = props.ariaCloseLabel || localeOption('close');
 
-            return <Button type="button" className="p-overlaypanel-close p-link" icon="p-overlaypanel-close-icon pi pi-times" onClick={onCloseClick} aria-label={ariaLabel} />;
+            return <Button ariaButton className="p-overlaypanel-close p-link" icon="p-overlaypanel-close-icon pi pi-times" onClick={onCloseClick} aria-label={ariaLabel} />;
         }
 
         return null;

diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js
@@ -6,7 +6,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 export const FirstPageLink = React.memo((props) => {
     const className = classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-double-left';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('firstPageLabel')} />;
+    const element = <Button ariaButton className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('firstPageLabel')} />;
 
     if (props.template) {
         const defaultOptions = {

diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js
@@ -6,7 +6,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 export const LastPageLink = React.memo((props) => {
     const className = classNames('p-paginator-last p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-double-right';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('lastPageLabel')} />;
+    const element = <Button ariaButton className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('lastPageLabel')} />;
 
     if (props.template) {
         const defaultOptions = {

diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js
@@ -6,7 +6,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 export const NextPageLink = React.memo((props) => {
     const className = classNames('p-paginator-next p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-right';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('nextPageLabel')} />;
+    const element = <Button ariaButton className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('nextPageLabel')} />;
 
     if (props.template) {
         const defaultOptions = {

diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js
@@ -29,7 +29,7 @@ export const PageLinks = React.memo((props) => {
             });
 
             let element = (
-                <Button type="button" className={className} onClick={(e) => onPageLinkClick(e, pageLink)} aria-label={`${ariaLabel('pageLabel')} ${pageLink + 1}`}>
+                <Button ariaButton className={className} onClick={(e) => onPageLinkClick(e, pageLink)} aria-label={`${ariaLabel('pageLabel')} ${pageLink + 1}`}>
                     {pageLink}
                 </Button>
             );

diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js
@@ -6,7 +6,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 export const PrevPageLink = React.memo((props) => {
     const className = classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-left';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('previousPageLabel')} />;
+    const element = <Button ariaButton className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('previousPageLabel')} />;
 
     if (props.template) {
         const defaultOptions = {

diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
@@ -149,7 +149,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
         if (props.showCloseIcon) {
             const ariaLabel = props.ariaCloseLabel || localeOption('close');
 
-            return <Button ref={closeIconRef} type="button" className="p-sidebar-close p-sidebar-icon p-link" icon="p-sidebar-close-icon pi pi-times" onClick={onClose} aria-label={ariaLabel} />;
+            return <Button ref={closeIconRef} ariaButton className="p-sidebar-close p-sidebar-icon p-link" icon="p-sidebar-close-icon pi pi-times" onClick={onClose} aria-label={ariaLabel} />;
         }
 
         return null;

diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
@@ -217,7 +217,7 @@ export const SpeedDial = React.memo(
                 [`${props.hideIcon}`]: visible && !!props.hideIcon
             });
             const icon = IconUtils.getJSXIcon(showIconVisible ? props.showIcon : hideIconVisible ? props.hideIcon : null, undefined, { props });
-            const content = <Button type="button" style={props.buttonStyle} className={className} icon={icon} onClick={onClick} disabled={props.disabled} aria-label={props['aria-label']} />;
+            const content = <Button ariaButton style={props.buttonStyle} className={className} icon={icon} onClick={onClick} disabled={props.disabled} aria-label={props['aria-label']} />;
 
             if (props.buttonTemplate) {
                 const defaultContentOptions = {

diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
@@ -192,5 +192,6 @@ SplitButton.defaultProps = {
     dropdownIcon: 'pi pi-chevron-down',
     onClick: null,
     onShow: null,
-    onHide: null
+    onHide: null,
+    visible: true
 };