@hadoku/task-ui-components 4.23.13 → 4.23.15

package/src/components/LinkedAccounts.tsx

@@ -51,6 +51,60 @@ const S = {
   list: { margin: 0, paddingLeft: 18, fontSize: '0.75rem', lineHeight: 1.45 }
 } satisfies Record<string, React.CSSProperties>
 
+/**
+ * Link `provider` in a popup, and wear its picture when it came back with one:
+ * linking from either place means "use this". Call it inside the click, with
+ * nothing awaited first — the popup opens before its first await, which is
+ * what popup blockers allow.
+ */
+export function linkAndWear(provider: LinkProvider): Promise<AvatarSettings> {
+  return avatarClient
+    .linkInPopup(provider)
+    .then(next => (next.linked[provider]?.avatarUrl ? avatarClient.choose(provider) : next))
+}
+
+/**
+ * What linking reads and keeps, then Continue. Shared by Account → Linked
+ * accounts and the avatar dialog's Picture tab, so the consent is one text.
+ */
+export function LinkConsent({
+  provider,
+  busy,
+  onLink,
+  onCancel
+}: {
+  provider: LinkProvider
+  busy: boolean
+  /** Must open the popup synchronously: call {@link linkAndWear} directly. */
+  onLink: () => void
+  onCancel?: () => void
+}) {
+  return (
+    <div style={S.stack}>
+      <ul style={S.list}>
+        {CONSENT[provider].points.map(t => (
+          <li key={t}>{t}</li>
+        ))}
+      </ul>
+      <span style={S.line}>
+        <button
+          type="button"
+          className="settings-popout__btn settings-popout__btn--primary"
+          disabled={busy}
+          onClick={onLink}
+        >
+          {CONSENT[provider].go}
+        </button>
+        {onCancel && (
+          <button type="button" className="settings-popout__btn" onClick={onCancel}>
+            Cancel
+          </button>
+        )}
+      </span>
+    </div>
+  )
+}
+
 export function LinkedAccounts() {
   const [settings, setSettings] = useState<AvatarSettings | null>(null)
   const [busy, setBusy] = useState(false)
@@ -92,17 +146,6 @@ export function LinkedAccounts() {
     )
   }
 
-  // Must stay synchronous up to linkInPopup: the popup opens before its first
-  // await, inside this click, which is what popup blockers allow.
-  const link = (provider: LinkProvider) => {
-    setConsent(null)
-    void run(async () => {
-      const next = await avatarClient.linkInPopup(provider)
-      // Linking is choosing, when the account came back with a picture.
-      return next.linked[provider]?.avatarUrl ? avatarClient.choose(provider) : next
-    })
-  }
-
   return (
     <div style={S.stack}>
       {(['discord', 'steam'] as const).map(p => {
@@ -144,26 +187,15 @@ export function LinkedAccounts() {
       })}
 
       {consent && (
-        <div style={S.stack}>
-          <ul style={S.list}>
-            {CONSENT[consent].points.map(t => (
-              <li key={t}>{t}</li>
-            ))}
-          </ul>
-          <span style={S.line}>
-            <button
-              type="button"
-              className="settings-popout__btn settings-popout__btn--primary"
-              disabled={busy}
-              onClick={() => link(consent)}
-            >
-              {CONSENT[consent].go}
-            </button>
-            <button type="button" className="settings-popout__btn" onClick={() => setConsent(null)}>
-              Cancel
-            </button>
-          </span>
-        </div>
+        <LinkConsent
+          provider={consent}
+          busy={busy}
+          onLink={() => {
+            setConsent(null)
+            void run(() => linkAndWear(consent))
+          }}
+          onCancel={() => setConsent(null)}
+        />
       )}
 
       {error && (

package/src/components/ThemePicker.tsx

@@ -4,7 +4,7 @@
  * Designed to work with any theme system via configuration
  */
 
-import React, { useRef, useLayoutEffect, useState } from 'react'
+import React, { useEffect, useRef, useLayoutEffect, useState } from 'react'
 import { Tooltip } from './Tooltip'
 import type { ThemePickerProps } from '../types'
 import { SettingsIcon, getFallbackIcon } from './ThemeIcons'
@@ -42,6 +42,11 @@ export function ThemePicker({
   dropdownPlacement = 'auto'
 }: ThemePickerProps) {
   const dropdownRef = useRef<HTMLDivElement>(null)
+  const toggleRef = useRef<HTMLButtonElement>(null)
+  // The latest onToggle, so the open/close effect below runs on isOpen alone:
+  // callers pass a new arrow every render, and re-running it would steal focus.
+  const onToggleRef = useRef(onToggle)
+  onToggleRef.current = onToggle
   const [resolvedPlacement, setResolvedPlacement] = useState<'left' | 'right'>('right')
 
   // Edge detection: when 'auto', measure the dropdown after render and flip if it overflows
@@ -69,6 +74,26 @@ export function ThemePicker({
     return () => cancelAnimationFrame(frameId)
   }, [isOpen, dropdownPlacement])
 
+  // Keyboard and TV remote: opening moves focus into the dropdown (onto the
+  // theme in use), and Escape or a TV's Back key closes it and hands focus back
+  // to the toggle. Without this a remote could open the picker and never leave.
+  useEffect(() => {
+    if (!isOpen) return
+    const dropdown = dropdownRef.current
+    const target =
+      dropdown?.querySelector<HTMLButtonElement>('.theme-pill__btn.active') ??
+      dropdown?.querySelector<HTMLButtonElement>('button')
+    target?.focus()
+    const onKey = (e: KeyboardEvent) => {
+      if (!isCloseKey(e)) return
+      e.preventDefault()
+      onToggleRef.current()
+      toggleRef.current?.focus()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isOpen])
+
   // Get icon for current theme (use provided function or fallback to MoonIcon)
   const currentIcon = getThemeIcon ? getThemeIcon(currentTheme) : <MoonIcon />
 
@@ -78,9 +103,12 @@ export function ThemePicker({
     <div className={`theme-picker ${openLeftClass} ${className}`.trim()}>
       <Tooltip content="Choose theme">
         <button
+          ref={toggleRef}
           className="app-header__icon-btn theme-toggle-btn"
           onClick={onToggle}
           aria-label="Choose theme"
+          aria-expanded={isOpen}
+          aria-haspopup="true"
         >
           {currentIcon}
         </button>
@@ -147,3 +175,14 @@ export function ThemePicker({
     </div>
   )
 }
+
+/** Escape, or a TV remote's Back: GoBack/BrowserBack, webOS 461, Tizen 10009. */
+function isCloseKey(e: KeyboardEvent): boolean {
+  return (
+    e.key === 'Escape' ||
+    e.key === 'GoBack' ||
+    e.key === 'BrowserBack' ||
+    e.keyCode === 461 ||
+    e.keyCode === 10009
+  )
+}