add prefix

packages/react-core/src/components/Alert/Alert.tsx

@@ -116,7 +116,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
  const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
  const getHeadingContent = (
  <React.Fragment>
- <span className="pf-screen-reader">{variantLabel}</span>
+ <span className="pf-v5-screen-reader">{variantLabel}</span>
  {title}
  </React.Fragment>
  );

packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`Matches snapshot 1`] = `
  class="pf-v5-c-alert__title"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Custom alert:
  </span>

packages/react-core/src/components/Badge/Badge.tsx

@@ -25,7 +25,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
  className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
  >
  {children}
- {screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
+ {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
  </span>
 );
 Badge.displayName = 'Badge';

packages/react-core/src/components/Banner/Banner.tsx

@@ -34,7 +34,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
  )}
  {...props}
  >
- {screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
+ {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
  {children}
  </div>
 );

packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

@@ -377,7 +377,7 @@ export const CalendarMonth = ({
  <tr>
  {calendar[0].map(({ date }, index) => (
  <th key={index} className={styles.calendarMonthDay} scope="col">
- <span className="pf-screen-reader">{longWeekdayFormat(date)}</span>
+ <span className="pf-v5-screen-reader">{longWeekdayFormat(date)}</span>
  <span aria-hidden>{weekdayFormat(date)}</span>
  </th>
  ))}

packages/react-core/src/components/Card/Card.tsx

@@ -165,7 +165,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
  >
  {hasSelectableInput && (
  <input
- className="pf-screen-reader"
+ className="pf-v5-screen-reader"
  id={`${id}-input`}
  {...ariaProps}
  type="checkbox"

packages/react-core/src/components/Card/CardHeader.tsx

@@ -119,7 +119,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
  const getClickableSelectableProps = () => {
  const baseProps = {
  className: 'pf-m-standalone',
- inputClassName: isClickable && !isSelectable && 'pf-screen-reader',
+ inputClassName: isClickable && !isSelectable && 'pf-v5-screen-reader',
  label: <></>,
  'aria-label': selectableActions.selectableActionAriaLabel,
  'aria-labelledby': selectableActions.selectableActionAriaLabelledby,

packages/react-core/src/components/DataList/DataListItem.tsx

@@ -93,7 +93,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
  >
  {onSelectableRowChange && (
  <input
- className="pf-screen-reader"
+ className="pf-v5-screen-reader"
  type="radio"
  checked={isSelected}
  onChange={(event) => onSelectableRowChange(event, id)}

packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -218,7 +218,7 @@ exports[`With popover opened 1`] = `
  scope="col"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Sunday
  </span>
@@ -233,7 +233,7 @@ exports[`With popover opened 1`] = `
  scope="col"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Monday
  </span>
@@ -248,7 +248,7 @@ exports[`With popover opened 1`] = `
  scope="col"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Tuesday
  </span>
@@ -263,7 +263,7 @@ exports[`With popover opened 1`] = `
  scope="col"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Wednesday
  </span>
@@ -278,7 +278,7 @@ exports[`With popover opened 1`] = `
  scope="col"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Thursday
  </span>
@@ -293,7 +293,7 @@ exports[`With popover opened 1`] = `
  scope="col"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Friday
  </span>
@@ -308,7 +308,7 @@ exports[`With popover opened 1`] = `
  scope="col"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Saturday
  </span>

packages/react-core/src/components/HelperText/HelperTextItem.tsx

@@ -78,7 +78,7 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
 
  <span className={css(styles.helperTextItemText)}>
  {children}
- {isDynamic && <span className="pf-screen-reader">: {screenReaderText};</span>}
+ {isDynamic && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
  </span>
  </Component>
  );

packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
  >
  help test text
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  : default status;
  </span>

packages/react-core/src/components/Modal/ModalBoxTitle.tsx

@@ -63,7 +63,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
  {isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : <CustomIcon />}
  </span>
  )}
