@aiaiai-pt/design-system 0.17.1 → 0.19.0

package/components/ActionFormRenderer.svelte

@@ -397,6 +397,11 @@
   {@const parameter = rawParameter as Entity}
   {@const key = parameterKey(parameter)}
   {@const type = parameterType(parameter)}
+  <!-- A11y (#244 C7 / Selo item 4): required fields are marked
+       `aria-required` on the control itself, so a screen reader announces
+       "required" on the field — not just the disconnected visual hint below.
+       Passed through the DS field components' `{...rest}` onto the input. -->
+  {@const ariaRequired = parameter.required ? "true" : undefined}
   {#if type === "enum" || type === "select" || enumOptions(parameter).length}
     <Select
       label={String(parameter.label ?? key)}
@@ -405,6 +410,7 @@
       options={enumOptions(parameter)}
       placeholder="Select value"
       onchange={(value: string) => setValue(key, value)}
+      aria-required={ariaRequired}
     />
   {:else if type === "number" || type === "integer"}
     <Input
@@ -416,6 +422,7 @@
         const value = (event.target as HTMLInputElement).value;
         setValue(key, value === "" ? "" : Number(value));
       }}
+      aria-required={ariaRequired}
     />
   {:else if type === "bool" || type === "boolean"}
     <Select
@@ -427,12 +434,20 @@
         { value: "false", label: "No" },
       ]}
       onchange={(value: string) => setValue(key, value === "true")}
