diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
index 6306e06ad6c..f8a94f89095 100644
--- a/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
+++ b/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`CatalogTile href renders properly 1`] = `
   >
     <div
       class="pf-c-card__title catalog-tile-pf-header"
+      id="test-href-title"
     >
       <div
         class="catalog-tile-pf-title"
@@ -111,6 +112,7 @@ exports[`CatalogTile renders properly 1`] = `
       </div>
       <div
         class="pf-c-card__title catalog-tile-pf-header"
+        id="single-badge-test-title"
       >
         <div
           class="catalog-tile-pf-title"
@@ -215,6 +217,7 @@ exports[`CatalogTile renders properly 1`] = `
       </div>
       <div
         class="pf-c-card__title catalog-tile-pf-header"
+        id="multi-badge-test-title"
       >
         <div
           class="catalog-tile-pf-title"
@@ -291,6 +294,7 @@ exports[`CatalogTile renders properly 1`] = `
       </div>
       <div
         class="pf-c-card__title catalog-tile-pf-header"
+        id="test-iconClass-title"
       >
         <div
           class="catalog-tile-pf-title"
@@ -364,6 +368,7 @@ exports[`CatalogTile renders properly 1`] = `
       </div>
       <div
         class="pf-c-card__title catalog-tile-pf-header"
+        id="tile-footer-test-title"
       >
         <div
           class="catalog-tile-pf-title"
@@ -442,6 +447,7 @@ exports[`CatalogTile renders properly 1`] = `
       </div>
       <div
         class="pf-c-card__title catalog-tile-pf-header"
+        id="custom-icon-svg-test-title"
       >
         <div
           class="catalog-tile-pf-title"
diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index ac22e2c151b..7f4128a9863 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -36,15 +36,28 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlain?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
+  /** Flag indicating that the card should render a hidden input to make it selectable */
+  hasSelectableInput?: boolean;
+  /** Aria label to apply to the selectable input if one is rendered */
+  selectableInputAriaLabel?: string;
+  /** Callback that executes when the selectable input is changed */
+  onSelectableInputChange?: (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void;
 }
 
 interface CardContextProps {
   cardId: string;
+  registerTitleId: (id: string) => void;
   isExpanded: boolean;
 }
 
