@planningcenter/tapestry-react 2.9.0-rc.8 → 2.9.1

package/dist/cjs/Box/Box.js

@@ -23,7 +23,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var defaultElement = 'div';
 /**

package/dist/cjs/FilterLayout/FilterLayout.js

@@ -80,8 +80,7 @@ function FilterLayout(props) {
     shrink: 1
   }, header)), /*#__PURE__*/React.createElement(_Divider["default"], null), /*#__PURE__*/React.createElement(_StackView["default"], {
     axis: "horizontal",
-    grow: 1,
-    overflow: "hidden"
+    grow: 1
   }, /*#__PURE__*/React.createElement(_StackView["default"], {
     visible: sidebarOpen,
     basis: fill ? '100%' : sidebarWidth + 'px',
@@ -92,7 +91,9 @@ function FilterLayout(props) {
     visibility: sidebarOpen && fill ? 'hidden' : 'visible',
     maxHeight: sidebarOpen && fill ? 0 : 'initial',
     grow: 1,
-    shrink: sidebarOpen && fill ? 0 : 1,
+    shrink: 1,
     basis: "100%"
-  }, toolbar, /*#__PURE__*/React.createElement(_Divider["default"], null), table)));
+  }, /*#__PURE__*/React.createElement(_Box["default"], {
+    overflow: "hidden"
+  }, toolbar), /*#__PURE__*/React.createElement(_Divider["default"], null), table)));
 }

package/dist/cjs/GridView/GridView.js

@@ -25,7 +25,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 function getTemplateValue(value) {
   return value ? value.constructor === Array ? value.map(function (v) {

package/dist/cjs/ItemList/ItemList.js

@@ -244,7 +244,10 @@ var ItemList = /*#__PURE__*/function (_Component) {
       return typeof selected === 'function' ? selected(data) : selected === data;
     });
     return _this;
-  }
+  } // String Search
+  // Highlight
+  // Select
+
 
   var _proto = ItemList.prototype;
 

package/dist/cjs/StackView/StackView.js

@@ -27,7 +27,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var BASELINE = 'baseline';
 var CENTER = 'center';

package/dist/cjs/Text/Text.js

@@ -25,7 +25,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var textPlugin = {
   styleProps: ['italic', 'truncate', 'size', 'underline', 'weight', 'wrap'],

package/dist/cjs/TileView/TileView.js

@@ -25,7 +25,7 @@ var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsxRuntime classic */ /** @jsx jsx */
 
 var tileViewPlugin = {
   styleProps: ['minCellWidth', 'spacing'],

package/dist/cjs/ToggleSwitch/ToggleSwitch.js

@@ -72,12 +72,14 @@ function ToggleSwitch(props) {
     axis: "horizontal",
     spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    "aria-checked": isChecked,
     as: "button",
     backgroundColor: disabled ? _colors.colors.grays.light.neutral81 : isChecked ? backgroundColor : _colors.colors.grays.light.neutral62,
     onClick: onClick,
     opacity: 1,
     position: "relative",
     radius: "pill",
+    role: "switch",
     theme: false,
     disabled: disabled,
     tooltip: tooltip

package/dist/cjs/ToggleSwitch/ToggleSwitch.test.js

@@ -20,7 +20,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toBeInTheDocument();
   });
   it('should call onClick when clicked', function () {
@@ -33,7 +33,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render2.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
 
     _react2.fireEvent.click(toggleButton);
 
@@ -62,21 +62,43 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render4.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toHaveStyle("background-color: " + activeColor);
   });
+  it('should apply aria-checked="true" when isChecked is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      isChecked: true,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render5.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should apply aria-checked="false" when isChecked is false', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      isChecked: false,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render6.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+  });
   it('should not be clickable when disabled', function () {
     var mockOnClick = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
       disabled: true,
       isChecked: false,
       label: "Toggle me",
       onClick: mockOnClick
     })),
-        getByRole = _render5.getByRole;
+        getByRole = _render7.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
 
     _react2.fireEvent.click(toggleButton);
 
@@ -84,41 +106,41 @@ describe('ToggleSwitch component', function () {
   });
   describe('it should apply the correct size', function () {
     it("should apply the correct size for xs", function () {
-      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "xs"
       })),
-          getByRole = _render6.getByRole;
+          getByRole = _render8.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 3.5 + "px");
     });
     it("should apply the correct size for sm", function () {
-      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "sm"
       })),
-          getByRole = _render7.getByRole;
+          getByRole = _render9.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.25 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4 + "px");
     });
     it("should apply the correct default size (md)", function () {
-      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "md"
       })),
