@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

package/lib/stories/useFocusZone.stories.js

@@ -0,0 +1,607 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActiveDescendant = exports.NestedZones = exports.ChangingSubtree = exports.SpecialSituations = exports.FocusInStrategy = exports.CustomFocusMovement = exports.FocusOutBehavior = exports.BasicFocusZone = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ = require("..");
+
+var _focusZone = require("../behaviors/focusZone");
+
+var _themeGet = require("@styled-system/theme-get");
+
+var _useFocusZone = require("../hooks/useFocusZone");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Button = require("../Button");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Hooks/useFocusZone',
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, {
+      theme: _.theme
+    }, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }]
+}; // NOTE: the below styles are solely intended as a visual aid for
+// this Storybook story, but they're not recommended for a real site!
+
+exports.default = _default;
+const HelperGlobalStyling = (0, _styledComponents.createGlobalStyle)`
+  *:focus {
+    outline: 2px solid ${(0, _themeGet.themeGet)('colors.border.info')} !important;
+  }
+`;
+const MarginButton = (0, _styledComponents.default)(_.Button).withConfig({
+  displayName: "useFocusZonestories__MarginButton",
+  componentId: "e94kdz-0"
+})(["margin:", ";"], (0, _themeGet.themeGet)('space.1'));
+
+const BasicFocusZone = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const [fzEnabled, setFzEnabled] = (0, _react.useState)(true);
+  const {
+    containerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    disabled: !fzEnabled
+  }, [fzEnabled]);
+  const ToggleButton = fzEnabled ? _Button.ButtonDanger : _Button.ButtonPrimary;
+  const toggleFz = (0, _react.useCallback)(() => {
+    setFzEnabled(!fzEnabled);
+  }, [fzEnabled]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(ToggleButton, {
+    onClick: toggleFz,
+    sx: {
+      mb: 3
+    }
+  }, fzEnabled ? 'Disable' : 'Enable', " Focus Zone"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Up Arrow, Down Arrow, Home, and End to move focus within this box."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.BasicFocusZone = BasicFocusZone;
+
+const FocusOutBehavior = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: containerRef1
+  } = (0, _useFocusZone.useFocusZone)({
+    focusOutBehavior: 'stop',
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: containerRef2
+  } = (0, _useFocusZone.useFocusZone)({
+    focusOutBehavior: 'wrap',
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef1,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef2,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.FocusOutBehavior = FocusOutBehavior;
+
+function getSiblingIndex(element) {
+  let child = element;
+  let i = 0;
+
+  while ((child = child.previousElementSibling) != null) {
+    ++i;
+  }
+
+  return i;
+}
+
+const CustomFocusMovement = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = (0, _react.useRef)(null);
+  const getNextFocusable = (0, _react.useCallback)((direction, from, event) => {
+    const toEnd = direction === 'start' || direction === 'end';
+
+    if (from && containerRef.current) {
+      const currentIndex = getSiblingIndex(from);
+      let nextIndex = currentIndex;
+
+      if (['End', 'ArrowRight'].includes(event.key)) {
+        while (nextIndex % 3 !== 2) {
+          nextIndex += 1;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (['Home', 'ArrowLeft'].includes(event.key)) {
+        while (nextIndex % 3 !== 0) {
+          nextIndex -= 1;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (event.key === 'ArrowUp') {
+        while (nextIndex - 3 >= 0) {
+          nextIndex -= 3;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (event.key === 'ArrowDown') {
+        while (nextIndex + 3 < 9) {
+          nextIndex += 3;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      return containerRef.current.children[nextIndex];
+    }
+  }, [containerRef]);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef,
+    getNextFocusable
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use arrow keys to move focus within this box."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "grid",
+    ref: containerRef,
+    gridTemplateRows: "1fr 1fr 1fr",
+    gridTemplateColumns: "1fr 1fr 1fr"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.CustomFocusMovement = CustomFocusMovement;
+
+const FocusInStrategy = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: firstContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: 'first'
+  });
+  const {
+    containerRef: closestContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: 'closest'
+  });
+  const {
+    containerRef: prevContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: 'previous'
+  });
+  const customContainerRef = (0, _react.useRef)(null);
+
+  const customStrategy = _react.default.useCallback(() => {
+    if (customContainerRef.current) {
+      const buttons = Array.from(customContainerRef.current.querySelectorAll('button'));
+      return buttons[Math.floor(Math.random() * 3)];
+    }
+  }, [customContainerRef]);
+
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: customContainerRef,
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: customStrategy
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: firstContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CFirst\u201D strategy (focus first focusable element)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"))), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: closestContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CClosest\u201D strategy (focus first or last depending on focus direction)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"))), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: prevContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CPrevious\u201D strategy (most recently focused element)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"))), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: customContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CCustom\u201D strategy (choose randomly for this example)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Nectarine"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Orange"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Papaya")));
+};
+
+exports.FocusInStrategy = FocusInStrategy;
+
+const SpecialSituations = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: vContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowVertical | _focusZone.FocusKeys.JK | _focusZone.FocusKeys.WS | _focusZone.FocusKeys.Tab | _focusZone.FocusKeys.PageUpDown | _focusZone.FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: hContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    focusOutBehavior: 'wrap',
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    sx: {
+      mb: 3
+    }
+  }, "This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in different situations. Focus treatment within your component should be evaluated for your particular UX using the ", /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard"
+  }, "ARIA guidelines"), "."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: vContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    style: {
+      width: '250px'
+    },
+    type: "text",
+    defaultValue: "Printable characters won't move focus"
+  }), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Regular button"), /*#__PURE__*/_react.default.createElement("select", null, /*#__PURE__*/_react.default.createElement("option", null, "Down arrow invokes dropdown"), /*#__PURE__*/_react.default.createElement("option", null, "Unless Cmd (mac)/Ctrl (Windows)"), /*#__PURE__*/_react.default.createElement("option", null, "Is held")), /*#__PURE__*/_react.default.createElement("textarea", {
+    style: {
+      width: '250px',
+      height: '95px'
+    },
+    defaultValue: "Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
+  }))), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: hContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Left Arrow and Right Arrow to move focus within this box. Focus is circular."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement("input", {
+    style: {
+      width: '300px'
+    },
+    type: "text",
+    defaultValue: "Left/Right only work at beginning/end of input."
+  }), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.SpecialSituations = SpecialSituations;
+
+const ChangingSubtree = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowVertical
+  });
+  const [buttonCount, setButtonCount] = (0, _react.useState)(3);
+  const removeButton = (0, _react.useCallback)(() => {
+    setButtonCount(buttonCount - 1);
+  }, [setButtonCount, buttonCount]);
+  const addButton = (0, _react.useCallback)(() => {
+    setButtonCount(buttonCount + 1);
+  }, [setButtonCount, buttonCount]);
+  const buttons = [];
+
+  for (let i = 0; i < buttonCount; ++i) {
+    buttons.push( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(MarginButton, {
+      key: `button${i}`
+    }, i + 1)));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    sx: {
+      mb: 3
+    }
+  }, "This story demonstrates that focusZone is consistent even when the container\u2019s subtree changes."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, buttons)), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, {
+    onClick: removeButton
+  }, "Remove Button"), /*#__PURE__*/_react.default.createElement(MarginButton, {
+    onClick: addButton
+  }, "Add Button"))));
+};
+
+exports.ChangingSubtree = ChangingSubtree;
+
+const NestedZones = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const outerContainerRef = (0, _react.useRef)(null);
+  const innerContainerRef = (0, _react.useRef)(null);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: outerContainerRef,
+    bindKeys: _focusZone.FocusKeys.ArrowVertical
+  });
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: innerContainerRef,
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    ref: outerContainerRef,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    ref: innerContainerRef,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Additional Bound keys: Arrow Left and Arrow Right"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    id: "list",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew")), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi")));
+};
+
+exports.NestedZones = NestedZones;
+
+const ActiveDescendant = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = (0, _react.useRef)(null);
+  const controllingElementRef = (0, _react.useRef)(null);
+  const {
+    theme: themeFromContext
+  } = (0, _ThemeProvider.useTheme)();
+  (0, _useFocusZone.useFocusZone)({
+    containerRef,
+    activeDescendantFocus: controllingElementRef,
+    bindKeys: _focusZone.FocusKeys.ArrowVertical,
+    onActiveDescendantChanged: (current, previous) => {
+      if (current) {
+        current.style.outline = `2px solid ${themeFromContext === null || themeFromContext === void 0 ? void 0 : themeFromContext.colors.border.info}`;
+      }
+
+      if (previous) {
+        previous.style.outline = '';
+      }
+    },
+    focusableElementFilter: elem => elem instanceof HTMLButtonElement
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    sx: {
+      mb: 3
+    }
+  }, "This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an active element. Below, you can focus the input box then use the up/down arrow keys to change the active descendant (dark blue outline)."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    ref: controllingElementRef,
+    type: "text",
+    defaultValue: "Focus remains here.",
+    "aria-controls": "list"
+  }), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    id: "list",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit")))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi")));
+};
+
+exports.ActiveDescendant = ActiveDescendant;

