@microbit/ui 0.2.0 → 0.2.2

package/lang/ui.ar.json

@@ -36,7 +36,7 @@
     "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
   },
   "ui.select-row-action": {
-    "defaultMessage": "تحديد",
+    "defaultMessage": "حدّد",
     "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
   },
   "ui.toast-region": {

package/lang/ui.ga-ie.json

@@ -1,6 +1,6 @@
 {
   "ui.breadcrumb": {
-    "defaultMessage": "Mionrian",
+    "defaultMessage": "Grabhróg aráin",
     "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
   },
   "ui.close-action": {
@@ -8,11 +8,11 @@
     "description": "Close button text or label"
   },
   "ui.combobox-listbox": {
-    "defaultMessage": "Suggestions",
+    "defaultMessage": "Moltaí",
     "description": "Accessible label for a ComboBox's dropdown list of suggestions"
   },
   "ui.combobox-trigger": {
-    "defaultMessage": "Show suggestions",
+    "defaultMessage": "Taispeáin moltaí",
     "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
   },
   "ui.loading": {
@@ -24,15 +24,15 @@
     "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
   },
   "ui.numberfield-decrease": {
-    "defaultMessage": "Decrease {fieldLabel}",
+    "defaultMessage": "Laghdaigh {fieldLabel}",
     "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
   },
   "ui.numberfield-increase": {
-    "defaultMessage": "Increase {fieldLabel}",
+    "defaultMessage": "Méadaigh {fieldLabel}",
     "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
   },
   "ui.select-placeholder": {
-    "defaultMessage": "Select an item",
+    "defaultMessage": "Roghnaigh mír",
     "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
   },
   "ui.select-row-action": {
@@ -40,7 +40,7 @@
     "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
   },
   "ui.toast-region": {
-    "defaultMessage": "{count, plural, one {# notification} other {# notifications}}.",
+    "defaultMessage": "{count, plural, one {# fógra} two {# fhógra} few {# fógraí} many {# notifications} other {# fógraí}}.",
     "description": "Accessible label for the notifications area; count is the number of notifications showing"
   },
   "ui.toast-status-error": {
@@ -48,11 +48,11 @@
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "Eolas",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "D'éirigh leis",
+    "defaultMessage": "Rath",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {

package/lang/ui.lol.json

@@ -1,22 +1,22 @@
 {
   "ui.breadcrumb": {
-    "defaultMessage": "Breadcrumb",
+    "defaultMessage": "crwdns370036:0crwdne370036:0",
     "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
   },
   "ui.close-action": {
-    "defaultMessage": "crwdns362700:0crwdne362700:0",
+    "defaultMessage": "crwdns370038:0crwdne370038:0",
     "description": "Close button text or label"
   },
   "ui.combobox-listbox": {
-    "defaultMessage": "Suggestions",
+    "defaultMessage": "crwdns370040:0crwdne370040:0",
     "description": "Accessible label for a ComboBox's dropdown list of suggestions"
   },
   "ui.combobox-trigger": {
-    "defaultMessage": "Show suggestions",
+    "defaultMessage": "crwdns370042:0crwdne370042:0",
     "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
   },
   "ui.loading": {
-    "defaultMessage": "Loading",
+    "defaultMessage": "crwdns370044:0crwdne370044:0",
     "description": "Announced by screen readers for a button showing a loading spinner"
   },
   "ui.new-tab-notice": {
@@ -24,39 +24,39 @@
     "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
   },
   "ui.numberfield-decrease": {
-    "defaultMessage": "Decrease {fieldLabel}",
+    "defaultMessage": "crwdns370046:0{fieldLabel}crwdne370046:0",
     "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
   },
   "ui.numberfield-increase": {
-    "defaultMessage": "Increase {fieldLabel}",
+    "defaultMessage": "crwdns370048:0{fieldLabel}crwdne370048:0",
     "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
   },
   "ui.select-placeholder": {
-    "defaultMessage": "Select an item",
+    "defaultMessage": "crwdns370050:0crwdne370050:0",
     "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
   },
   "ui.select-row-action": {
-    "defaultMessage": "Select",
+    "defaultMessage": "crwdns370052:0crwdne370052:0",
     "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
   },
   "ui.toast-region": {
-    "defaultMessage": "{count, plural, one {# notification} other {# notifications}}.",
+    "defaultMessage": "crwdns370054:0count={count}crwdne370054:0",
     "description": "Accessible label for the notifications area; count is the number of notifications showing"
   },
   "ui.toast-status-error": {
-    "defaultMessage": "Error",
+    "defaultMessage": "crwdns370056:0crwdne370056:0",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "crwdns370058:0crwdne370058:0",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "crwdns370060:0crwdne370060:0",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "crwdns370062:0crwdne370062:0",
     "description": "Announced by screen readers before a warning notification"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/src/Modal.tsx

@@ -9,6 +9,8 @@ import {
   ReactNode,
   RefObject,
   useContext,
+  useEffect,
+  useRef,
 } from "react";
 import {
   Button as RACButton,
@@ -28,6 +30,92 @@ import { dataAttrs } from "./data-attrs";
 import { uiMessage } from "./messages";
 import { UnmountCallback } from "./UnmountCallback";
 
+// react-aria's tabbable selector, which it doesn't export. It special-cases
+// radio groups (only the checked radio is tabbable) where this doesn't — an
+// acceptable divergence for the shim below, whose worst case on a miss is
+// standing aside and leaving the keystroke to FocusScope, as without it.
+const TABBABLE_SELECTOR = [
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "a[href]",
+  "area[href]",
+  "summary",
+  "iframe",
+  "object",
+  "embed",
+  "audio[controls]",
+  "video[controls]",
+  "[contenteditable]:not([contenteditable^='false'])",
+  "[tabindex]:not([disabled])",
+]
+  .map((s) => `${s}:not([hidden]):not([tabindex='-1'])`)
+  .join(",");
+
+const isTabbable = (element: Element) =>
+  !element.closest("[inert]") &&
+  (element.checkVisibility?.({ visibilityProperty: true }) ?? true);
+
+/**
+ * Tab handling for iframes in the dialog, which react-aria's focus
+ * containment gets wrong in Firefox: FocusScope re-implements Tab as a
+ * synchronous programmatic focus of the next tabbable element, and Firefox
+ * silently drops a synchronous focus() of a cross-origin iframe made during
+ * key event dispatch — the keystroke appears to do nothing. The same call
+ * deferred to the next frame works, so this capture-phase listener (which
+ * runs before FocusScope's bubble-phase one) claims the keystroke whenever
+ * the element Tab would move to is an iframe, and performs the move
+ * deferred. Every other Tab is left to FocusScope. Remove if react-aria
+ * defers iframe focus itself.
+ */
+const IframeTabShim = ({
+  containerRef,
+}: {
+  containerRef: RefObject<HTMLElement | null>;
+}) => {
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (
+        e.key !== "Tab" ||
+        e.altKey ||
+        e.ctrlKey ||
+        e.metaKey ||
+        e.isComposing
+      ) {
+        return;
+      }
+      const container = containerRef.current;
+      const active = container?.ownerDocument.activeElement;
+      if (!container || !active || !container.contains(active)) {
+        return;
+      }
+      const tabbables = Array.from(
+        container.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR),
+      ).filter(isTabbable);
+      const index = tabbables.indexOf(active as HTMLElement);
+      if (index === -1) {
+        return;
+      }
+      const target =
+        tabbables[
+          (index + (e.shiftKey ? -1 : 1) + tabbables.length) % tabbables.length
+        ];
+      if (!(target instanceof HTMLIFrameElement)) {
+        return;
+      }
+      e.preventDefault();
+      // Keep FocusScope's own document-level handler from also acting.
+      e.stopImmediatePropagation();
+      requestAnimationFrame(() => target.focus());
+    };
+    const doc = containerRef.current?.ownerDocument ?? document;
+    doc.addEventListener("keydown", onKeyDown, true);
+    return () => doc.removeEventListener("keydown", onKeyDown, true);
+  }, [containerRef]);
+  return null;
+};
+
 type DialogSlots = ReturnType<typeof dialog>;
 
 const SlotContext = createContext<{ slots: DialogSlots; onClose: () => void }>({
@@ -163,6 +251,7 @@ export const Modal = ({
   // prop over the context, and so do we for the close function.
   const triggerState = useContext(OverlayTriggerStateContext);
   const close = onClose ?? (() => triggerState?.close());
+  const contentRef = useRef<HTMLDivElement>(null);
   const dataProps = dataAttrs(rest);
   const slots = dialog({ size, centered: isCentered });
   const motionlessClass = motionless
@@ -205,6 +294,7 @@ export const Modal = ({
       <UnmountCallback callback={handleUnmount} />
       <RACModal
         {...dataProps}
+        ref={contentRef}
         style={contentStyle}
         className={cx(
           slots.content,
@@ -213,6 +303,7 @@ export const Modal = ({
         )}
       >
         <Dialog role={role} aria-label={ariaLabel} className={slots.inner}>
+          <IframeTabShim containerRef={contentRef} />
           <SlotContext.Provider value={{ slots, onClose: close }}>
             {children}
           </SlotContext.Provider>