Fixed a11y error in demo

Author: Eric Olkowski

packages/react-core/src/demos/Page.md

@@ -14,7 +14,6 @@ import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
-
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
   1. Add an onNavToggle callback to PageHeader
@@ -44,6 +43,8 @@ This demonstrates a variety of navigation patterns in the context of a full page
 
 ### Context selector/perspective switcher in sidebar
 
+When adding a context selector/perspective switcher in a `PageSidebar`, you must manually control the open state of the `PageSidebar` as well as ensure any interactive menu toggles or buttons cannot receive focus. This demo adds a `tabIndex` of `-1` when the sidebar is not expanded to achieve this.
+
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
-```
+```

packages/react-core/src/demos/examples/Page/PageContextSelector.tsx

@@ -59,6 +59,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
   const [isContextSelectorOpen, setIsContextSelectorOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -225,7 +230,12 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+          >
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
@@ -267,7 +277,13 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       onSelect={onContextSelectorSelect}
       onOpenChange={(isOpen: boolean) => setIsContextSelectorOpen(isOpen)}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle ref={toggleRef} onClick={onContextSelectorToggle} isExpanded={isContextSelectorOpen} isFullWidth>
+        <MenuToggle
+          tabIndex={isSidebarOpen ? undefined : -1}
+          ref={toggleRef}
+          onClick={onContextSelectorToggle}
+          isExpanded={isContextSelectorOpen}
+          isFullWidth
+        >
           Developer
         </MenuToggle>
       )}
@@ -277,7 +293,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   );
 
   const sidebar = (
-    <PageSidebar>
+    <PageSidebar isSidebarOpen={isSidebarOpen}>
       <PageSidebarBody isContextSelector>{pageContextSelector}</PageSidebarBody>
       <PageSidebarBody>{pageNav}</PageSidebarBody>
     </PageSidebar>
@@ -304,7 +320,6 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     <Page
       masthead={masthead}
       sidebar={sidebar}
-      isManagedSidebar
       skipToContent={pageSkipToContent}
       breadcrumb={dashboardBreadcrumb}
       mainContainerId={mainContainerId}