+interface AriaProps {
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
 export const CardContext = React.createContext<Partial<CardContextProps>>({
   cardId: '',
+  registerTitleId: () => {},
   isExpanded: false
 });
 
@@ -67,10 +80,16 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isPlain = false,
   ouiaId,
   ouiaSafe = true,
+  hasSelectableInput = false,
+  selectableInputAriaLabel,
+  onSelectableInputChange = () => {},
   ...props
 }: CardProps) => {
   const Component = component as any;
   const ouiaProps = useOUIAProps(Card.displayName, ouiaId, ouiaSafe);
+  const [titleId, setTitleId] = React.useState('');
+  const [ariaProps, setAriaProps] = React.useState<AriaProps>();
+
   if (isCompact && isLarge) {
     // eslint-disable-next-line no-console
     console.warn('Card: Cannot use isCompact with isLarge. Defaulting to isCompact');
@@ -90,13 +109,47 @@ export const Card: React.FunctionComponent<CardProps> = ({
     return '';
   };
 
+  const containsCardTitleChildRef = React.useRef(false);
+
+  const registerTitleId = (id: string) => {
+    setTitleId(id);
+    containsCardTitleChildRef.current = !!id;
+  };
+
+  React.useEffect(() => {
+    if (selectableInputAriaLabel) {
+      setAriaProps({ 'aria-label': selectableInputAriaLabel });
+    } else if (titleId) {
+      setAriaProps({ 'aria-labelledby': titleId });
+    } else if (hasSelectableInput && !containsCardTitleChildRef.current) {
+      setAriaProps({});
+      // eslint-disable-next-line no-console
+      console.warn(
+        'If no CardTitle component is passed as a child of Card the selectableInputAriaLabel prop must be passed'
+      );
+    }
+  }, [hasSelectableInput, selectableInputAriaLabel, titleId]);
+
   return (
     <CardContext.Provider
       value={{
         cardId: id,
+        registerTitleId,
         isExpanded
       }}
     >
+      {hasSelectableInput && (
+        <input
+          className="pf-screen-reader"
+          id={`${id}-input`}
+          {...ariaProps}
+          type="checkbox"
+          checked={isSelected}
+          onChange={event => onSelectableInputChange(id, event)}
+          disabled={isDisabledRaised}
+          tabIndex={-1}
+        />
+      )}
       <Component
         id={id}
         className={css(
diff --git a/packages/react-core/src/components/Card/CardTitle.tsx b/packages/react-core/src/components/Card/CardTitle.tsx
index d6f32314c7a..dcd01cbacc8 100644
--- a/packages/react-core/src/components/Card/CardTitle.tsx
+++ b/packages/react-core/src/components/Card/CardTitle.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
+import { CardContext } from './Card';
 
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
@@ -17,9 +18,18 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   component = 'div',
   ...props
 }: CardTitleProps) => {
+  const { cardId, registerTitleId } = React.useContext(CardContext);
   const Component = component as any;
+  const titleId = cardId ? `${cardId}-title` : '';
+
+  React.useEffect(() => {
+    registerTitleId(titleId);
+
+    return () => registerTitleId('');
+  }, [registerTitleId, titleId]);
+
   return (
-    <Component className={css(styles.cardTitle, className)} {...props}>
+    <Component className={css(styles.cardTitle, className)} id={titleId || undefined} {...props}>
       {children}
     </Component>
   );
diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
index 225dfa200c0..a3abc450479 100644
--- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/Card.test.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
-import { Card } from '../Card';
+import '@testing-library/jest-dom';
+
+import { Card, CardContext } from '../Card';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
@@ -118,4 +121,90 @@ describe('Card', () => {
     render(<Card isLarge isCompact />);
     expect(consoleWarnMock).toHaveBeenCalled();
   });
+
+  test('card renders with a hidden input to improve a11y when hasSelectableInput is passed', () => {
+    render(<Card isSelectable hasSelectableInput />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toBeInTheDocument();
+  });
+
+  test('card does not render the hidden input when hasSelectableInput is not passed', () => {
+    render(<Card isSelectable />);
+
+    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).not.toBeInTheDocument();
+  });
+
+  test('card warns when hasSelectableInput is passed without selectableInputAriaLabel or a card title', () => {
+    const consoleWarnMock = jest.fn();
+    global.console = { warn: consoleWarnMock } as any;
+
+    render(<Card isSelectable hasSelectableInput />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(consoleWarnMock).toBeCalled();
+    expect(selectableInput).toHaveAccessibleName('');
+  });
+
+  test('card applies selectableInputAriaLabel to the hidden input', () => {
+    render(<Card isSelectable hasSelectableInput selectableInputAriaLabel="Input label test" />);
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Input label test');
+  });
+
+  test('card applies the supplied card title as the aria label of the hidden input', () => {
+
+    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
+    const MockCardTitle = ({ children }) => {
+      const { registerTitleId } = React.useContext(CardContext);
+      const id = 'card-title-id';
+
+      React.useEffect(() => {
+        registerTitleId(id);
+      });
+
+      return <div id={id}>{children}</div>;
+    };
+
+    render(
+      <Card id="card" isSelectable hasSelectableInput>
+        <MockCardTitle>Card title from title component</MockCardTitle>
+      </Card>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Card title from title component');
+  });
+
+  test('card prioritizes selectableInputAriaLabel over card title labelling via card title', () => {
+
+    // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
+    const MockCardTitle = ({ children }) => {
+      const { registerTitleId } = React.useContext(CardContext);
+      const id = 'card-title-id';
+
+      React.useEffect(() => {
+        registerTitleId(id);
+      });
+
+      return <div id={id}>{children}</div>;
+    };
+
+    render(
+      <Card id="card" isSelectable hasSelectableInput selectableInputAriaLabel="Input label test">
+        <MockCardTitle>Card title from title component</MockCardTitle>
+      </Card>
+    );
+
+    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+
+    expect(selectableInput).toHaveAccessibleName('Input label test');
+  });
 });
diff --git a/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
index 0aa55985b51..2b7f43ec8da 100644
--- a/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
+++ b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
+import { CardContext } from '../Card';
 
 describe('CardTitle', () => {
   test('renders with PatternFly Core styles', () => {
@@ -19,4 +20,16 @@ describe('CardTitle', () => {
     render(<CardTitle data-testid={testId} />);
     expect(screen.getByTestId(testId)).toBeInTheDocument();
   });
+
+  test('calls the registerTitleId function provided by the CardContext with the generated title id', () => {
+    const mockRegisterTitleId = jest.fn();
+
+    render(
+      <CardContext.Provider value={{ cardId: 'card', registerTitleId: mockRegisterTitleId }}>
+        <CardTitle>text</CardTitle>
+      </CardContext.Provider>
+    );
+
+    expect(mockRegisterTitleId).toHaveBeenCalledWith('card-title');
+  });
 });
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index 4ef38cf98e1..ff0d0391b22 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -71,6 +71,23 @@ import pfLogoSmall from './pf-logo-small.svg';
 ```ts file='./CardSelectable.tsx'
 ```
 
+### Selectable accessibility highlight
+
+This example demonstrates how the `hasSelectableInput` and `onSelectableInputChange` props improve accessibility for selectable cards.
+
+The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, it communicates the current selection state as well.
+
+By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the `selectableInputAriaLabel` prop.
+
+The first card also (by passing an onchange callback to `onSelectableInputChange`) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.
+
+The second card does not set `hasSelectableInput` to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.
+
+To best understand this example it is encouraged that you navigate both of these cards using a screen reader.
+
+```ts file='./CardSelectableA11yHighlight.tsx'
+```
+
 ### With heading element
 
 ```ts file='./CardWithHeadingElement.tsx'
diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
index b8af08215e0..32e9e5ac0d3 100644
--- a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
@@ -31,6 +31,11 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
+  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+    const newSelected = labelledById === selected ? null : labelledById;
+    setSelected(newSelected);
+  };
+
   const onToggle = (isOpen: boolean, event: any) => {
     event.stopPropagation();
     setIsKebabOpen(isOpen);
@@ -65,8 +70,10 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         id="legacy-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        onSelectableInputChange={onChange}
         isSelectable
         isSelected={selected === 'legacy-first-card'}
+        hasSelectableInput
       >
         <CardHeader>
           <CardActions>
@@ -80,7 +87,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
             />
           </CardActions>
         </CardHeader>
-        <CardTitle>First card</CardTitle>
+        <CardTitle>First legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
       <br />
@@ -88,10 +95,12 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         id="legacy-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        onSelectableInputChange={onChange}
         isSelectable
         isSelected={selected === 'legacy-second-card'}
+        hasSelectableInput
       >
-        <CardTitle>Second card</CardTitle>
+        <CardTitle>Second legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
     </>
diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
index b8708882d51..73da4cf160b 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -31,6 +31,11 @@ export const CardSelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
+  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+    const newSelected = labelledById === selected ? null : labelledById;
+    setSelected(newSelected);
+  };
+
   const onToggle = (
     isOpen: boolean,
     event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
@@ -68,6 +73,8 @@ export const CardSelectable: React.FunctionComponent = () => {
         id="selectable-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
@@ -91,6 +98,8 @@ export const CardSelectable: React.FunctionComponent = () => {
         id="selectable-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
         isSelectableRaised
         isSelected={selected === 'selectable-second-card'}
       >
@@ -98,7 +107,7 @@ export const CardSelectable: React.FunctionComponent = () => {
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>
       <br />
-      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised>
+      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised hasSelectableInput>
         <CardTitle>Third card</CardTitle>
         <CardBody>This is a raised but disabled card.</CardBody>
       </Card>
diff --git a/packages/react-core/src/components/Card/examples/CardSelectableA11yHighlight.tsx b/packages/react-core/src/components/Card/examples/CardSelectableA11yHighlight.tsx
new file mode 100644
index 00000000000..34580dbfdeb
--- /dev/null
+++ b/packages/react-core/src/components/Card/examples/CardSelectableA11yHighlight.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
+
+export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
+  const [selected, setSelected] = React.useState<string>('');
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if ([' ', 'Enter'].includes(event.key)) {
+      event.preventDefault();
+      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      setSelected(newSelected);
+    }
+  };
+
+  const onClick = (event: React.MouseEvent) => {
+    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    setSelected(newSelected);
+  };
+
+  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+    const newSelected = labelledById === selected ? null : labelledById;
+    setSelected(newSelected);
+  };
+
+  return (
+    <React.Fragment>
+      <Card
+        id="selectable-first-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        hasSelectableInput
+        onSelectableInputChange={onChange}
+        isSelectableRaised
+        isSelected={selected === 'selectable-first-card'}
+      >
+        <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
+        <CardBody>
+          When using a screen reader a checkbox will become navigable that indicates this card is selectable and
+          communicate if it is currently selected.
+        </CardBody>
+      </Card>
+      <br />
+      <Card
+        id="selectable-second-card"
+        onKeyDown={onKeyDown}
+        onClick={onClick}
+        isSelectableRaised
+        isSelected={selected === 'selectable-second-card'}
+      >
+        <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
+        <CardBody>
+          When using a screen reader there are no indications that this card is selectable or if it is currently
+          selected.
+        </CardBody>
+      </Card>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index eab5c78d57b..4ef9dc4d348 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -197,7 +197,7 @@ class CardViewBasic extends React.Component {
         });
       }
     };
-    
+
     this.onKeyDown = (event, productId) => {
       console.log(productId);
       if (event.target !== event.currentTarget) {
@@ -206,28 +206,30 @@ class CardViewBasic extends React.Component {
       if ([' ', 'Enter'].includes(event.key)) {
         event.preventDefault();
         this.setState(prevState => {
-          return prevState.selectedItems.includes(productId*1) ? 
-          {
-            selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-            areAllSelected: false
-          } : {
-            selectedItems: [...prevState.selectedItems, productId * 1],
-            areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
-          };
+          return prevState.selectedItems.includes(productId * 1)
+            ? {
+                selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+                areAllSelected: false
+              }
+            : {
+                selectedItems: [...prevState.selectedItems, productId * 1],
+                areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+              };
         });
       }
     };
-    
+
     this.onClick = productId => {
       this.setState(prevState => {
-        return prevState.selectedItems.includes(productId*1) ? 
-        {
-          selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-          areAllSelected: false
-        } : {
-          selectedItems: [...prevState.selectedItems, productId * 1],
-          areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
-        };
+        return prevState.selectedItems.includes(productId * 1)
+          ? {
+              selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+              areAllSelected: false
+            }
+          : {
+              selectedItems: [...prevState.selectedItems, productId * 1],
+              areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+            };
       });
     };
   }
@@ -559,12 +561,8 @@ class CardViewBasic extends React.Component {
             </Toolbar>
           </PageSection>
           <PageSection isFilled>
-            <Gallery hasGutter>
-              <Card 
-                isSelectable 
-                selectableVariant="raised" 
-                isCompact
-              >
+            <Gallery hasGutter aria-label="Selectable card container">
+              <Card isSelectableRaised isCompact>
                 <Bullseye>
                   <EmptyState variant={EmptyStateVariant.xs}>
                     <EmptyStateIcon icon={PlusCircleIcon} />
@@ -578,13 +576,15 @@ class CardViewBasic extends React.Component {
                 </Bullseye>
               </Card>
               {filtered.map((product, key) => (
-                <Card 
-                  isSelectable 
-                  selectableVariant="raised" 
-                  isCompact 
+                <Card
+                  isSelectableRaised
+                  hasSelectableInput
+                  isCompact
                   key={product.name}
-                  onKeyDown={(e) => this.onKeyDown(e, product.id)}
+                  id={product.name.replace(/ /g, '-')}
+                  onKeyDown={e => this.onKeyDown(e, product.id)}
                   onClick={() => this.onClick(product.id)}
+                  onSelectableInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
                   <CardHeader>
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 293a448c06a..b7c4abcfc3c 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -1100,6 +1100,7 @@ class PrimaryDetailCardView extends React.Component {
         return;
       }
       if ([13, 32].includes(event.keyCode)) {
+        event.preventDefault();
         const newSelected = event.currentTarget.id;
         this.setState({
           activeCard: newSelected,
@@ -1121,6 +1122,17 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
+    this.onChange = (labelledById, _event) => {
+      if (labelledById === this.state.activeCard) {
+        return;
+      }
+
+      this.setState({
+        activeCard: labelledById,
+        isDrawerExpanded: true
+      });
+    };
+
     this.onPerPageSelect = (_evt, perPage) => {
       this.setState({ page: 1, perPage });
     };
@@ -1262,7 +1274,7 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     const drawerContent = (
-      <Gallery hasGutter>
+      <Gallery hasGutter aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <React.Fragment>
             <Card
@@ -1271,8 +1283,10 @@ class PrimaryDetailCardView extends React.Component {
               id={'card-view-' + key}
               onKeyDown={this.onKeyDown}
               onClick={this.onCardClick}
+              onSelectableInputChange={this.onChange}
               isSelectable
-              isSelected={activeCard === key}
+              isSelected={activeCard === 'card-view-' + key}
+              hasSelectableInput
             >
               <CardHeader>
                 <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
index cf80d129e5f..6570b0bac13 100644
--- a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
@@ -89,14 +89,17 @@ export const ModalTabs: React.FunctionComponent = () => {
           </TextContent>
         </PageSection>
         <PageSection isFilled>
-          <Gallery hasGutter>
+          <Gallery hasGutter aria-label="Selectable card container">
             {products.map(product => (
               <Card
                 isSelectable
                 isSelectableRaised
+                hasSelectableInput
                 isCompact
                 key={product.id}
+                id={product.name.replace(/ /g, '-')}
                 onClick={onCardClick(product)}
+                onSelectableInputChange={() => onCardClick(product)()}
                 onKeyPress={onCardKeyPress(product)}
               >
                 <CardTitle>{product.name}</CardTitle>