@stack-spot/portal-layout 0.0.11 → 0.0.12

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);
 }
 
@@ -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 {

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?.()
+}