-          getByRole = _render8.getByRole;
+          getByRole = _render10.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
     });

package/dist/cjs/vendor/react-measure/Measure.js

@@ -111,7 +111,9 @@ var Measure = /*#__PURE__*/function (_Component) {
       }
     }));
     return _this;
-  }
+  } // prevent firing two renders when component mounts, getting measurements in bind
+  // is faster than attaching a ResizeObserver and waiting for the first callback
+
 
   var _proto = Measure.prototype;
 

package/dist/esm/FilterLayout/FilterLayout.js

@@ -67,8 +67,7 @@ export function FilterLayout(props) {
     shrink: 1
   }, header)), _ref, /*#__PURE__*/React.createElement(StackView, {
     axis: "horizontal",
-    grow: 1,
-    overflow: "hidden"
+    grow: 1
   }, /*#__PURE__*/React.createElement(StackView, {
     visible: sidebarOpen,
     basis: fill ? '100%' : sidebarWidth + 'px',
@@ -79,7 +78,9 @@ export function FilterLayout(props) {
     visibility: sidebarOpen && fill ? 'hidden' : 'visible',
     maxHeight: sidebarOpen && fill ? 0 : 'initial',
     grow: 1,
-    shrink: sidebarOpen && fill ? 0 : 1,
+    shrink: 1,
     basis: "100%"
-  }, toolbar, _ref2, table)));
+  }, /*#__PURE__*/React.createElement(Box, {
+    overflow: "hidden"
+  }, toolbar), _ref2, table)));
 }

package/dist/esm/ItemList/ItemList.js

@@ -255,7 +255,10 @@ var ItemList = /*#__PURE__*/function (_Component) {
     });
 
     return _this;
-  }
+  } // String Search
+  // Highlight
+  // Select
+
 
   var _proto = ItemList.prototype;
 

package/dist/esm/ToggleSwitch/ToggleSwitch.js

@@ -55,12 +55,14 @@ export function ToggleSwitch(props) {
     axis: "horizontal",
     spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
   }, /*#__PURE__*/React.createElement(Button, _extends({
+    "aria-checked": isChecked,
     as: "button",
     backgroundColor: disabled ? colors.grays.light.neutral81 : isChecked ? backgroundColor : colors.grays.light.neutral62,
     onClick: onClick,
     opacity: 1,
     position: "relative",
     radius: "pill",
+    role: "switch",
     theme: false,
     disabled: disabled,
     tooltip: tooltip

package/dist/esm/ToggleSwitch/ToggleSwitch.test.js

@@ -12,7 +12,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toBeInTheDocument();
   });
   it('should call onClick when clicked', function () {
@@ -25,7 +25,7 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render2.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     fireEvent.click(toggleButton);
     expect(mockOnClick).toHaveBeenCalled();
   });
@@ -52,61 +52,83 @@ describe('ToggleSwitch component', function () {
     })),
         getByRole = _render4.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     expect(toggleButton).toHaveStyle("background-color: " + activeColor);
   });
+  it('should apply aria-checked="true" when isChecked is true', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      isChecked: true,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render5.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should apply aria-checked="false" when isChecked is false', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      isChecked: false,
+      label: "Toggle me",
+      onClick: function onClick() {}
+    })),
+        getByRole = _render6.getByRole;
+
+    var toggleButton = getByRole('switch');
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false');
+  });
   it('should not be clickable when disabled', function () {
     var mockOnClick = jest.fn();
 
-    var _render5 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+    var _render7 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
       disabled: true,
       isChecked: false,
       label: "Toggle me",
       onClick: mockOnClick
     })),
-        getByRole = _render5.getByRole;
+        getByRole = _render7.getByRole;
 
-    var toggleButton = getByRole('button');
+    var toggleButton = getByRole('switch');
     fireEvent.click(toggleButton);
     expect(mockOnClick).not.toHaveBeenCalled();
   });
   describe('it should apply the correct size', function () {
     it("should apply the correct size for xs", function () {
-      var _render6 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      var _render8 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "xs"
       })),
-          getByRole = _render6.getByRole;
+          getByRole = _render8.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 3.5 + "px");
     });
     it("should apply the correct size for sm", function () {
-      var _render7 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      var _render9 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "sm"
       })),
-          getByRole = _render7.getByRole;
+          getByRole = _render9.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.25 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4 + "px");
     });
     it("should apply the correct default size (md)", function () {
-      var _render8 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      var _render10 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
         isChecked: false,
         label: "Toggle me",
         onClick: function onClick() {},
         size: "md"
       })),
-          getByRole = _render8.getByRole;
+          getByRole = _render10.getByRole;
 
