@patternfly/react-core 6.0.0-alpha.76 → 6.0.0-alpha.78

package/helpers/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/helpers/index.js",
   "module": "../dist/esm/helpers/index.js",
   "typings": "../dist/esm/helpers/index.d.ts",
-  "version": "6.0.0-alpha.75",
+  "version": "6.0.0-alpha.77",
   "private": true
 }

package/layouts/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/layouts/index.js",
   "module": "../dist/esm/layouts/index.js",
   "typings": "../dist/esm/layouts/index.d.ts",
-  "version": "6.0.0-alpha.75",
+  "version": "6.0.0-alpha.77",
   "private": true
 }

package/next/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/next/index.js",
   "module": "../dist/esm/next/index.js",
   "typings": "../dist/esm/next/index.d.ts",
-  "version": "6.0.0-alpha.75",
+  "version": "6.0.0-alpha.77",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.76",
+  "version": "6.0.0-alpha.78",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.28",
-    "@patternfly/react-styles": "^6.0.0-alpha.27",
-    "@patternfly/react-tokens": "^6.0.0-alpha.27",
+    "@patternfly/react-icons": "^6.0.0-alpha.29",
+    "@patternfly/react-styles": "^6.0.0-alpha.28",
+    "@patternfly/react-tokens": "^6.0.0-alpha.28",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.166",
+    "@patternfly/patternfly": "6.0.0-alpha.180",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "625adc6f7459977f551a18d9a690bff56aea3f18"
+  "gitHead": "4eb47e70a3ba0ce15d70b03b8cf9602f7a7215f3"
 }

package/src/components/JumpLinks/JumpLinks.tsx

@@ -249,11 +249,13 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                 onClick={() => setIsExpanded(!isExpanded)}
                 aria-label={toggleAriaLabel}
                 aria-expanded={isExpanded}
+                icon={
+                  <span className={styles.jumpLinksToggleIcon}>
+                    <AngleRightIcon />
+                  </span>
+                }
               >
-                <span className={styles.jumpLinksToggleIcon}>
-                  <AngleRightIcon />
-                </span>
-                {label && <span className={css(styles.jumpLinksToggleText)}> {label} </span>}
+                {label && label}
               </Button>
             </div>
           )}

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

@@ -26,7 +26,7 @@ exports[`expandable vertical with subsection 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__text"
+              class="pf-v6-c-button__icon pf-m-start"
             >
               <span
                 class="pf-v6-c-jump-links__toggle-icon"
@@ -45,11 +45,11 @@ exports[`expandable vertical with subsection 1`] = `
                   />
                 </svg>
               </span>
-              <span
-                class="pf-v6-c-jump-links__toggle-text"
-              >
-                 Jump to section 
-              </span>
+            </span>
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Jump to section
             </span>
           </button>
         </div>

package/src/components/Page/PageSidebarBody.tsx

@@ -11,6 +11,8 @@ export interface PageSidebarBodyProps extends React.HTMLProps<HTMLDivElement> {
   usePageInsets?: boolean;
   /** Flag indicating that the page sidebar body should fill the available vertical space. */
   isFilled?: boolean;
+  /** Flag indicating that the page sidebar body is for a context selector/perspective switcher */
+  isContextSelector?: boolean;
 }
 
 export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
@@ -18,6 +20,7 @@ export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
   className,
   usePageInsets,
   isFilled,
+  isContextSelector,
   ...props
 }: PageSidebarBodyProps) => (
   <div
@@ -26,6 +29,7 @@ export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
       usePageInsets && styles.modifiers.pageInsets,
       isFilled === false && styles.modifiers.noFill,
       isFilled === true && styles.modifiers.fill,
+      isContextSelector === true && styles.modifiers.contextSelector,
       className
     )}
     {...props}

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -55,10 +55,13 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   const sidebar = (
     <PageSidebar isSidebarOpen={isSidebarOpen} id="multiple-sidebar-body-sidebar">
-      <PageSidebarBody usePageInsets>First sidebar body (with insets)</PageSidebarBody>
-      <PageSidebarBody isFilled={true}>Second sidebar body (with fill)</PageSidebarBody>
+      <PageSidebarBody isContextSelector>
+        First sidebar body (for a context selector/perspective switcher)
+      </PageSidebarBody>
+      <PageSidebarBody usePageInsets>Second sidebar body (with insets)</PageSidebarBody>
+      <PageSidebarBody isFilled={true}>Third sidebar body (with fill)</PageSidebarBody>
       <PageSidebarBody isFilled={false} usePageInsets>
-        Third sidebar body (with insets and no fill)
+        Fourth sidebar body (with insets and no fill)
       </PageSidebarBody>
     </PageSidebar>
   );

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -73,7 +73,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   firstIndex = 0,
   lastIndex = 0,
   isLastFullPageShown = false,