package/lib/utils/testing.d.ts

@@ -541,4 +541,5 @@ interface BehavesAsComponent {
 }
 export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
 export declare function checkExports(path: string, exports: Record<any, any>): void;
+export declare function checkStoriesForAxeViolations(name: string): void;
 export {};

package/lib/utils/testing.js

@@ -19,6 +19,7 @@ exports.loadCSS = loadCSS;
 exports.unloadCSS = unloadCSS;
 exports.behavesAsComponent = behavesAsComponent;
 exports.checkExports = checkExports;
+exports.checkStoriesForAxeViolations = checkStoriesForAxeViolations;
 exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
 
 var _react = _interopRequireDefault(require("react"));
@@ -31,6 +32,10 @@ var _enzyme = _interopRequireDefault(require("enzyme"));
 
 var _enzymeAdapterReact = _interopRequireDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
 
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
 var _ = require("..");
 
 var _theme = _interopRequireDefault(require("../theme"));
@@ -270,4 +275,28 @@ function checkExports(path, exports) {
 
     expect(mod).toSetExports(exports);
   });
+}
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function checkStoriesForAxeViolations(name) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+
+
+  const {
+    default: _meta,
+    ...Stories
+  } = stories;
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return;
+    it(`story ${Story.storyName} should have no axe violations`, async () => {
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Story, null));
+      const results = await (0, _jestAxe.axe)(container);
+      expect(results).toHaveNoViolations();
+      (0, _react2.cleanup)();
+    });
+  });
 }