rebase, use styles obj, fix screenreader application

packages/react-core/src/components/Card/CardHeader.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 accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { CardContext } from './Card';
 import { CardHeaderMain } from './CardHeaderMain';
 import { CardActions } from './CardActions';
@@ -135,7 +136,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
 
         const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
         const getSelectableProps = () => ({
-          className: css('pf-m-standalone', selectableActions?.isHidden && 'pf-v6-screen-reader'),
+          className: css('pf-m-standalone'),
+          inputClassName: css(selectableActions?.isHidden && accessibilityStyles.screenReader),
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -155,7 +157,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
             className: css(
               'pf-v6-c-card__clickable-action',
               isDisabledLinkCard && styles.modifiers.disabled,
-              selectableActions?.isHidden && 'pf-v6-screen-reader'
+              selectableActions?.isHidden && accessibilityStyles.screenReader
             ),
             id: selectableActions.selectableActionId,
             'aria-label': selectableActions.selectableActionAriaLabel,

packages/react-core/src/components/Card/examples/Card.md

@@ -182,16 +182,22 @@ Dividers can be placed between sections of the card.
 
 ## Cards as tiles
 
-Sets of selectable cards may also be used as tiles, and may be made either single selectable or multiselectable by passing the `variant` property to the `selectableActions` object. You may toggle the visibility of the radio or checkbox by additionally passing the `isHidden` property to the `selectableActions` object.
+Sets of selectable cards can be used as tiles, which are static options that users can select.
+
+They can be either single selectable or multi selectable, by passing the `variant` property to the `selectableActions` object. You can also toggle the visibility of the radio or checkbox by passing the `isHidden` property to the `selectableActions` object.
 
 ### Single selectable tiles
 
+To prevent users from selecting more than 1 tile in a set, set `variant` to "single" within the `selectableActions` object of `<CardHeader>`.
+
 ```ts file='./CardTile.tsx'
 
 ```
 
 ### Multi selectable tiles
 
+To allow users to select more than 1 tile in a set, do not set `variant` within the `selectableActions` object of `<CardHeader>`.
+
 ```ts file='./CardTileMulti.tsx'
 
 ```

packages/react-core/src/deprecated/components/Tile/examples/Tile.md

@@ -1,7 +1,7 @@
 ---
 id: Tile
 section: components
-cssPrefix: pf-v5-c-tile
+cssPrefix: pf-v6-c-tile
 propComponents: ['Tile']
 deprecated: true
 ---
@@ -10,7 +10,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import './Tile.css';
 
-Note: Tile has been deprecated, please use the [Card](/components/card#cards-as-tiles) component.
+**Note:** Tile has been deprecated. Use the [card](/components/card#cards-as-tiles) component instead.
 
 ## Examples