-  itemsTitle = 'items',
+  itemsTitle = '',
   toggleTemplate,
   onPerPageSelect = () => null as any,
   containerRef

package/src/components/Switch/Switch.tsx

@@ -12,10 +12,12 @@ export interface SwitchProps
   id?: string;
   /** Additional classes added to the switch */
   className?: string;
-  /** Text value for the visible label when on */
+  /** Text value for the visible label */
   label?: React.ReactNode;
-  /** Text value for the visible label when off */
-  labelOff?: React.ReactNode;
+  /** Adds an accessible name to the switch when the label prop is not passed, and must describe the isChecked="true" state. */
+  'aria-label'?: string;
+  /** Adds an accessible name to the switch via one or more referenced id(s). The computed accessible name must describe the isChecked="true" state. */
+  'aria-labelledby'?: string;
   /** Flag to show if the switch is checked when it is controlled by React state.
    * To make the switch uncontrolled instead use the defaultChecked prop, but do not use both.
    */
@@ -30,9 +32,7 @@ export interface SwitchProps
   isDisabled?: boolean;
   /** A callback for when the switch selection changes. (event, isChecked) => {} */
   onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
-  /** Adds accessible text to the switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
-  'aria-label'?: string;
-  /** Flag to reverse the layout of toggle and label (toggle on right). */
+  /** Flag to reverse the layout of toggle and label (label at start, toggle at end). */
   isReversed?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -48,15 +48,18 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
     isChecked: true,
     isDisabled: false,
     isReversed: false,
