@patternfly/react-core 6.2.1-prerelease.0 → 6.2.1-prerelease.10

package/src/components/List/__tests__/__snapshots__/List.test.tsx.snap

@@ -1,275 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`List icon large list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-icon-lg"
-  >
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Apple
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Banana
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Orange
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List icon list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-plain"
-    role="list"
-  >
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Apple
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Banana
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Orange
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List inline list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-inline"
-  >
-    <ul
-      class="pf-v6-c-list"
-    >
-      <li
-        class=""
-      >
-        <span>
-          First
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Second
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Third
-        </span>
-      </li>
-    </ul>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List ordered list 1`] = `
+exports[`Shared tests between ol and ul lists Matches snapshot for ol list 1`] = `
 <DocumentFragment>
   <ol
     class="pf-v6-c-list"
     type="1"
-  >
-    <li
-      class=""
-    >
-      <span>
-        Apple
-      </span>
-    </li>
-    <li
-      class=""
-    >
-      <span>
-        Banana
-      </span>
-    </li>
-    <li
-      class=""
-    >
-      <span>
-        Orange
-      </span>
-    </li>
-  </ol>
+  />
 </DocumentFragment>
 `;
 
-exports[`List simple list 1`] = `
+exports[`Shared tests between ol and ul lists Matches snapshot for ul list 1`] = `
 <DocumentFragment>
   <ul
     class="pf-v6-c-list"
-  >
-    <ul
-      class="pf-v6-c-list"
-    >
-      <li
-        class=""
-      >
-        <span>
-          First
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Second
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Third
-        </span>
-      </li>
-    </ul>
-  </ul>
+  />
 </DocumentFragment>
 `;

package/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with icon 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-v6-c-list__item"
+  >
+    <span
+      class="pf-v6-c-list__item-icon"
+    >
+      <div>
+        Icon content
+      </div>
+    </span>
+    <span
+      class="pf-v6-c-list__item-text"
+    >
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without icon 1`] = `
+<DocumentFragment>
+  <li
+    class=""
+  >
+    <span>
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;

package/src/components/LoginPage/LoginForm.tsx

@@ -28,6 +28,8 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   onChangeUsername?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
+  /** Flag indicating if password is required */
+  isPasswordRequired?: boolean;
   /** Label for the password input field */
   passwordLabel?: string;
   /** Value for the password */
@@ -66,6 +68,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
   usernameValue = '',
   onChangeUsername = () => undefined as any,
   isValidUsername = true,
+  isPasswordRequired = true,
   passwordLabel = 'Password',
   passwordValue = '',
   onChangePassword = () => undefined as any,
@@ -85,7 +88,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
 
   const passwordInput = (
     <TextInput
-      isRequired
+      isRequired={isPasswordRequired}
       type={passwordHidden ? 'password' : 'text'}
       id="pf-login-password-id"
       name="pf-login-password-id"
@@ -118,7 +121,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           onChange={onChangeUsername}
         />
       </FormGroup>
-      <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
+      <FormGroup label={passwordLabel} isRequired={isPasswordRequired} fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
             <InputGroupItem isFill>{passwordInput}</InputGroupItem>

package/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -48,4 +48,16 @@ describe('LoginForm', () => {
     const { asFragment } = render(<LoginForm isShowPasswordEnabled />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders LoginForm with password field required by default', () => {
+    render(<LoginForm />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).toBeRequired();
+  });
+
+  test('Renders LoginForm with password field not required when isPasswordRequired set to false', () => {
+    render(<LoginForm isPasswordRequired={false} />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).not.toBeRequired();
+  });
 });

package/src/components/LoginPage/examples/LoginPage.md

@@ -31,6 +31,7 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 ### Basic
 
+By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

package/src/components/Nav/Nav.tsx

@@ -10,7 +10,7 @@ export type NavSelectClickHandler = (
   to: string
 ) => void;
 export interface NavProps
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect'>,
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;

package/src/components/Nav/NavItemSeparator.tsx

@@ -2,6 +2,7 @@ import { Divider, DividerProps } from '../Divider';
 
 export const NavItemSeparator: React.FunctionComponent<DividerProps> = ({
   component = 'li',
+  role = 'presentation',
   ...props
-}: DividerProps) => <Divider component={component} {...props} />;
+}: DividerProps) => <Divider component={component} role={role} {...props} />;
 NavItemSeparator.displayName = 'NavItemSeparator';

package/src/components/Page/Page.tsx

@@ -22,7 +22,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Masthead component (e.g. <Masthead />) */
   masthead?: React.ReactNode;
-  /** Sidebar component for a side nav (e.g. <PageSidebar />) */
+  /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
+   * will render without a sidebar.
+   */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
   notificationDrawer?: React.ReactNode;
@@ -336,6 +338,7 @@ class Page extends Component<PageProps, PageState> {
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
+            sidebar === null && styles.modifiers.noSidebar,
             className
           )}
         >

package/src/components/Page/__tests__/Page.test.tsx

