@udibo/oauth2 0.3.1 → 0.4.0

package/esm/react/components/internal.d.ts

@@ -28,7 +28,6 @@ export declare function AuthFormShell<V extends AuthFormValues>(props: {
     method?: "get" | "post";
     formRef?: Ref<HTMLFormElement>;
 }): ReactNode;
-/** The actions row and its submit button, disabled while the form is in flight. */
 export declare function SubmitButton(props: {
     isSubmitting: boolean;
     label: string;
@@ -51,8 +50,8 @@ export declare function ErrorSummary(props: {
 /**
  * Moves keyboard focus to the first field that came back with an error after a
  * failed submit, so a screen-reader / keyboard user lands on the control to fix
- * (its label + error are read via `aria-describedby`) instead of being stranded
- * on the disabled submit button. No-ops on the initial render and when the form
+ * (its label + error are read via `aria-describedby`) instead of being left on
+ * the submit button. No-ops on the initial render and when the form
  * carries a form-level error ({@link ErrorSummary} owns that focus). Call it
  * once, unconditionally, from a form component built on {@link useAuthForm}.
  */

package/esm/react/components/internal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, } from "react";
 import { AuthFormClassNamesScope, useAuthFormClassNames, } from "./class-names.js";
 /**
  * The single exit every default form component returns through — it owns both
@@ -18,11 +18,13 @@ export function AuthFormShell(props) {
     const { name, form, className, classNames, render, rootProps, aboveForm, succeeded, children, action, method, formRef, } = props;
     return (_jsx(AuthFormClassNamesScope, { classNames: classNames, children: render ? render(form) : (_jsxs("div", { "data-oauth2-form": name, ...rootProps, className: combineClassNames(className, classNames.root), children: [aboveForm, succeeded ?? (_jsxs("form", { onSubmit: form.handleSubmit, action: action, method: method ?? (action ? "post" : undefined), ref: formRef, noValidate: true, "data-oauth2-form-element": "", className: classNames.form, children: [_jsx(ErrorSummary, { error: form.formError, focusTrigger: form.submitCount }), children] }))] })) }));
 }
-/** The actions row and its submit button, disabled while the form is in flight. */
+function ignoreActivation(event) {
+    event.preventDefault();
+}
 export function SubmitButton(props) {
     const { isSubmitting, label, submittingLabel } = props;
     const classNames = useAuthFormClassNames();
-    return (_jsx("div", { "data-oauth2-actions": "", className: classNames.actions, children: _jsx("button", { type: "submit", disabled: isSubmitting, "data-oauth2-submit": "", className: classNames.submit, children: isSubmitting ? submittingLabel : label }) }));
+    return (_jsx("div", { "data-oauth2-actions": "", className: classNames.actions, children: _jsx("button", { type: "submit", "aria-disabled": isSubmitting ? true : undefined, onClick: isSubmitting ? ignoreActivation : undefined, "data-oauth2-submit": "", className: classNames.submit, children: isSubmitting ? submittingLabel : label }) }));
 }
 export function TextField(props) {
     const { fieldProps, label, type = "text", autoComplete, required, error, inputRef, children, } = props;
@@ -46,8 +48,8 @@ export function ErrorSummary(props) {
 /**
  * Moves keyboard focus to the first field that came back with an error after a
  * failed submit, so a screen-reader / keyboard user lands on the control to fix
- * (its label + error are read via `aria-describedby`) instead of being stranded
- * on the disabled submit button. No-ops on the initial render and when the form
+ * (its label + error are read via `aria-describedby`) instead of being left on
+ * the submit button. No-ops on the initial render and when the form
  * carries a form-level error ({@link ErrorSummary} owns that focus). Call it
  * once, unconditionally, from a form component built on {@link useAuthForm}.
  */

package/esm/react/components/types.d.ts

@@ -113,7 +113,10 @@ export interface AuthFormClassNames extends BaseClassNames {
     hint?: string;
     /** The actions row wrapping the submit button (`data-oauth2-actions`). */
     actions?: string;
-    /** The submit `<button>` (`data-oauth2-submit`). */
+    /**
+     * The submit `<button>` (`data-oauth2-submit`). It carries
+     * `aria-disabled="true"` while a submit is in flight.
+     */
     submit?: string;
     /**
      * A secondary action below the submit button (`data-oauth2-secondary`) — the

package/esm/react/components/use-auth-form.d.ts

@@ -70,7 +70,11 @@ export interface AuthFormState<V extends AuthFormValues> {
     formError: string | null;
     /** Lifecycle status. */
     status: AuthFormStatus;
-    /** `true` while a submit is in flight (`status === "submitting"`). */
+    /**
+     * `true` while a submit is in flight (`status === "submitting"`). Mark the
+     * submit button `aria-disabled` with it, not `disabled`: disabling the
+     * focused button drops keyboard focus to `<body>`.
+     */
     isSubmitting: boolean;
     /** `true` once a submit has completed successfully. */
     succeeded: boolean;
@@ -82,7 +86,10 @@ export interface AuthFormState<V extends AuthFormValues> {
     setValues(next: Partial<V>): void;
     /** Reset values to `initialValues` and clear all errors/status. */
     reset(): void;
-    /** Submit handler for a `<form onSubmit>` (calls `preventDefault`). */
+    /**
+     * Submit handler for a `<form onSubmit>`. It always calls `preventDefault`,
+     * and a submit that arrives while one is in flight is ignored.
+     */
     handleSubmit(event?: {
         preventDefault(): void;
     }): Promise<void>;
@@ -110,7 +117,9 @@ export interface AuthFormState<V extends AuthFormValues> {
  *     <input {...form.getFieldProps("identifier")} />
  *     <input {...form.getFieldProps("password")} type="password" />
  *     {form.formError ? <p role="alert">{form.formError}</p> : null}
- *     <button type="submit" disabled={form.isSubmitting}>Sign in</button>
+ *     <button type="submit" aria-disabled={form.isSubmitting || undefined}>
+ *       Sign in
+ *     </button>
  *   </form>
  * );
  * ```

package/esm/react/components/use-auth-form.js

@@ -34,7 +34,9 @@ import { useCallback, useId, useMemo, useRef, useState, } from "react";
  *     <input {...form.getFieldProps("identifier")} />
  *     <input {...form.getFieldProps("password")} type="password" />
  *     {form.formError ? <p role="alert">{form.formError}</p> : null}
- *     <button type="submit" disabled={form.isSubmitting}>Sign in</button>
+ *     <button type="submit" aria-disabled={form.isSubmitting || undefined}>
+ *       Sign in
+ *     </button>
  *   </form>
  * );
  * ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udibo/oauth2",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A flexible OAuth2 toolkit: framework-agnostic authorization & resource servers, a typed client, Hono adapters (including a backend-for-frontend), and React bindings.",
   "repository": {
     "type": "git",