Ensure non-collapsable cards aren't focusable

httptoolkit · Mar 11, 2024 · ad73779 · ad73779
1 parent ecd3ae9
commit ad73779
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/components/common/card.tsx b/src/components/common/card.tsx
@@ -160,14 +160,16 @@ export class CollapsibleCard extends React.Component<
     private cardRef = React.createRef<HTMLElement>();
 
     render() {
+        const collapsable = !!this.props.onCollapseToggled;
+
         return <CollapsibleCardContainer
             className={this.props.className}
             collapsed={this.props.collapsed}
             expanded={this.props.expanded ?? false}
             direction={this.props.direction}
             headerAlignment={this.props.headerAlignment ?? 'right'}
 
-            tabIndex={0}
+            tabIndex={collapsable ? 0 : undefined}
             ref={this.cardRef}
             onKeyDown={this.onKeyDown}
             aria-label={this.props.ariaLabel}
@@ -179,15 +181,15 @@ export class CollapsibleCard extends React.Component<
     renderChildren() {
         const { children, collapsed, headerAlignment } = this.props;
 
-        const showCollapseIcon = !!this.props.onCollapseToggled;
+        const collapsable = !!this.props.onCollapseToggled;
 
         return React.Children.map(children as React.ReactElement<any>[], (child, i) => {
             if (i !== 0) {
                 if (collapsed) return null; // When collapsed, we drop all but the first child
                 else return child;
             }
 
-            if (!showCollapseIcon) return child;
+            if (!collapsable) return child;
 
             // Otherwise: it's the first child and we want to inject a collapse icon.