@stack-spot/portal-layout 0.0.54 → 0.0.56

package/src/utils.ts

@@ -1,114 +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)
-}
+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)
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-  "extends": "../../tsconfig",
-  "compilerOptions": {
-    "module": "ESNext",
-    "outDir": "dist"
-  },
-  "include": ["src"]
-}
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}