feat(misc): update screenreader classname (#9392)

* Rebase postv5 (#9393) * chore(deps): bump docs framework (#9370) * chore(docs): Updated screenshots (#9337) * chore(docs): Updated screenshots * updated screenshots after logo update --------- Co-authored-by: Titani <tlabaj@redaht.com> * chore(release): releasing packages [ci skip] - @patternfly/react-docs@6.0.0-prerelease.26 * chore(deps): bump to latest chore version (#9389) * chore(deps): bump to latest chore version * bump to 16 * chore(release): releasing packages [ci skip] - @patternfly/react-charts@7.0.0-prerelease.12 - @patternfly/react-code-editor@5.0.0-prerelease.24 - @patternfly/react-core@5.0.0-prerelease.24 - @patternfly/react-docs@6.0.0-prerelease.27 - @patternfly/react-icons@5.0.0-prerelease.9 - demo-app-ts@5.0.0-prerelease.22 - @patternfly/react-styles@5.0.0-prerelease.7 - @patternfly/react-table@5.0.0-prerelease.24 - @patternfly/react-tokens@5.0.0-prerelease.9 * fix(fileupload): use default readonly text input instead of plain (#9387) * fix(fileupload): use default readonly text input instead of plain * chore(build): snaps * fix(CodeEditor): prevent clicks in textarea from opening fileupload (#9385) * fix(toolbar): added chip container class to toolbar content (#9379) * feat(Menu): added support for tooltips to menu (#9382) * fix(whitespace): Update readme to trigger release * chore(release): releasing packages [ci skip] - @patternfly/react-code-editor@5.0.0-prerelease.25 - @patternfly/react-core@5.0.0-prerelease.25 - @patternfly/react-docs@6.0.0-prerelease.28 - demo-app-ts@5.0.0-prerelease.23 - @patternfly/react-table@5.0.0-prerelease.25 * fix(Toolbar): resolved typeerror on full page demo (#9355) * chore(TreeView): converted examples to TS (#9286) * fix(ExpandableSection): added ARIA attributes (#9303) * fix(ExpandableSection): added ARIA attributes * Updated failing snapshots due to mismatching generated ID * chore(Tooltip): updated unit tests (#9295) * chore(Tooltip): updated unit tests * Updated mock and tests * Updated based on Austin feedback * Updated integration tests * Removed unused imports * Updated remaining tests using Popper mock * Removed extraenous snapshot test * Removed test * Split out onTooltipHidden test * chore(Card): added tests for new clickable/selectable (#9262) * chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test * fix(Slider): reverted taborder (#9293) * fix(chore): Fix deprecated wizard integration tests (#9312) * fix(chore): Fix deprecated wizard integration tests * updated non deprecated test as well --------- Co-authored-by: Titani <tlabaj@redaht.com> --------- Co-authored-by: Titani <tlabaj@redaht.com> Co-authored-by: patternfly-build <patternfly-build@redhat.com> Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Dallas <dallas.nicol@gmail.com> Co-authored-by: Dana Gutride <dgutride@gmail.com> Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> * feat(misc): update screenreader classname * add prefix * fix missing merge conflict * update Banner test --------- Co-authored-by: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Co-authored-by: Titani <tlabaj@redaht.com> Co-authored-by: patternfly-build <patternfly-build@redhat.com> Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Dallas <dallas.nicol@gmail.com> Co-authored-by: Dana Gutride <dgutride@gmail.com> Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
patternfly · Aug 16, 2023 · 3bcd263 · 3bcd263
1 parent 6020af4
commit 3bcd263
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 47 deletions.
diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/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>
   );

diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/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>

diff --git a/packages/react-core/src/components/Banner/Banner.tsx b/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>
 );

diff --git a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx b/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', () => {

diff --git a/packages/react-core/src/components/HelperText/HelperTextItem.tsx b/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>
   );

diff --git a/...ges/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap b/...ges/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>

diff --git a/packages/react-core/src/components/Modal/ModalBoxTitle.tsx b/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>
   );

diff --git a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap b/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>

diff --git a/packages/react-core/src/components/Nav/NavExpandable.tsx b/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 @@ class NavExpandable extends React.Component<NavExpandableProps, NavExpandableSta
             </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>
               )}

diff --git a/...act-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap b/...act-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="''"
       >
         ''

diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/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

diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx b/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>
   );

diff --git a/...NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap b/...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>

diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/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>

diff --git a/packages/react-core/src/components/Skeleton/Skeleton.tsx b/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>
   );
 };

diff --git a/packages/react-core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap b/packages/react-core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`skeleton circle skeleton 1`] = `
     class="pf-v5-c-skeleton pf-m-circle"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -18,7 +18,7 @@ exports[`skeleton default 1`] = `
     class="pf-v5-c-skeleton"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`skeleton skeleton with 2xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-2xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -42,7 +42,7 @@ exports[`skeleton skeleton with 3xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-3xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -54,7 +54,7 @@ exports[`skeleton skeleton with 4xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-4xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -67,7 +67,7 @@ exports[`skeleton skeleton with 25% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 25%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -80,7 +80,7 @@ exports[`skeleton skeleton with 25% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 25%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -93,7 +93,7 @@ exports[`skeleton skeleton with 33% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 33%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -106,7 +106,7 @@ exports[`skeleton skeleton with 33% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 33%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -119,7 +119,7 @@ exports[`skeleton skeleton with 50% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 50%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -132,7 +132,7 @@ exports[`skeleton skeleton with 50% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 50%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -145,7 +145,7 @@ exports[`skeleton skeleton with 66% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 66%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -158,7 +158,7 @@ exports[`skeleton skeleton with 66% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 66%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -171,7 +171,7 @@ exports[`skeleton skeleton with 75% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 75%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -184,7 +184,7 @@ exports[`skeleton skeleton with 75% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 75%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -197,7 +197,7 @@ exports[`skeleton skeleton with 100% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 100%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -209,7 +209,7 @@ exports[`skeleton skeleton with lg font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-lg"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -221,7 +221,7 @@ exports[`skeleton skeleton with md font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-md"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -233,7 +233,7 @@ exports[`skeleton skeleton with sm font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-sm"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -245,7 +245,7 @@ exports[`skeleton skeleton with xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -257,7 +257,7 @@ exports[`skeleton square skeleton 1`] = `
     class="pf-v5-c-skeleton pf-m-square"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>