@stack-spot/portal-layout 0.0.11 → 0.0.13

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,24 @@
+export const elementIds = {
+  layout: 'layout',
+  backdrop: 'backdrop',
+  modal: 'modal',
+  rightPanel: 'rightPanel',
+  bottomDialog: 'bottomDialog',
+  page: 'page',
+  content: 'content',
+  header: 'header',
+  menu: 'menu',
+  menuContent: 'menuContent',
+  menuSections: 'menuSections',
+  accessibilityAnnouncer: 'accessibilityAnnouncer',
+} 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 * 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);
 }
 
@@ -313,6 +315,8 @@ body {
   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 {
@@ -417,3 +421,11 @@ ul {
 i {
   fill: var(--light-contrastText);
 }
+
+/* Accessibility */
+#accessibilityAnnouncer {
+  position: fixed;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}

package/src/utils.ts

@@ -1,7 +1,114 @@
 import { valueOf } from '@stack-spot/portal-theme'
+import { getLayoutElements } from './elements'
 
 export function valueOfLayoutVar(varname: string): string {
   const layout = document.getElementById('layout')
   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?.()
+}
+
+/**
+ * Accessibility: makes the screen reader announce some text out loud.
+ * 
+ * @param text the message for the screen reader to read.
+ */
+export function announce(text: string) {
+  const { accessibilityAnnouncer } = getLayoutElements()
+  if (!accessibilityAnnouncer) return
+  accessibilityAnnouncer.textContent = text
+  setTimeout(() => accessibilityAnnouncer.textContent = '', 1000)
+}