feat(misc): update screenreader classname

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { AlertIcon } from './AlertIcon';
 import { capitalize, useOUIAProps, OUIAProps } from '../../helpers';
 import { AlertContext } from './AlertContext';
@@ -117,7 +116,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
   const getHeadingContent = (
     <React.Fragment>
-      <span className={css(accessibleStyles.screenReader)}>{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-v5-u-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Custom alert:
       </span>

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

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

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

@@ -51,9 +51,9 @@ test('Renders with class name pf-m-blue when "blue" is passed to variant prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
-test('Does not render pf-v5-u-screen-reader class by default', () => {
+test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-u-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

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-v5-u-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-v5-u-screen-reader"
+          class="pf-v5-screen-reader"
         >
           : default status;
         </span>

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import { css } from '@patternfly/react-styles';
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { capitalize } from '../../helpers';
 import { Tooltip } from '../Tooltip';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -64,7 +63,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
           {isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : <CustomIcon />}
         </span>
       )}
-      {label && <span className={css(accessibleStyles.screenReader)}>{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-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Warning alert:
     </span>
@@ -93,7 +93,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Custom alert:
     </span>
@@ -130,7 +130,7 @@ exports[`ModalBoxTitle danger variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Danger alert:
     </span>
@@ -167,7 +167,7 @@ exports[`ModalBoxTitle info variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Info alert:
     </span>
@@ -204,7 +204,7 @@ exports[`ModalBoxTitle success variant 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     >
       Success alert:
     </span>

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

@@ -88,7 +88,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
       const reader = new FileReader();
       reader.onload = () => resolve(reader.result);
       reader.onerror = () => reject(reader.error);
-      reader.onprogress = data => {
+      reader.onprogress = (data) => {
         if (data.lengthComputable) {
           setLoadPercentage((data.loaded / data.total) * 100);
         }
@@ -103,7 +103,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     } else {
       onReadStarted(file);
       readFile(file)
-        .then(data => {
+        .then((data) => {
           setLoadResult('success');
           setLoadPercentage(100);
           onReadFinished(file);

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
-import a11yStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { getUniqueId } from '../../helpers/util';
@@ -145,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={css(a11yStyles.screenReader)} 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-v5-u-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-v5-u-screen-reader"
+            class="pf-v5-screen-reader"
             id="grp-1"
           >
             Section 1 - Example sub-navigation

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

@@ -7,7 +7,6 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
-import a11yStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 import maxLines from '@patternfly/react-tokens/dist/esm/c_notification_drawer__list_item_header_title_max_lines';
 
@@ -87,7 +86,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
       ref={titleRef}
       className={css(styles.notificationDrawerListItemHeaderTitle, truncateTitle && styles.modifiers.truncate)}
     >
-      {srTitle && <span className={css(a11yStyles.screenReader)}>{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-v5-u-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-v5-u-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-v5-u-screen-reader">{screenreaderText}</span>
+      <span className="pf-v5-screen-reader">{screenreaderText}</span>
     </div>
   );
 };