diff --git a/packages/core/src/components/Button/Button.tsx b/packages/core/src/components/Button/Button.tsx index 11f109c25e..15e9f141e8 100644 --- a/packages/core/src/components/Button/Button.tsx +++ b/packages/core/src/components/Button/Button.tsx @@ -77,6 +77,10 @@ export interface ButtonProps extends VibeComponentProps { * aria to be used for screen reader to know if the button is hidden */ "aria-hidden"?: AriaAttributes["aria-hidden"]; + /** + * Indicates the current "pressed" state of toggle buttons + */ + "aria-pressed"?: AriaAttributes["aria-pressed"]; /** On Button Focus callback */ onFocus?: (event: React.FocusEvent) => void; /** On Button Blur callback */ @@ -144,6 +148,7 @@ const Button: VibeComponent & { ariaControls, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, + "aria-pressed": ariaPressed, blurOnMouseUp, dataTestId: backwardCompatabilityDataTestId, "data-testid": dataTestId, @@ -269,7 +274,8 @@ const Button: VibeComponent & { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-describedby": ariaDescribedBy, - "aria-hidden": ariaHidden + "aria-hidden": ariaHidden, + "aria-pressed": ariaPressed }; return props; }, [ @@ -294,7 +300,8 @@ const Button: VibeComponent & { ariaExpanded, ariaControls, ariaDescribedBy, - ariaHidden + ariaHidden, + ariaPressed ]); const leftIconSize = useMemo(() => { diff --git a/packages/core/src/components/IconButton/IconButton.tsx b/packages/core/src/components/IconButton/IconButton.tsx index a9c07771fa..c0a9087d1e 100644 --- a/packages/core/src/components/IconButton/IconButton.tsx +++ b/packages/core/src/components/IconButton/IconButton.tsx @@ -61,6 +61,10 @@ export interface IconButtonProps extends VibeComponentProps { * a11y property to be added, used for screen reader to know if the button is hidden */ "aria-hidden"?: AriaAttributes["aria-hidden"]; + /** + * Indicates the current "pressed" state of toggle buttons + */ + "aria-pressed"?: AriaAttributes["aria-pressed"]; /** * Size of the icon */ @@ -126,6 +130,7 @@ const IconButton: VibeComponent & { ariaControls, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, + "aria-pressed": ariaPressed, hideTooltip = false, kind = IconButton.kinds.TERTIARY, active, @@ -214,6 +219,7 @@ const IconButton: VibeComponent & { ariaControls={ariaControls} aria-describedby={ariaDescribedBy} aria-hidden={ariaHidden} + aria-pressed={ariaPressed} ref={mergedRef} id={id} data-testid={overrideDataTestId || getTestId(ComponentDefaultTestId.ICON_BUTTON, id)}