fix(list): ListItem no longer focusable by default when disabled

This better mimics the button behavior that it inherits, but can still
be set to 0 or another tabIndex if needed.

fix #997

Author: mlaursen

packages/list/src/ListItem.tsx

@@ -48,13 +48,12 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       rippleClassName,
       rippleContainerClassName,
       role = "button",
-      tabIndex = 0,
+      disabled = false,
+      tabIndex = disabled ? -1 : 0,
       ...props
     },
     ref
   ) {
-    const { disabled } = props;
-
     const { ripples, className, handlers } = useInteractionStates({
       className: propClassName,
       handlers: props,
@@ -84,6 +83,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
         {...handlers}
         ref={ref}
         tabIndex={tabIndex}
+        disabled={disabled}
         role={role}
         className={className}
         clickable

packages/list/src/__tests__/ListItem.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/tabindex-no-positive */
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 
@@ -29,4 +30,23 @@ describe("ListItem", () => {
     fireEvent.click(item);
     expect(onClick).not.toBeCalled();
   });
+
+  it("should default the tabIndex to 0 when not disabled and to -1 when disabled", () => {
+    const props = { children: "Content" };
+    const { rerender, getByRole } = render(<ListItem {...props} />);
+    const item = getByRole("button");
+    expect(item.tabIndex).toBe(0);
+
+    rerender(<ListItem {...props} disabled />);
+    expect(item.tabIndex).toBe(-1);
+
+    rerender(<ListItem {...props} tabIndex={1} />);
+    expect(item.tabIndex).toBe(1);
+
+    rerender(<ListItem {...props} tabIndex={1} disabled />);
+    expect(item.tabIndex).toBe(1);
+
+    rerender(<ListItem {...props} tabIndex={0} disabled />);
+    expect(item.tabIndex).toBe(0);
+  });
 });