cleanup

sites/lab/components/pattern-picker.js

@@ -3,9 +3,12 @@ import DesignIcon from 'shared/components/icons/design'
 import { useTranslation } from 'next-i18next'
 import {Picker, PickerLink} from 'shared/components/picker'
 
+
 const PatternPicker = ({ app }) => {
   const { t } = useTranslation(['common'])
 
+  const sectionPatterns = (section) => Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__'))
+
   const pickerProps = {
     Icon: DesignIcon,
     title: t('designs'),
@@ -14,19 +17,17 @@ const PatternPicker = ({ app }) => {
 
   return (<Picker {...pickerProps}>
     {Object.keys(app.navigation).map(section => {
-      const sectionProps = {
-        selectedItem: t(app.navigation[section].__title),
-        isStatic: true
-      }
       const sectionTitle = t(app.navigation[section].__title);
+
       {return (<React.Fragment key={section}>
         <li className={`
           capitalize font-bold text-base-content text-center
           opacity-50 border-b2 my-2 border-base-content
-          `} {...sectionProps}>
+          `}>
           {sectionTitle}
         </li>
-        {Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__')).map(pattern => {
+
+        {sectionPatterns(section).map(pattern => {
           const patternProps = {
             href: app.navigation[section][pattern].__slug
           }

sites/lab/components/version-picker.js

@@ -25,7 +25,8 @@ const PatternPicker = ({ app }) => {
 
   const pickerProps = {
     title: formatVersionTitle(version),
-    Icon: VersionsIcon
+    Icon: VersionsIcon,
+    ariaLabel: t('versionPicker')
   }
 
   return (<Picker {...pickerProps}>

sites/shared/components/picker.js

@@ -1,8 +1,9 @@
-import {useRef, forwardRef} from 'react'
+import {forwardRef} from 'react'
 import { Menu } from '@headlessui/react'
 import Link from 'next/link'
 
-export const Picker = ({Icon, className, title, iconOnly=false, children, isStatic=false}) => {
+/** an accessible dropdown menu for use by picker components */
+export const Picker = ({Icon, className, title, ariaLabel, iconOnly=false, children}) => {
 
 	return (<Menu as="div" className={`dropdown dropdown-end w-auto`}>
 		<Menu.Button className={iconOnly
@@ -10,18 +11,26 @@ export const Picker = ({Icon, className, title, iconOnly=false, children, isStat
 			: `m-0 btn btn-neutral flex flex-row gap-2
 			hover:bg-neutral-content hover:border-neutral-content hover:text-neutral
 			`}
-			aria-label="Choose Theme">
+			aria-label={ariaLabel}>
 			<Icon />
 			{!iconOnly && <span>{title}</span>}
-			</Menu.Button>
-		<Menu.Items as="ul" className={`p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 ${className}`} static={isStatic}>
+		</Menu.Button>
+		<Menu.Items as="ul" className={`p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 ${className}`}>
 		 {children}
 		</Menu.Items>
 	</Menu>)
 }
 
+/** get the menu item's class based on whether it's active */
 const itemClass = (active) => "btn btn-ghost " + (active ? 'bg-base-200' : '')
 
+/**
+ * a menu item that has a link in it
+ *
+ * Expected Props:
+ ** href: the href for the link
+ ** locale?: the locale the link links to
+ * */
 export const PickerLink = (props) => {
 	return (<li role="menuitem">
 		<Menu.Item>
@@ -30,6 +39,8 @@ export const PickerLink = (props) => {
 	</li>)
 }
 
+/**
+ * Necessary to have keyboard enter 'click' events passed to the link */
 const ForwardLink = forwardRef(({href, locale, active, children, ...rest}, ref) => (
 	<Link href={href} locale={locale}>
   	<a className={itemClass(active)} {...rest} role={undefined} ref={ref}>
@@ -40,6 +51,7 @@ const ForwardLink = forwardRef(({href, locale, active, children, ...rest}, ref)
 	</Link>
 ))
 
+/** a menu item that is a button */
 export const PickerButton = ({onClick, children}) => {
 	return (<Menu.Item as="li" onClick={onClick}>
     {({ active }) => (

sites/shared/components/theme-picker.js

@@ -2,7 +2,6 @@ import themes from 'shared/themes/index.js'
 import ThemeIcon from 'shared/components/icons/theme.js'
 import { useTranslation } from 'next-i18next'
 import {Picker, PickerButton} from './picker';
-import { Menu } from '@headlessui/react'
 
 const ThemePicker = ({ app, className, iconOnly=false }) => {
   const { t } = useTranslation(['themes'])
@@ -16,7 +15,8 @@ const ThemePicker = ({ app, className, iconOnly=false }) => {
     className,
     iconOnly,
     Icon: ThemeIcon,
-    title: t(`${app.theme}Theme`)
+    title: t(`${app.theme}Theme`),
+    ariaLabel: t('themesPicker')
   }
   return (<Picker {...pickerProps}>
     {Object.keys(themes).map(theme => (

sites/shared/components/wrappers/workbench.js

@@ -58,7 +58,7 @@ const WorkbenchWrapper = ({ app, design, preload=false, from=false, layout=false
   // force view to measurements
   useEffect(() => {
     if (!gistReady) return
-    if (gistReady && gist._state?.view !== 'measurements'
+    if (gist._state?.view !== 'measurements'
       && !hasRequiredMeasurements
     ) updateGist(['_state', 'view'], 'measurements')
   }, [gistReady, gist._state?.view, hasRequiredMeasurements])