+      aria-required={ariaRequired}
     />
   {:else if type === "file"}
     <!-- `file` parameter (#75 M5 slice 4b): upload-as-you-attach. The keys
          ride payload.attachment_keys; raw_values never sees this param. -->
-    <div class="afr-file-param">
-      <span class="afr-file-label">{String(parameter.label ?? key)}</span>
+    <!-- A11y: the file param is a labelled group (the FileUpload's own input
+         can't take a `for`/label from here), so SR users get the field name +
+         required state when they enter it. -->
+    <div class="afr-file-param" role="group" aria-labelledby={`${key}-file-label`}>
+      <span id={`${key}-file-label`} class="afr-file-label"
+        >{String(parameter.label ?? key)}{parameter.required
+          ? " (required)"
+          : ""}</span
+      >
       {#each fileUploads[key] ?? [] as f (f.key)}
         <FileUploadItem
           name={f.name}
@@ -491,6 +506,7 @@
       name={key}
       value={String(values[key] ?? "")}
       oninput={(event: Event) => setValue(key, (event.target as HTMLInputElement).value)}
+      aria-required={ariaRequired}
     />
   {/if}
   {#if mode === "public-submit"}
@@ -526,7 +542,14 @@
     <p class="muted">This action has no fields yet.</p>
   {:else}
     {@const Layout = resolvedLayout.component}
-    <form class="rendered-form">
+    <!-- A11y: name the form region so SR users land on a labelled form, not an
+         anonymous group of inputs (Selo item 4 / WCAG 1.3.1). -->
+    <form
+      class="rendered-form"
+      aria-label={String(
+        renderedAction?.label ?? renderedAction?.key ?? "Form",
+      )}
+    >
       <Layout {sections} field={fieldRow} />
     </form>
   {/if}
@@ -544,6 +567,15 @@
         {#if captcha}
           <div class="submit-captcha">{@render captcha()}</div>
         {/if}
+        <!-- A11y: a disabled submit gives no reason on its own. This polite
+             status spells out the gate (and disappears when satisfied), so SR
+             users know WHY they can't submit yet — paired with the per-field
+             `aria-required` that marks which fields are needed. -->
+        {#if !canSubmit && !submitting}
+          <p class="submit-hint" role="status">
+            Fill in all required fields to submit.
+          </p>
+        {/if}
         <Button
           variant="primary"
           loading={submitting}
@@ -642,6 +674,12 @@
     color: var(--color-text-muted);
   }
 
+  .submit-hint {
+    color: var(--color-text-secondary);
+    font-size: var(--type-body-sm-size);
+    margin: 0;
+  }
+
   .rendered-form,
   .admin-preview,
   .preview-block,

package/components/ContrastToggle.svelte

@@ -0,0 +1,36 @@
+<!--
+  @component ContrastToggle
+
+  Citizen high-contrast preference (#244 C7 accessibility pack). A single on/off
+  switch: "on" asks for a high-contrast rendering (max text/surface separation,
+  stronger borders, underlined links) on top of the active light/dark scheme.
+
+  Presentational, mirrors the scheme/motion controls: it reports the new value
+  via `onchange`; the consumer persists it (cookie) and applies the
+  `:root[data-contrast="high"]` layer (tokens/semantic.css) server-side, so SSR
+  paints it with no flash. The label is a prop for i18n (default English).
+
+  @example
+  <ContrastToggle high={prefs.contrast === "high"} onchange={(v) => setContrast(v)} />
+-->
+<script>
+  import Toggle from "./Toggle.svelte";
+
+  let {
+    /** @type {boolean} Whether high-contrast is currently on. */
+    high = false,
+    /** @type {((high: boolean) => void) | undefined} */
+    onchange = undefined,
+    /** @type {string} Accessible label (i18n). */
+    label = "High contrast",
+    ...rest
+  } = $props();
+</script>
+
+<Toggle
+  checked={high}
+  {label}
+  {onchange}
+  data-testid="contrast-toggle"
+  {...rest}
+/>

package/components/ContrastToggle.svelte.d.ts

@@ -0,0 +1,30 @@
+export default ContrastToggle;
+type ContrastToggle = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * ContrastToggle
+ *
+ * Citizen high-contrast preference (#244 C7 accessibility pack). A single on/off
+ * switch: "on" asks for a high-contrast rendering (max text/surface separation,
+ * stronger borders, underlined links) on top of the active light/dark scheme.
+ *
+ * Presentational, mirrors the scheme/motion controls: it reports the new value
+ * via `onchange`; the consumer persists it (cookie) and applies the
+ * `:root[data-contrast="high"]` layer (tokens/semantic.css) server-side, so SSR
+ * paints it with no flash. The label is a prop for i18n (default English).
+ *
+ * @example
+ * <ContrastToggle high={prefs.contrast === "high"} onchange={(v) => setContrast(v)} />
+ */
+declare const ContrastToggle: import("svelte").Component<{
+    high?: boolean;
+    onchange?: any;
+    label?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    high?: boolean;
+    onchange?: any;
+    label?: string;
+} & Record<string, any>;

package/components/FeedView.svelte

@@ -0,0 +1,190 @@
+<!--
+  @component FeedView
+
+  A segmented view-switch for one feed (e.g. list ⇄ map). Presentational only:
+  it renders the available views as a WAI-ARIA tablist and emits the chosen
+  view via `onchange` — it does NOT render the views' content (the consumer
+  swaps that in response to the change, typically by re-resolving the feed).
+
+  Keyboard (automatic activation, per the tablist pattern for cheap-to-reveal
+  views): Arrow keys move focus AND select; Home/End jump to the ends; focus
+  roves (active tab is the only tab stop).
+
+  Consumes --feedview-* tokens from components.css.
+
+  @example
+  <FeedView
+    views={[
+      { value: 'list', label: 'List' },
+      { value: 'map', label: 'Map' },
+    ]}
+    bind:value={activeView}
+    onchange={(v) => goto(`?view=${v}`)}
+  />
+
+  @example With icons (icon is a Svelte component, e.g. phosphor-svelte)
+  <FeedView views={[
+    { value: 'list', label: 'List', icon: ListIcon },
+    { value: 'map', label: 'Map', icon: MapIcon },
+  ]} bind:value={activeView} onchange={onChange} />
+-->
+<script module>
+  let _feedviewUid = 0;
+  /**
+   * @typedef {{ value: string, label: string, icon?: import('svelte').Component }} FeedViewOption
+   */
+</script>
+
+<script>
+  let {
+    /** @type {FeedViewOption[]} The available views (first = default). */
+    views = [],
+    /** @type {string} The active view's value (bindable). */
+    value = $bindable(''),
+    /** @type {((value: string) => void) | undefined} Fires when the view changes. */
+    onchange = undefined,
+    /** @type {string} Accessible name for the tablist. */
+    label = 'View',
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const uid = `feedview-${_feedviewUid++}`;
+  /** @type {HTMLButtonElement[]} */
+  let tabs = $state([]);
+
+  const activeIndex = $derived(Math.max(0, views.findIndex((v) => v.value === value)));
+
+  /** @param {string} v */
+  function select(v) {
+    if (v === value) return;
+    value = v;
+    onchange?.(v);
+  }
+
+  /**
+   * @param {number} index
+   * @param {boolean} focus
+   */
+  function activate(index, focus) {
+    const view = views[index];
+    if (!view) return;
+    if (focus) tabs[index]?.focus();
+    select(view.value);
+  }
+
+  /** @param {KeyboardEvent} event */
+  function onKeydown(event) {
+    const last = views.length - 1;
+    let next = -1;
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        next = activeIndex >= last ? 0 : activeIndex + 1;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        next = activeIndex <= 0 ? last : activeIndex - 1;
+        break;
+      case 'Home':
+        next = 0;
+        break;
+      case 'End':
+        next = last;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    activate(next, true);
+  }
+</script>
+
+<div
+  class="feedview {className}"
+  role="tablist"
+  aria-label={label}
+  onkeydown={onKeydown}
+  {...rest}
+>
+  {#each views as view, i (view.value)}
+    {@const Icon = view.icon}
+    {@const isActive = view.value === value}
+    <button
+      type="button"
+      role="tab"
+      id={`${uid}-${view.value}`}
+      aria-selected={isActive}
+      tabindex={isActive ? 0 : -1}
+      class="feedview-tab"
+      class:feedview-tab-active={isActive}
+      bind:this={tabs[i]}
+      onclick={() => activate(i, false)}
+    >
+      {#if Icon}<span class="feedview-icon" aria-hidden="true"><Icon /></span>{/if}
+      <span class="feedview-label">{view.label}</span>
+    </button>
+  {/each}
+</div>
+
+<style>
+  .feedview {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    background: var(--feedview-bg);
+    border-radius: var(--feedview-radius);
+    padding: var(--feedview-padding);
+  }
+
+  .feedview-tab {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-xs);
+    height: var(--feedview-tab-height);
+    padding: 0 var(--feedview-tab-padding-x);
+    border-radius: var(--feedview-tab-radius);
+    font-family: var(--feedview-tab-font);
+    font-size: var(--feedview-tab-size);
+    letter-spacing: var(--feedview-tab-tracking);
+    color: var(--feedview-tab-color);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all var(--feedview-tab-transition);
+  }
+
+  .feedview-tab:hover {
+    color: var(--color-text);
+  }
+
+  .feedview-tab:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .feedview-tab-active {
+    color: var(--feedview-tab-color-active);
+    background: var(--feedview-tab-bg-active);
+    box-shadow: var(--feedview-tab-shadow-active);
+  }
+
+  .feedview-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .feedview-icon :global(svg) {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .feedview-tab {
+      transition: none;
+    }
+  }
+</style>

package/components/FeedView.svelte.d.ts

@@ -0,0 +1,54 @@
+export default FeedView;
+export type FeedViewOption = {
+    value: string;
+    label: string;
+    icon?: import("svelte").Component;
+};
+type FeedView = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FeedView
+ *
+ * A segmented view-switch for one feed (e.g. list ⇄ map). Presentational only:
+ * it renders the available views as a WAI-ARIA tablist and emits the chosen
+ * view via `onchange` — it does NOT render the views' content (the consumer
+ * swaps that in response to the change, typically by re-resolving the feed).
+ *
+ * Keyboard (automatic activation, per the tablist pattern for cheap-to-reveal
+ * views): Arrow keys move focus AND select; Home/End jump to the ends; focus
+ * roves (active tab is the only tab stop).
+ *
+ * Consumes --feedview-* tokens from components.css.
+ *
+ * @example
+ * <FeedView
+ *   views={[
+ *     { value: 'list', label: 'List' },
+ *     { value: 'map', label: 'Map' },
+ *   ]}
+ *   bind:value={activeView}
+ *   onchange={(v) => goto(`?view=${v}`)}
+ * />
+ *
+ * @example With icons (icon is a Svelte component, e.g. phosphor-svelte)
+ * <FeedView views={[
+ *   { value: 'list', label: 'List', icon: ListIcon },
+ *   { value: 'map', label: 'Map', icon: MapIcon },
+ * ]} bind:value={activeView} onchange={onChange} />
+ */
+declare const FeedView: import("svelte").Component<{
+    views?: any[];
+    value?: string;
+    onchange?: any;
+    label?: string;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    views?: any[];
+    value?: string;
+    onchange?: any;
+    label?: string;
+    class?: string;
+} & Record<string, any>;

package/components/FileUpload.svelte

@@ -158,6 +158,20 @@
   }
 </script>
 
+<!-- The file input is a SIBLING of the trigger button, not a child: a focusable
+     <input> nested inside a <button> is a nested-interactive a11y violation
+     (axe, #244 S5). It is visually hidden + pointer-events:none and is opened
+     via the `inputEl` ref from the button's onclick, so behaviour is unchanged. -->
+<input
+  bind:this={inputEl}
+  type="file"
+  {accept}
+  {multiple}
+  class="fileupload-input"
+  onchange={handleInputChange}
+  tabindex={-1}
+  aria-hidden="true"
+/>
 <button
   type="button"
   class="fileupload {className}"
@@ -171,16 +185,6 @@
   {...rest}
   onclick={handleClick}
 >
-  <input
-    bind:this={inputEl}
-    type="file"
-    {accept}
-    {multiple}
-    class="fileupload-input"
-    onchange={handleInputChange}
-    tabindex={-1}
-    aria-hidden="true"
-  />
   {#if children}
     {@render children()}
   {:else}