@windstream/react-shared-components 0.2.56 → 0.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/collapse/index.test.tsx

@@ -114,6 +114,26 @@ describe("Collapse", () => {
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper).toHaveAttribute("aria-hidden", "true");
     });
+
+    it("marks the subtree inert when closed", () => {
+      const { container } = render(
+        <Collapse open={false}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveAttribute("inert");
+    });
+
+    it("does not mark the subtree inert when open", () => {
+      const { container } = render(
+        <Collapse open={true}>
+          <p>Content</p>
+        </Collapse>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).not.toHaveAttribute("inert");
+    });
   });
 
   describe("transition classes", () => {

package/src/components/collapse/index.tsx

@@ -31,11 +31,15 @@ export const Collapse = (props: CollapsibleProps) => {
     };
   }, [open, children]);
 
+  // When closed, add `inert` so links/buttons inside can't be tabbed to or read by screen readers.
+  const inertProps = open ? {} : ({ inert: "" } as Record<string, string>);
+
   return (
     <div
       className="overflow-hidden transition-all duration-300 ease-in-out"
       style={{ maxHeight: maxHeight, opacity: open ? 1 : 0 }}
       aria-hidden={!open}
+      {...inertProps}
     >
       <div ref={contentRef}>{children}</div>
     </div>

package/src/contentful/blocks/fiber-form/index.tsx

@@ -536,6 +536,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
             <Button
               type="submit"
               disabled={isSubmitting}
+              aria-busy={isSubmitting}
               className={cx(
                 "flex h-16 w-[198px] max-w-full cursor-pointer items-center justify-center overflow-hidden rounded-button border border-brand bg-bg-fill-brand px-[60px] py-4 text-center font-black leading-7 text-text-brand-on-bg-fill no-underline transition-colors duration-300 ease-in-out enabled:hover:border-[var(--color-bg-fill-brand-hover)] enabled:hover:bg-bg-fill-brand-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-brand disabled:cursor-not-allowed",
                 isSubmitting && "opacity-75",