- {label && <span className="pf-screen-reader">{label}</span>}
+ {label && <span className="pf-v5-screen-reader">{label}</span>}
  <span className={css(modalStyles.modalBoxTitleText)}>{title}</span>
  </h1>
  );

packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`ModalBoxTitle alert variant 1`] = `
  </svg>
  </span>
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Warning alert:
  </span>
@@ -93,7 +93,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
  </svg>
  </span>
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Custom alert:
  </span>
@@ -130,7 +130,7 @@ exports[`ModalBoxTitle danger variant 1`] = `
  </svg>
  </span>
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Danger alert:
  </span>
@@ -167,7 +167,7 @@ exports[`ModalBoxTitle info variant 1`] = `
  </svg>
  </span>
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Info alert:
  </span>
@@ -204,7 +204,7 @@ exports[`ModalBoxTitle success variant 1`] = `
  </svg>
  </span>
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Success alert:
  </span>

packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -148,7 +148,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
  <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
  <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
  <div className={styles.multipleFileUploadStatusItemMain}>
- <div className="pf-screen-reader" aria-live="polite">
+ <div className="pf-v5-screen-reader" aria-live="polite">
  {progressAriaLiveMessage &&
  typeof progressAriaLiveMessage === 'function' &&
  progressAriaLiveMessage(+loadPercentage.toFixed(2))}

packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Progress value is 0%.
  </div>
@@ -143,7 +143,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Progress value is 0%.
  </div>
@@ -256,7 +256,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  test message
  </div>
@@ -371,7 +371,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  test message 0
  </div>
@@ -486,7 +486,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Progress value is 42%.
  </div>
@@ -618,7 +618,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Progress value is 0%.
  </div>
@@ -733,7 +733,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Progress value is 0%.
  </div>
@@ -846,7 +846,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
  >
  <div
  aria-live="polite"
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  Progress value is 0%.
  </div>

packages/react-core/src/components/Nav/NavExpandable.tsx

@@ -144,7 +144,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
  </PageSidebarContext.Consumer>
  <section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
  {srText && (
- <h2 className="pf-screen-reader" id={this.id}>
+ <h2 className="pf-v5-screen-reader" id={this.id}>
  {srText}
  </h2>
  )}

packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -41,7 +41,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
  hidden=""
  >
  <h2
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  id="''"
  >
  ''

packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -494,7 +494,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
  hidden=""
  >
  <h2
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  id="grp-1"
  >
  Section 1 - Example sub-navigation

packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx

@@ -86,7 +86,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
  ref={titleRef}
  className={css(styles.notificationDrawerListItemHeaderTitle, truncateTitle && styles.modifiers.truncate)}
  >
- {srTitle && <span className="pf-screen-reader">{srTitle}</span>}
+ {srTitle && <span className="pf-v5-screen-reader">{srTitle}</span>}
  {title}
  </HeadingLevel>
  );

packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap

@@ -57,7 +57,7 @@ exports[`NotificationDrawerListItemHeader list item header with srTitle applied
  class="pf-v5-c-notification-drawer__list-item-header-title"
  >
  <span
- class="pf-screen-reader"
+ class="pf-v5-screen-reader"
  >
  screen reader title
  </span>

packages/react-core/src/components/Popover/PopoverHeader.tsx

@@ -36,7 +36,7 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
  {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
  <PopoverHeaderText headingLevel={titleHeadingLevel}>
  {alertSeverityVariant && alertSeverityScreenReaderText && (
- <span className="pf-screen-reader">{alertSeverityScreenReaderText}</span>
+ <span className="pf-v5-screen-reader">{alertSeverityScreenReaderText}</span>
  )}
  {children}
  </PopoverHeaderText>

packages/react-core/src/components/Skeleton/Skeleton.tsx

@@ -48,7 +48,7 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = ({
  } as React.CSSProperties
  })}
  >
- <span className="pf-screen-reader">{screenreaderText}</span>
+ <span className="pf-v5-screen-reader">{screenreaderText}</span>
  </div>
  );
 };