fix: enable HC switcher, add beta label (#4766)

* fix: enable HC switcher, add beta label

* chore: add labels, popover to theme switcher

* chore: theme selector updates

* chore: remove unused import

* Update packages/documentation-framework/components/themeSelector/themeSelector.js

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>

* Update packages/documentation-framework/components/themeSelector/themeSelector.js

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>

---------

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>

Author: mcoker

packages/documentation-framework/components/themeSelector/themeSelector.js

@@ -10,8 +10,12 @@ import {
   ToggleGroup,
   ToggleGroupItem,
   Icon,
-  Divider
+  Divider,
+  Label,
+  Popover,
+  Button
 } from '@patternfly/react-core';
+import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
 
 const SunIcon = (
@@ -45,6 +49,47 @@ const DesktopIcon = (
   </svg>
 );
 
+const ColorSchemeGroupLabel = () => {
+  return (
+    <div className="pf-v6-c-menu__group-title" id="theme-selector-color-scheme-title">
+      Color scheme
+    </div>
+  );
+};
+
+const HighContrastGroupLabel = () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <div className="pf-v6-c-menu__group-title">
+      High contrast{' '}
+      <Popover
+        onClick={(e) => e.stopPropagation()}
+        headerContent={"Under development"}
+        headerComponent="h1"
+        bodyContent={
+          "We are still working to add high contrast support across all PatternFly components and extensions. This beta allows you to preview our progress."
+        }
+        footerContent={
+          <Button icon={<ExternalLinkAltIcon />} component="a" isInline variant="link" href="/design-foundations/theming" target="_blank">
+            Learn more
+          </Button>
+        }
+        aria-label="More info about high contrast"
+        appendTo={() => document.body}
+      >
+        <Button
+          variant="plain"
+          hasNoPadding
+          icon={<HelpIcon />}
+          aria-label="High contrast help"
+        />
+      </Popover>{' '}&nbsp;
+      <Label color="blue" isCompact>Beta</Label>
+    </div>
+  )
+};
+
 export const ThemeSelector = ({ id }) => {
   const { mode: themeMode, setMode: setThemeMode, modes: colorModes } = useTheme(THEME_TYPES.COLOR);
   const {
@@ -109,8 +154,8 @@ export const ThemeSelector = ({ id }) => {
         preventOverflow: true
       }}
     >
-      <SelectGroup>
-        <SelectList aria-label="Light/Dark theme switcher">
+      <SelectGroup label={ColorSchemeGroupLabel}>
+        <SelectList aria-labelledby="theme-selector-color-scheme-title">
           <SelectOption value={colorModes.SYSTEM} icon={DesktopIcon} description="Follow system preference">
             System
           </SelectOption>
@@ -124,7 +169,7 @@ export const ThemeSelector = ({ id }) => {
       </SelectGroup>
       {process.env.hasHighContrastSwitcher && (<>
       <Divider />
-      <SelectGroup label="High Contrast">
+      <SelectGroup label={HighContrastGroupLabel}>
         <MenuSearch>
           <MenuSearchInput>
             <ToggleGroup aria-label="High contrast theme switcher">

packages/documentation-site/patternfly-docs/patternfly-docs.config.js

@@ -31,7 +31,7 @@ if (process.env.EXTENSIONS_ONLY === 'true') {
     hasDesignGuidelines: true,
     hasThemeSwitcher: true,
     hasFeedbackButton: true,
-    hasHighContrastSwitcher: false,
+    hasHighContrastSwitcher: true,
     componentsData,
     sideNavItems: [
       { section: 'get-started' },