-      var toggleButton = getByRole('button');
+      var toggleButton = getByRole('switch');
       expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
       expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
     });

package/dist/esm/vendor/react-measure/Measure.js

@@ -109,7 +109,9 @@ var Measure = /*#__PURE__*/function (_Component) {
     }));
 
     return _this;
-  }
+  } // prevent firing two renders when component mounts, getting measurements in bind
+  // is faster than attaching a ResizeObserver and waiting for the first callback
+
 
   var _proto = Measure.prototype;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "v2.9.0-rc.8",
+  "version": "2.9.1",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/FilterLayout/FilterLayout.tsx

@@ -72,7 +72,7 @@ export function FilterLayout(props: Props) {
         </Box>
       </StackView>
       <Divider />
-      <StackView axis="horizontal" grow={1} overflow="hidden">
+      <StackView axis="horizontal" grow={1}>
         <StackView
           visible={sidebarOpen}
           basis={fill ? '100%' : sidebarWidth + 'px'}
@@ -86,10 +86,10 @@ export function FilterLayout(props: Props) {
           visibility={sidebarOpen && fill ? 'hidden' : 'visible'}
           maxHeight={sidebarOpen && fill ? 0 : 'initial'}
           grow={1}
-          shrink={sidebarOpen && fill ? 0 : 1}
+          shrink={1}
           basis="100%"
         >
-          {toolbar}
+          <Box overflow="hidden">{toolbar}</Box>
           <Divider />
           {table}
         </StackView>

package/src/ToggleSwitch/ToggleSwitch.test.tsx

@@ -11,7 +11,7 @@ describe('ToggleSwitch component', () => {
       <ToggleSwitch isChecked={false} label="Toggle me" onClick={() => {}} />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     expect(toggleButton).toBeInTheDocument()
   })
 
@@ -21,7 +21,7 @@ describe('ToggleSwitch component', () => {
       <ToggleSwitch isChecked={false} label="Toggle me" onClick={mockOnClick} />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     fireEvent.click(toggleButton)
 
     expect(mockOnClick).toHaveBeenCalled()
@@ -47,10 +47,28 @@ describe('ToggleSwitch component', () => {
       />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     expect(toggleButton).toHaveStyle(`background-color: ${activeColor}`)
   })
 
+  it('should apply aria-checked="true" when isChecked is true', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={true} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleButton = getByRole('switch')
+    expect(toggleButton).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('should apply aria-checked="false" when isChecked is false', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={false} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleButton = getByRole('switch')
+    expect(toggleButton).toHaveAttribute('aria-checked', 'false')
+  })
+
   it('should not be clickable when disabled', () => {
     const mockOnClick = jest.fn()
     const { getByRole } = render(
@@ -62,7 +80,7 @@ describe('ToggleSwitch component', () => {
       />
     )
 
-    const toggleButton = getByRole('button')
+    const toggleButton = getByRole('switch')
     fireEvent.click(toggleButton)
 
     expect(mockOnClick).not.toHaveBeenCalled()
@@ -79,7 +97,7 @@ describe('ToggleSwitch component', () => {
         />
       )
 
-      const toggleButton = getByRole('button')
+      const toggleButton = getByRole('switch')
       expect(toggleButton).toHaveStyle(`height: ${base * 2}px`)
       expect(toggleButton).toHaveStyle(`width: ${base * 3.5}px`)
     })
@@ -93,7 +111,7 @@ describe('ToggleSwitch component', () => {
         />
       )
 
-      const toggleButton = getByRole('button')
+      const toggleButton = getByRole('switch')
       expect(toggleButton).toHaveStyle(`height: ${base * 2.25}px`)
       expect(toggleButton).toHaveStyle(`width: ${base * 4}px`)
     })
@@ -107,7 +125,7 @@ describe('ToggleSwitch component', () => {
         />
       )
 
-      const toggleButton = getByRole('button')
+      const toggleButton = getByRole('switch')
       expect(toggleButton).toHaveStyle(`height: ${base * 2.5}px`)
       expect(toggleButton).toHaveStyle(`width: ${base * 4.375}px`)
     })

package/src/ToggleSwitch/ToggleSwitch.tsx

@@ -66,6 +66,7 @@ export function ToggleSwitch(props: Props) {
       spacing={size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1}
     >
       <Button
+        aria-checked={isChecked}
         as="button"
         backgroundColor={
           disabled
@@ -78,6 +79,7 @@ export function ToggleSwitch(props: Props) {
         opacity={1}
         position="relative"
         radius="pill"
+        role="switch"
         theme={false}
         {...{ disabled, tooltip }}
         {...toggleButtonProps}