@stack-spot/portal-layout 0.0.10 → 0.0.12

package/src/components/UserMenu.tsx

@@ -2,6 +2,7 @@ import { Flex, IconBox, LinkBox, Text } from '@citric/core'
 import { ChevronDown } from '@citric/icons'
 import { Avatar } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useState } from 'react'
 import { styled } from 'styled-components'
 import { SelectionList, SelectionListProps } from './SelectionList'
@@ -12,6 +13,8 @@ interface Props {
   options?: SelectionListProps['items'],
 }
 
+const USER_MENU_ID = 'userMenu'
+
 const UserMenuBox = styled.div`
   .user-menu-header {
     display: flex;
@@ -38,7 +41,7 @@ const UserMenuBox = styled.div`
       margin: 8px 0;
       & > a {
         border-radius: 6px;
-        &:hover {
+        &:hover, &:focus {
           background: ${theme.color.light['500']};
         }
       }
@@ -63,13 +66,20 @@ const UserMenuHeader = ({ userName, email }: Omit<Props, 'options'>) => (
 )
 
 export const UserMenu = ({ userName, email, options }: Props) => {
+  const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)
 
   return (
     <UserMenuBox>
-      <LinkBox as="button" onClick={() => setVisible(true)}>
+      <LinkBox
+        as="button"
+        onClick={() => setVisible(v => !v)}
+        aria-controls={USER_MENU_ID}
+        aria-expanded={visible}
+        aria-label={interpolate(t.accountMenu, [userName])}
+      >
         <Flex alignItems="center">
-          <Avatar size="xs">{userName}</Avatar>
+          <Avatar size="xs" aria-label={interpolate(t.accountMenu, [userName])}>{userName}</Avatar>
           <IconBox colorScheme="inverse" className="chevron" style={visible ? { transform: 'rotate(180deg)' } : undefined}>
             <ChevronDown />
           </IconBox>
@@ -78,6 +88,7 @@ export const UserMenu = ({ userName, email, options }: Props) => {
 
       {options?.length
         ? <SelectionList
+          id={USER_MENU_ID}
           visible={visible}
           before={<UserMenuHeader userName={userName} email={email} />}
           items={options!}
@@ -89,3 +100,12 @@ export const UserMenu = ({ userName, email, options }: Props) => {
     </UserMenuBox>
   )
 }
+
+const dictionary = {
+  en: {
+    accountMenu: 'Profile menu of $0',
+  },
+  pt: {
+    accountMenu: 'Menu do perfil $0',
+  },
+} satisfies Dictionary

package/src/components/error/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react'
-import { ErrorDescription, ErrorDescriptor } from './ErrorDescriptor'
 import { ErrorFeedback } from './ErrorFeedback'
+import { ErrorDescription, ErrorManager } from './ErrorManager'
 
 interface State extends ErrorDescription {
   hasError: boolean,
@@ -17,12 +17,13 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   static getDerivedStateFromError(error: any) {
-    return { hasError: true, ...ErrorDescriptor.describe(error) }
+    return { hasError: true, ...ErrorManager.describe(error) }
   }
 
   componentDidCatch(error: any, errorInfo: any) {
     // eslint-disable-next-line no-console
     console.error(error, errorInfo)
+    ErrorManager.runErrorHandler(error)
   }
 
   componentDidUpdate(prevProps: Readonly<Props>) {

package/src/components/error/ErrorFeedback.tsx

@@ -6,7 +6,7 @@ import { Logo } from '../../svg/Logo'
 import { NotFound } from '../../svg/NotFound'
 import { ServerError } from '../../svg/ServerError'
 import { Unauthenticated } from '../../svg/Unauthenticated'
-import { ErrorDescription } from './ErrorDescriptor'
+import { ErrorDescription } from './ErrorManager'
 
 const imageStyle: React.CSSProperties = {
   width: '200px',

package/src/components/error/{ErrorDescriptor.ts → ErrorManager.ts}

@@ -5,17 +5,27 @@ export interface ErrorDescription {
 }
 
 export type DescriptionFn = (error: any) => ErrorDescription
+export type ErrorHandler = (error: any) => void
 
-export class ErrorDescriptor {
+export class ErrorManager {
   private static descriptionFunction: DescriptionFn = error => ({
     message: error.message || `${error}`,
   })
+  private static errorHandler: ErrorHandler | undefined
 
   static setDescriptionFunction(fn: DescriptionFn) {
     this.descriptionFunction = fn
   }
 
+  static setErrorHandler(handler: ErrorHandler) {
+    this.errorHandler = handler
+  }
+
   static describe(error: any) {
     return this.descriptionFunction(error)
   }
+
+  static runErrorHandler(error: any) {
+    return this.errorHandler?.(error)
+  }
 }

package/src/components/error/SilentErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import { theme } from '@stack-spot/portal-theme'
 import { Component } from 'react'
-import { ErrorDescription, ErrorDescriptor } from './ErrorDescriptor'
+import { ErrorDescription, ErrorManager } from './ErrorManager'
 
 interface State extends ErrorDescription {
   hasError: boolean,
@@ -18,12 +18,13 @@ export class SilentErrorBoundary extends Component<Props, State> {
   }
 
   static getDerivedStateFromError(error: any) {
-    return { hasError: true, ...ErrorDescriptor.describe(error) }
+    return { hasError: true, ...ErrorManager.describe(error) }
   }
 
   componentDidCatch(error: any, errorInfo: any) {
     // eslint-disable-next-line no-console
     console.error(error, errorInfo)
+    ErrorManager.runErrorHandler(error)
   }
 
   componentDidUpdate(prevProps: Readonly<Props>) {

package/src/components/menu/MenuContent.tsx

@@ -23,6 +23,8 @@ const MenuGroup = styled.ul`
   padding: 0 0 0 16px;
   display: flex;
   flex-direction: column;
+  visibility: hidden;
+  transition: visibility 0s 0.3s;
 
   &.no-indentation {
     padding: 0;
@@ -50,12 +52,9 @@ const MenuGroup = styled.ul`
     position: relative;
     height: 0;
     overflow: hidden;
-    /* display: flex; */
-    /* align-items: center; */
     transition: height 0.3s, background-color 0.2s;
     margin: 0 ${PADDING - ITEM_PADDING}px;
     border-radius: 4px;
-    /* justify-content: space-between; */
     padding: 0 ${ITEM_PADDING}px;
 
     &:hover {
@@ -95,8 +94,12 @@ const MenuGroup = styled.ul`
     }
   }
 
-  &.open > li > a {
-    height: 40px;
+  &.open {
+    visibility: visible;
+    transition: unset;
+    & > li > a {
+      height: 40px;
+    }
   }
 
   &:not(.open) &.open > li > a {
@@ -148,16 +151,24 @@ const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wra
 const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
   const items = useMemo(() => children?.map(renderOption), [children])
+  const id = `menuGroup${label}`
 
   return (
     <>
-      <a onClick={() => setOpen(!open)} className="item-row">
+      <a
+        onClick={() => setOpen(!open)}
+        onKeyDown={e => e.key === 'Enter' && setOpen(!open)}
+        className="item-row"
+        tabIndex={0}
+        aria-controls={id}
+        aria-expanded={open}
+      >
         {icon}
         <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
         {badge}
         <IconBox><ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} /></IconBox>
       </a>
-      <MenuGroup className={open ? 'open' : undefined}>{items}</MenuGroup>
+      <MenuGroup id={id} className={open ? 'open' : undefined} aria-hidden={!open}>{items}</MenuGroup>
     </>
   )
 }

package/src/components/menu/MenuSections.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { IconBox, Text } from '@citric/core'
 import { ChevronLeft, Menu as MenuIcon } from '@citric/icons'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useMemo, useState } from 'react'
 import { MenuContent } from './MenuContent'
 import { MenuProps, MenuSection } from './types'
@@ -84,6 +85,8 @@ const Section = ({
         onClick={click}
         onMouseEnter={showOverlayAndFixArrowPosition}
         onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
+        title={label}
+        aria-label={label}
       >
         {icon}
         <Text appearance="microtext1" className="section-label">{label}</Text>
@@ -98,6 +101,7 @@ const OverlayRenderer = ({ content }: Pick<MenuSection, 'content'>) => {
 }
 
 export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
+  const t = useTranslate(dictionary)
   // this is a mock state only used to force an update on the component.
   const [_, setUpdate] = useState(0)
   const toggleMenu = useCallback(() => {
@@ -134,7 +138,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   return (
     <>
       <ul>{sectionItems}</ul>
-      {!!props.content && <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
+      {!!props.content && <button className="toggle" onClick={toggleMenu} title={t.toggle}>
         <IconBox>
           <MenuIcon className="expand" />
           <ChevronLeft className="collapse" />
@@ -147,3 +151,12 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
     </>
   )
 }
+
+const dictionary = {
+  en: {
+    toggle: 'Show or hide the menu',
+  },
+  pt: {
+    toggle: 'Visualizar ou esconder o menu',
+  },
+} satisfies Dictionary

package/src/components/menu/PageSelector.tsx

@@ -2,7 +2,8 @@ import { IconBox, Text } from '@citric/core'
 import { ArrowRight, Select } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
-import { useMemo, useState } from 'react'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useMemo, useRef, useState } from 'react'
 import { styled } from 'styled-components'
 import { ListAction, SelectionList } from '../SelectionList'
 import { MENU_CONTENT_PADDING as PADDING } from './constants'
@@ -76,7 +77,9 @@ const SelectorBox = styled.div`
 `
 
 export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
+  const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)
+  const id = useRef(`pageSelector${title || Math.random()}`)
   const { optionsWithIcon, selected } = useMemo(
     () => {
       let selected = options[0]
@@ -100,13 +103,22 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
         : (
           <>
             {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
-            <a onClick={() => setVisible(true)} aria-label={value}>
+            <a
+              onClick={() => setVisible(true)}
+              onKeyDown={e => e.key === 'Enter' && setVisible(true)}
+              title={value}
+              tabIndex={0}
+              aria-label={interpolate(t.accessibility, [value])}
+              aria-expanded={visible}
+              aria-controls={id.current}
+            >
               {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
               <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
               <IconBox size="xs"><Select /></IconBox>
             </a>
 
             <SelectionList
+              id={id.current}
               visible={visible}
               items={optionsWithIcon}
               onHide={() => setVisible(false)}
@@ -119,3 +131,13 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
     </SelectorBox>
   )
 }
+
+const dictionary = {
+  en: {
+    accessibility: 'Current value: $0. Press Enter to change.',
+  },
+  pt: {
+    accessibility: 'Valor atual: $0. Aperte Enter para mudar.',
+  },
+} satisfies Dictionary
+

package/src/elements.ts

@@ -0,0 +1,19 @@
+export const elementIds = {
+  backdrop: 'backdrop',
+  modal: 'modal',
+  rightPanel: 'rightPanel',
+  bottomDialog: 'bottomDialog',
+  page: 'page',
+  header: 'header',
+  menu: 'menu',
+} as const
+
+export type LayoutElement = keyof typeof elementIds
+export type LayoutElements = Record<LayoutElement, HTMLElement | null>
+
+export function getLayoutElements() {
+  return (Object.keys(elementIds) as LayoutElement[]).reduce<LayoutElements>(
+    (result, id) => ({ ...result, [id]: document.getElementById(id) }),
+    {} as LayoutElements,
+  )
+}

package/src/index.ts

@@ -8,7 +8,8 @@ export { MenuContent } from './components/menu/MenuContent'
 export { MenuSections } from './components/menu/MenuSections'
 export * from './components/menu/types'
 export * from './components/types'
+export * from './elements'
 export * from './errors'
 export { Logo as StackspotLogo } from './svg/Logo'
-export { valueOfLayoutVar } from './utils'
+export { focusFirstChild, focusNextIgnoringChildren, valueOfLayoutVar } from './utils'
 

package/src/layout.css

@@ -188,7 +188,9 @@ body {
 }
 
 #menuSections .toggle:hover,
-#menuSections > ul li a:hover {
+#menuSections > ul li a:hover,
+#menuSections .toggle:focus,
+#menuSections > ul li a:focus {
   background: var(--light-500);
 }
 
@@ -308,11 +310,13 @@ body {
   position: fixed;
   display: flex;
   flex-direction: column;
-  top: var(--header-height);
+  top: 0;
   bottom: 0;
   transition: right var(--right-panel-animation-duration);
   background-color: var(--light-400);
   right: -800px;
+  border-top-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
 }
 
 #rightPanel.small {

package/src/toaster.tsx

@@ -1,5 +1,4 @@
-import { IconBox } from '@citric/core'
-import { OneOfColorSchemesWithVariants } from '@citric/core/utils/theme.types'
+import { IconBox, OneOfColorSchemesWithVariants } from '@citric/core'
 import { CheckCircleFill, ExclamationTriangleFill, InfoCircleFill, TimesCircleFill } from '@citric/icons'
 import { toast } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'

package/src/utils.ts

@@ -5,3 +5,97 @@ export function valueOfLayoutVar(varname: string): string {
   if (!layout) return ''
   return valueOf(varname, layout)
 }
+
+/**
+ * Important for accessibility.
+ * 
+ * Makes it so we focus the next focusable element in the DOM hierarchy, disregarding the element passed as parameter and its children.
+ * 
+ * If there's no next focusable element, the first focusable of the page will be focused. If the page doesn't contain any focusable
+ * element, nothing happens.
+ * 
+ * @param current the reference element to focus the next. If not provided, will be the currently active element.
+ */
+export function focusNextIgnoringChildren(current?: HTMLElement | null) {
+  current = current ?? document.activeElement as HTMLElement
+  while (current && !current.nextElementSibling) {
+    current = current?.parentElement
+  }
+  current = current?.nextElementSibling as HTMLElement
+  while (current && current.tabIndex < 0) {
+    current = (current.children.length ? current.firstChild : current.nextElementSibling) as HTMLElement
+  }
+  if (current) current?.focus?.()
+  else focusFirstChild(document)
+}
+
+type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
+type TagPriorityElement = TagPriority | TagPriority[]
+
+interface FocusOptions {
+  /**
+   * Instead of focusing the first element overall, focus the first according to this list of priorities.
+   */
+  priority?: TagPriorityElement[],
+  /**
+   * Ignores any element that matches this query selector.
+   */
+  ignore?: string,
+}
+
+const selectors: Record<TagPriority, string> = {
+  a: 'a[href]:not(:disabled)',
+  button: 'button:not(:disabled)',
+  input: 'input:not(:disabled):not([type="hidden"])',
+  select: 'textarea:not(:disabled)',
+  textarea: 'select:not(:disabled)',
+  other: '[tabindex]:not([tabindex="-1"])',
+}
+
+/**
+ * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
+ * 
+ * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
+ * list.
+ * 
+ * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
+ * next element is focused instead.
+ * 
+ * @example
+ * Suppose the children of element are: h1, button, p, input, select.
+ * 1. We don't pass a priority list. The focused element will be the button.
+ * 2. Our priority list is ['button']. The focused element will be the button.
+ * 3. Our priority list is ['input', 'button']. The focused element will be the input.
+ * 4. Our priority list is ['select', 'input']. The focused element will be the select.
+ * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
+ * 
+ * @param element the element to search a child to focus.
+ * @param options optional.
+ */
+export function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority = [], ignore }: FocusOptions = {}) {
+  let focusable: NodeListOf<HTMLElement> | null | undefined
+  let missing: TagPriority[] = ['a', 'button', 'input', 'other', 'select', 'textarea']
+  for (const p of priority) {
+    const tags = Array.isArray(p) ? p : [p]
+    const querySelectors = tags.map(t => {
+      missing = missing.filter(tag => tag != t)
+      return selectors[t]
+    })
+    focusable = element?.querySelectorAll(querySelectors.join(', '))
+    if (focusable) break
+  }
+  if (!focusable) {
+    element?.querySelectorAll(missing.map(t => selectors[t]).join(', '))
+  }
+  let elementToFocus: HTMLElement | undefined
+  for (const f of focusable ?? []) {
+    if (!ignore || !f.matches(ignore)) {
+      const styles = window.getComputedStyle(f)
+      if (styles.display != 'none' && styles.visibility != 'hidden') {
+        elementToFocus = f
+        break
+      }
+    }
+  }
+  elementToFocus?.focus?.()
+}