@redis-ui/components 47.6.2 → 47.6.3

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import { ButtonGroupProps } from './ButtonGroup.types';
 declare const ButtonGroup: ((props: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element) & {
-    Button: (props: import("./components/Button/Button.types").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Button: ({ isSelected, ...props }: import("./components/Button/Button.types").ButtonProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon }: import("./components/Icon/Icon.types").ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default ButtonGroup;

package/dist/ButtonGroup/components/Button/Button.cjs

@@ -2,8 +2,10 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Button_style = require("./Button.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/ButtonGroup/components/Button/Button.tsx
-var Button = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.Button, {
+var Button = ({ isSelected, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.Button, {
 	type: "button",
+	isSelected,
+	"aria-pressed": isSelected,
 	...props
 });
 //#endregion

package/dist/ButtonGroup/components/Button/Button.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from './Button.types';
-export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ isSelected, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ButtonGroup/components/Button/Button.js

@@ -1,8 +1,10 @@
 import { Button as Button$1 } from "./Button.style.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ButtonGroup/components/Button/Button.tsx
-var Button = (props) => /* @__PURE__ */ jsx(Button$1, {
+var Button = ({ isSelected, ...props }) => /* @__PURE__ */ jsx(Button$1, {
 	type: "button",
+	isSelected,
+	"aria-pressed": isSelected,
 	...props
 });
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "47.6.2",
+  "version": "47.6.3",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",

package/skills/redis-ui-components/references/ButtonGroup.md

@@ -29,7 +29,7 @@ import { ButtonGroup } from '@redis-ui/components';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `isSelected` | `boolean` | - | Marks the button as selected for styling purposes. |
+| `isSelected` | `boolean` | - | Marks the button as selected. Applies the selected styling and sets `aria-pressed` to expose the toggle state to assistive technology. When omitted, no `aria-pressed` attribute is rendered (plain, non-toggle button). |
 | `onClick` | `(e: React.MouseEvent<HTMLButtonElement>) => void` | - | Click handler used to toggle selection. |
 | `children` | `React.ReactNode` | - | Button content. |
 
@@ -123,5 +123,6 @@ const isSelected = (value: string) => selected.includes(value);
 
 - `ButtonGroup` has no internal selection logic; manage selected state in the parent component.
 - `ButtonGroup.Button` is styled as a native `button` and can be disabled through the standard `disabled` attribute.
+- `ButtonGroup.Button` follows the WAI-ARIA toggle button pattern: passing `isSelected` sets `aria-pressed` (`true`/`false`) so screen readers announce the selected state. This works for both single- and multi-select usages. Buttons rendered without `isSelected` get no `aria-pressed` and remain plain buttons.
 - `ButtonGroup.Icon` always renders the icon at `size="M"` and inherits its color from the surrounding text (`currentColor`).
 - If you need to pass props to an icon component, declare it outside the render path or wrap it in `useMemo`; avoid inline arrow functions because they re-create the icon on every parent render.