@@ -353,6 +353,24 @@ describe('Page', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test(`Does not render with class ${styles.modifiers.noSidebar} by default`, () => {
+    render(<Page data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Does not render with class ${styles.modifiers.noSidebar} when sidebar prop is passed with valid content`, () => {
+    render(<Page data-testid="page" sidebar={<div>sidebar content</div>}></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Renders with class ${styles.modifiers.noSidebar} when sidebar is set to null`, () => {
+    render(<Page data-testid="page" sidebar={null}></Page>);
+
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.noSidebar);
+  });
+
   test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isContentFilled is not passed`, () => {
     render(<Page {...props} role="main"></Page>);
 

package/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx

@@ -8,7 +8,7 @@ import {
 } from '@patternfly/react-core';
 
 export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Progress Title outside of progress bar">
     <DescriptionListGroup>
       <DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
       <DescriptionListDescription>

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -32,6 +32,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
       />
       <br />
       <SearchInput
+        aria-label="Advanced search"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }

package/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -10,6 +10,7 @@ export const SearchInputBasic: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search basic example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -7,7 +7,13 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
+      <SearchInput
+        ref={ref}
+        value={value}
+        onChange={(_event, value) => setValue(value)}
+        onClear={() => setValue('')}
+        aria-label="Search focus using ref example"
+      />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -15,6 +15,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with expandable button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -29,6 +29,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search match with navigable options example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -17,6 +17,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Match with result count"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -6,6 +6,7 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with submit button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => setValue(value)}

package/src/components/Select/SelectGroup.tsx

@@ -10,7 +10,7 @@ export interface SelectGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Classes applied to root element of select group */
   className?: string;
   /** Label of the select group */
-  label?: string;
+  label?: React.ReactNode;
 }
 
 export const SelectGroup: React.FunctionComponent<SelectGroupProps> = ({

package/src/components/Skeleton/examples/SkeletonDefault.tsx

@@ -1,3 +1,3 @@
 import { Skeleton } from '@patternfly/react-core';
 
-export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
+export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading default content" />;

package/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx

@@ -2,11 +2,11 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageHeight: React.FunctionComponent = () => (
   <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-    <Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
-    <Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
-    <Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
-    <Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
-    <Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
-    <Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
+    <Skeleton height="25%" width="15%" screenreaderText="Loading percentage height content" />
+    <Skeleton height="33%" width="15%" />
+    <Skeleton height="50%" width="15%" />
+    <Skeleton height="66%" width="15%" />
+    <Skeleton height="75%" width="15%" />
+    <Skeleton height="100%" width="15%" />
   </div>
 );

package/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx

@@ -3,15 +3,15 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageWidth: React.FunctionComponent = () => (
   <Fragment>
-    <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+    <Skeleton width="25%" screenreaderText="Loading percentage width content" />
     <br />
-    <Skeleton width="33%" screenreaderText="Loaded 33% of content" />
+    <Skeleton width="33%" />
     <br />
-    <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+    <Skeleton width="50%" />
     <br />
-    <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+    <Skeleton width="66%" />
     <br />
-    <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+    <Skeleton width="75%" />
     <br />
     <Skeleton />
   </Fragment>

package/src/components/Skeleton/examples/SkeletonShapes.tsx

@@ -4,36 +4,36 @@ import { Skeleton } from '@patternfly/react-core';
 export const SkeletonShapes: React.FunctionComponent = () => (
   <Fragment>
     Small circle
-    <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
+    <Skeleton shape="circle" width="15%" screenreaderText="Loading circle content" />
     <br />
     Medium circle
-    <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
+    <Skeleton shape="circle" width="30%" />
     <br />
     Large circle
-    <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
+    <Skeleton shape="circle" width="50%" />
     <br />
     Small square
-    <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
+    <Skeleton shape="square" width="15%" screenreaderText="Loading square content" />
     <br />
     Medium square
-    <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
+    <Skeleton shape="square" width="30%" />
     <br />
     Large square
-    <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
+    <Skeleton shape="square" width="50%" />
     <br />
     Small rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
+      <Skeleton height="50%" width="50%" screenreaderText="Loading rectangle content" />
     </div>
     <br />
     Medium rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
+      <Skeleton height="75%" width="75%" />
     </div>
     <br />
     Large rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
+      <Skeleton height="100%" />
     </div>
   </Fragment>
 );

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -12,24 +12,24 @@ import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_fo
 export const SkeletonText: React.FunctionComponent = () => (
   <Fragment>
     {t_global_font_size_4xl.name}
-    <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
+    <Skeleton fontSize="4xl" screenreaderText="Loading text content" />
     <br />
     {t_global_font_size_3xl.name}
-    <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
+    <Skeleton fontSize="3xl" />
     <br />
     {t_global_font_size_2xl.name}
-    <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
+    <Skeleton fontSize="2xl" />
     <br />
     {t_global_font_size_xl.name}
-    <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
+    <Skeleton fontSize="xl" />
     <br />
     {t_global_font_size_lg.name}
-    <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
+    <Skeleton fontSize="lg" />
     <br />
     {t_global_font_size_md.name}
-    <Skeleton fontSize="md" screenreaderText="Loading font size md" />
+    <Skeleton fontSize="md" />
     <br />
     {t_global_font_size_sm.name}
-    <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
+    <Skeleton fontSize="sm" />
   </Fragment>
 );