update to screenreader css, add link

patternfly · Sep 23, 2024 · f4dfecd · f4dfecd
1 parent 9a3ada6
commit f4dfecd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx
@@ -135,7 +135,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
 
         const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
         const getSelectableProps = () => ({
-          className: 'pf-m-standalone',
+          className: css('pf-m-standalone', selectableActions?.isHidden && 'pf-v6-screen-reader'),
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -144,27 +144,23 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           isDisabled: isCardDisabled,
           onChange: selectableActions.onChange,
           isChecked: selectableActions.isChecked ?? isSelected,
-          ...selectableActions.selectableActionProps,
-          style: {
-            ...selectableActions.selectableActionProps?.style,
-            ...(selectableActions?.isHidden && { visibility: 'hidden' })
-          }
+          ...selectableActions.selectableActionProps
         });
 
         const isClickableLinkCard = selectableActions?.to !== undefined;
         const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
         const getClickableProps = () => {
           const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
           const baseProps = {
-            className: css('pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled),
+            className: css(
+              'pf-v6-c-card__clickable-action',
+              isDisabledLinkCard && styles.modifiers.disabled,
+              selectableActions?.isHidden && 'pf-v6-screen-reader'
+            ),
             id: selectableActions.selectableActionId,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-            ...selectableActions.selectableActionProps,
-            style: {
-              ...selectableActions.selectableActionProps?.style,
-              ...(selectableActions?.isHidden && { visibility: 'hidden' })
-            }
+            ...selectableActions.selectableActionProps
           };
 
           if (isClickableLinkCard) {

diff --git a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md
@@ -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) component.
+Note: Tile has been deprecated, please use the [Card](/components/card#cards-as-tiles) component.
 
 ## Examples