From e6cfde4f1888ba4547ecff0a0d730065adc5fac0 Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Sat, 2 Jul 2022 11:27:39 -0500 Subject: [PATCH] cleanup --- sites/lab/components/pattern-picker.js | 13 ++++++----- sites/lab/components/version-picker.js | 3 ++- sites/shared/components/picker.js | 22 ++++++++++++++----- sites/shared/components/theme-picker.js | 4 ++-- sites/shared/components/wrappers/workbench.js | 2 +- 5 files changed, 29 insertions(+), 15 deletions(-) diff --git a/sites/lab/components/pattern-picker.js b/sites/lab/components/pattern-picker.js index d02b772294d..9bb97995852 100644 --- a/sites/lab/components/pattern-picker.js +++ b/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 ( {Object.keys(app.navigation).map(section => { - const sectionProps = { - selectedItem: t(app.navigation[section].__title), - isStatic: true - } const sectionTitle = t(app.navigation[section].__title); + {return (
  • + `}> {sectionTitle}
    • - {Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__')).map(pattern => { + + {sectionPatterns(section).map(pattern => { const patternProps = { href: app.navigation[section][pattern].__slug } diff --git a/sites/lab/components/version-picker.js b/sites/lab/components/version-picker.js index 3e89b4d6bb3..2bc7bca2551 100644 --- a/sites/lab/components/version-picker.js +++ b/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 ( diff --git a/sites/shared/components/picker.js b/sites/shared/components/picker.js index e337c19941a..145058f29cf 100644 --- a/sites/shared/components/picker.js +++ b/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 ( + aria-label={ariaLabel}> {!iconOnly && {title}} - - + + {children} ) } +/** 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 (
  • @@ -30,6 +39,8 @@ export const PickerLink = (props) => {
    • ) } +/** + * Necessary to have keyboard enter 'click' events passed to the link */ const ForwardLink = forwardRef(({href, locale, active, children, ...rest}, ref) => ( @@ -40,6 +51,7 @@ const ForwardLink = forwardRef(({href, locale, active, children, ...rest}, ref) )) +/** a menu item that is a button */ export const PickerButton = ({onClick, children}) => { return ( {({ active }) => ( diff --git a/sites/shared/components/theme-picker.js b/sites/shared/components/theme-picker.js index 9bf1e2fade5..2d3373ed62d 100644 --- a/sites/shared/components/theme-picker.js +++ b/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 ( {Object.keys(themes).map(theme => ( diff --git a/sites/shared/components/wrappers/workbench.js b/sites/shared/components/wrappers/workbench.js index a73c2d09a23..0bb2e55d5d5 100644 --- a/sites/shared/components/wrappers/workbench.js +++ b/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])