-    'aria-label': '',
+    'aria-label': undefined,
+    'aria-labelledby': undefined,
     onChange: () => undefined as any
   };
 
   constructor(props: SwitchProps & OUIAProps) {
     super(props);
-    if (!props.label && !props['aria-label']) {
+    if (!props.label && !props['aria-label'] && !props['aria-labelledby']) {
       // eslint-disable-next-line no-console
-      console.error('Switch: Switch requires either a label or an aria-label to be specified');
+      console.error(
+        'Switch: Switch requires at least one of label, aria-labelledby, or aria-label props to be specified'
+      );
     }
 
     this.id = props.id || getUniqueId();
@@ -71,7 +74,6 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
       id,
       className,
       label,
-      labelOff,
       isChecked,
       defaultChecked,
       hasCheckIcon,
@@ -80,10 +82,16 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
       isReversed,
       ouiaId,
       ouiaSafe,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
       ...props
     } = this.props;
 
-    const isAriaLabelledBy = props['aria-label'] === '';
+    const hasAccessibleName = label || ariaLabel || ariaLabelledBy;
+    const isAriaLabelledBy = hasAccessibleName && (!ariaLabel || ariaLabelledBy);
+    const useDefaultAriaLabelledBy = !ariaLabelledBy && !ariaLabel;
+    const ariaLabelledByIds = ariaLabelledBy ?? `${this.id}-label`;
+
     return (
       <label
         className={css(styles.switch, isReversed && styles.modifiers.reverse, className)}
@@ -94,10 +102,12 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
           id={this.id}
           className={css(styles.switchInput)}
           type="checkbox"
+          role="switch"
           onChange={(event) => onChange(event, event.target.checked)}
           {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
           disabled={isDisabled}
-          aria-labelledby={!isAriaLabelledBy ? null : `${this.id}-${isChecked !== true ? 'off' : 'on'}`}
+          aria-labelledby={isAriaLabelledBy ? ariaLabelledByIds : null}
+          aria-label={ariaLabel}
           {...props}
         />
         {label !== undefined ? (
@@ -110,19 +120,12 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
               )}
             </span>
             <span
-              className={css(styles.switchLabel, styles.modifiers.on)}
-              id={isAriaLabelledBy ? `${this.id}-on` : null}
+              className={css(styles.switchLabel)}
+              id={isAriaLabelledBy && useDefaultAriaLabelledBy ? `${this.id}-label` : null}
               aria-hidden="true"
             >
               {label}
             </span>
-            <span
-              className={css(styles.switchLabel, styles.modifiers.off)}
-              id={isAriaLabelledBy ? `${this.id}-off` : null}
-              aria-hidden="true"
-            >
-              {labelOff !== undefined ? labelOff : label}
-            </span>
           </React.Fragment>
         ) : (
           <span className={css(styles.switchToggle)}>

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

@@ -26,15 +26,13 @@ describe('Switch', () => {
   });
 
   test('switch is checked', () => {
-    const { asFragment } = render(
-      <Switch id="switch-is-checked" label="On" labelOff="Off" isChecked aria-label="Switch label" />
-    );
+    const { asFragment } = render(<Switch id="switch-is-checked" label="On" isChecked aria-label="Switch label" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('switch is not checked', () => {
     const { asFragment } = render(
-      <Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} aria-label="Switch label" />
+      <Switch id="switch-is-not-checked" label="On" isChecked={false} aria-label="Switch label" />
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -84,7 +82,7 @@ describe('Switch', () => {
     expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), true);
   });
 
-  test('should throw console error when no aria-label or label is given', () => {
+  test('should throw console error when no aria-label, aria-labelledby, or label is given', () => {
     const myMock = jest.fn();
 
     global.console = { ...global.console, error: myMock };
@@ -93,7 +91,7 @@ describe('Switch', () => {
     expect(myMock).toHaveBeenCalled();
   });
 
-  test('should not throw console error when label is given but no aria-label', () => {
+  test('should not throw console error when label is given', () => {
     const myMock = jest.fn();
     global.console = { ...global.console, error: myMock };
 
@@ -102,7 +100,7 @@ describe('Switch', () => {
     expect(myMock).not.toHaveBeenCalled();
   });
 
-  test('should not throw console error when aria-label is given but no label', () => {
+  test('should not throw console error when aria-label is given', () => {
     const myMock = jest.fn();
     global.console = { ...global.console, error: myMock };
 
@@ -111,6 +109,15 @@ describe('Switch', () => {
     expect(myMock).not.toHaveBeenCalled();
   });
 
+  test('should not throw console error when aria-labelledby is given', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<Switch {...props} aria-labelledby="some-id" />);
+
+    expect(myMock).not.toHaveBeenCalled();
+  });
+
   test('should apply reversed modifier', () => {
     render(<Switch id="reversed-switch" label="reversed switch" isReversed aria-label="Switch label" />);
     expect(screen.getByLabelText('Switch label').parentElement).toHaveClass('pf-m-reverse');

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

@@ -14,6 +14,7 @@ exports[`Switch no label switch is checked 1`] = `
       checked=""
       class="pf-v6-c-switch__input"
       id="no-label-switch-is-checked"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -55,6 +56,7 @@ exports[`Switch no label switch is not checked 1`] = `
       aria-label="Switch label"
       class="pf-v6-c-switch__input"
       id="no-label-switch-is-not-checked"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -97,6 +99,7 @@ exports[`Switch switch is checked 1`] = `
       checked=""
       class="pf-v6-c-switch__input"
       id="switch-is-checked"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -104,16 +107,10 @@ exports[`Switch switch is checked 1`] = `
     />
     <span
       aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-on"
+      class="pf-v6-c-switch__label"
     >
       On
     </span>
-    <span
-      aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-off"
-    >
-      Off
-    </span>
   </label>
 </DocumentFragment>
 `;
@@ -133,6 +130,7 @@ exports[`Switch switch is checked and disabled 1`] = `
       class="pf-v6-c-switch__input"
       disabled=""
       id="switch-is-checked-and-disabled"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -174,6 +172,7 @@ exports[`Switch switch is not checked 1`] = `
       aria-label="Switch label"
       class="pf-v6-c-switch__input"
       id="switch-is-not-checked"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -181,16 +180,10 @@ exports[`Switch switch is not checked 1`] = `
     />
     <span
       aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-on"
+      class="pf-v6-c-switch__label"
     >
       On
     </span>
-    <span
-      aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-off"
-    >
-      Off
-    </span>
   </label>
 </DocumentFragment>
 `;
@@ -209,6 +202,7 @@ exports[`Switch switch is not checked and disabled 1`] = `
       class="pf-v6-c-switch__input"
       disabled=""
       id="switch-is-not-checked-and-disabled"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -247,11 +241,11 @@ exports[`Switch switch with only label is checked 1`] = `
     for="switch-is-checked"
   >
     <input
-      aria-label=""
-      aria-labelledby="switch-is-checked-on"
+      aria-labelledby="switch-is-checked-label"
       checked=""
       class="pf-v6-c-switch__input"
       id="switch-is-checked"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -259,15 +253,8 @@ exports[`Switch switch with only label is checked 1`] = `
     />
     <span
       aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-on"
-      id="switch-is-checked-on"
-    >
-      On
-    </span>
-    <span
-      aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-off"
-      id="switch-is-checked-off"
+      class="pf-v6-c-switch__label"
+      id="switch-is-checked-label"
     >
       On
     </span>
@@ -285,10 +272,10 @@ exports[`Switch switch with only label is not checked 1`] = `
     for="switch-is-not-checked"
   >
     <input
-      aria-label=""
-      aria-labelledby="switch-is-not-checked-off"
+      aria-labelledby="switch-is-not-checked-label"
       class="pf-v6-c-switch__input"
       id="switch-is-not-checked"
+      role="switch"
       type="checkbox"
     />
     <span
@@ -296,15 +283,8 @@ exports[`Switch switch with only label is not checked 1`] = `
     />
     <span
       aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-on"
-      id="switch-is-not-checked-on"
-    >
-      Off
-    </span>
-    <span
-      aria-hidden="true"
-      class="pf-v6-c-switch__label pf-m-off"
-      id="switch-is-not-checked-off"
+      class="pf-v6-c-switch__label"
+      id="switch-is-not-checked-label"
     >
       Off
     </span>

package/src/components/Switch/examples/Switch.md

@@ -8,32 +8,40 @@ ouia: true
 
 ## Examples
 
+To keep inline with accessibility guidelines, the label for a switch must never dynamically change. A dynamically changing label (such as one label for an "on" state and another label for an "off" state) can be confusing as the contexts for each label changes as the switch state does. This applies to both visible text labels as well as labels provided via `aria-label`.
+
 ### Basic
 
 ```ts file="./SwitchBasic.tsx"
+
 ```
 
 ### Reversed Layout
 
 ```ts file="./SwitchReversed.tsx"
+
 ```
 
 ### Without label
 
 ```ts file="./SwitchWithoutLabel.tsx"
+
 ```
 
 ### Checked with label
 
 ```ts file="./SwitchCheckedWithLabel.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./SwitchDisabled.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="./SwitchUncontrolled.tsx"
+
 ```

package/src/components/Switch/examples/SwitchBasic.tsx

@@ -11,8 +11,7 @@ export const SwitchBasic: React.FunctionComponent = () => {
   return (
     <Switch
       id="simple-switch"
-      label="Message when on"
-      labelOff="Message when off"
+      label="Togglable option for basic example"
       isChecked={isChecked}
       onChange={handleChange}
       ouiaId="BasicSwitch"

package/src/components/Switch/examples/SwitchCheckedWithLabel.tsx

@@ -10,10 +10,8 @@ export const SwitchCheckedWithLabel: React.FunctionComponent = () => {
 
   return (
     <Switch
-      label="Message when on"
-      labelOff="Message when off"
+      label="Togglable option for check icon example"
       id="checked-with-label-switch-on"
-      aria-label="Message when on"
       isChecked={isChecked}
       hasCheckIcon
       onChange={handleChange}

package/src/components/Switch/examples/SwitchDisabled.tsx

@@ -3,26 +3,27 @@ import { Switch } from '@patternfly/react-core';
 
 export const SwitchDisabled: React.FunctionComponent = () => (
   <React.Fragment>
+    <Switch id="disabled-switch-on" label="Togglable option for disabled checked example" isChecked isDisabled />
+    <br />
+    <Switch
+      id="disabled-switch-off"
+      label="Togglable option for disabled unchecked example"
+      isChecked={false}
+      isDisabled
+    />
+    <br />
     <Switch
-      id="disabled-switch-on"
-      aria-label="Message when on"
-      label="Message when on"
-      labelOff="Message when off"
+      id="disabled-no-label-switch-on"
+      aria-label="Togglable option for checked with no visible label example"
       isChecked
       isDisabled
     />
     <br />
     <Switch
-      id="disabled-switch-off"
-      aria-label="Message when on"
-      label="Message when on"
-      labelOff="Message when off"
+      id="disabled-no-label-switch-off"
+      aria-label="Togglable option for unchecked with no visible label example"
       isChecked={false}
       isDisabled
     />
-    <br />
-    <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
-    <br />
-    <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
   </React.Fragment>
 );

package/src/components/Switch/examples/SwitchReversed.tsx

@@ -11,8 +11,7 @@ export const SwitchReversed: React.FunctionComponent = () => {
   return (
     <Switch
       id="reversed-switch"
-      label="Message when on"
-      labelOff="Message when off"
+      label="Togglable option for reversed example"
       isChecked={isChecked}
       onChange={handleChange}
       isReversed

package/src/components/Switch/examples/SwitchUncontrolled.tsx

@@ -5,10 +5,14 @@ export const SwitchUncontrolled: React.FunctionComponent = () => (
   <React.Fragment>
     <Switch
       id="uncontrolled-switch-no-label"
-      aria-label="An uncontrolled switch with no label"
+      aria-label="Togglable option for uncontrolled and no visible label example"
       defaultChecked={false}
     />
     <br />
-    <Switch id="uncontrolled-switch-with-label" label="An uncontrolled switch" defaultChecked={false} />
+    <Switch
+      id="uncontrolled-switch-with-label"
+      label="Togglable option for uncontrolled example"
+      defaultChecked={false}
+    />
   </React.Fragment>
 );

package/src/components/Switch/examples/SwitchWithoutLabel.tsx

@@ -8,5 +8,12 @@ export const SwitchWithoutLabel: React.FunctionComponent = () => {
     setIsChecked(checked);
   };
 
-  return <Switch id="no-label-switch-on" aria-label="Message when on" isChecked={isChecked} onChange={handleChange} />;
+  return (
+    <Switch
+      id="no-label-switch-on"
+      aria-label="Togglable option for no visible label example"
+      isChecked={isChecked}
+      onChange={handleChange}
+    />
+  );
 };

package/src/components/Tabs/Tabs.tsx

@@ -521,15 +521,13 @@ class Tabs extends React.Component<TabsProps, TabsState> {
                       aria-expanded={isExpandedLocal}
                       id={`${randomId}-button`}
                       aria-labelledby={`${randomId}-text ${randomId}-button`}
-                    >
-                      <span className={css(styles.tabsToggleIcon)}>
-                        <AngleRightIcon arian-hidden="true" />
-                      </span>
-                      {toggleText && (
-                        <span className={css(styles.tabsToggleText)} id={`${randomId}-text`}>
-                          {toggleText}
+                      icon={
+                        <span className={css(styles.tabsToggleIcon)}>
+                          <AngleRightIcon />
                         </span>
-                      )}
+                      }
+                    >
+                      {toggleText && <span id={`${randomId}-text`}>{toggleText}</span>}
                     </Button>
                   </div>
                 </div>