@inglorious/ui 9.11.1 → 9.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.11.1",
+  "version": "9.13.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -339,9 +339,9 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/store": "^12.1.1",
+    "@inglorious/store": "^12.2.0",
     "@inglorious/utils": "^5.1.0",
-    "@inglorious/web": "^6.14.1"
+    "@inglorious/web": "^6.16.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
@@ -350,10 +350,10 @@
     "@iconify-icons/material-symbols": "^2.0.6",
     "@inglorious/charts": "12.2.6",
     "@inglorious/eslint-config": "1.2.0",
-    "@inglorious/store": "12.1.1",
+    "@inglorious/store": "12.2.0",
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
-    "@inglorious/web": "6.14.1",
+    "@inglorious/web": "6.16.0",
     "@lit-labs/ssr": "^4.1.0",
     "@storybook/addon-docs": "^10.6.5",
     "@storybook/web-components-vite": "^10.6.5",

package/src/controls/button/button.stories.js

@@ -57,6 +57,10 @@ export default {
       options: ["button", "submit", "reset", "menu"],
       description: "Native HTML button type attribute.",
     },
+    href: {
+      control: "text",
+      description: "Renders a link styled as a button.",
+    },
     accept: {
       control: "text",
       description: "File types the picker offers (with `onFileSelect`).",
@@ -178,6 +182,14 @@ FilePicker.args = {
   onFileSelect: () => {},
 }
 
+export const Link = {}
+Link.args = {
+  ...Default.args,
+  children: "Open events",
+  color: "primary",
+  href: "#events",
+}
+
 export const CustomContent = {}
 CustomContent.args = {
   ...Default.args,

package/src/controls/button/template.js

@@ -14,6 +14,7 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
  * Renders a themed button for actions and form submission.
  * Supports variants, sizes, shapes, pressed state, and full-width layout.
  * With `onFileSelect`, the button also opens a file picker on click.
+ * With `href`, it is a link that looks like a button.
  * @example
  * // Stateless usage
  * button.render({ children: 'Click me', color: 'primary' })
@@ -21,6 +22,9 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
  * // File picker
  * button.render({ children: 'Upload', accept: 'image/*', onFileSelect })
  *
+ * // Link
+ * button.render({ children: 'Open', href: '/events' })
+ *
  * @param {ButtonProps} props
  * @returns {TemplateResult}
  */
@@ -36,6 +40,7 @@ export function render(props) {
     isPressed = false,
     isFullWidth = false,
     buttonType = "button",
+    href,
     ariaLabel,
     isAriaPressed,
     className = "",
@@ -72,6 +77,18 @@ export function render(props) {
       }
     : onClick
 
+  if (href != null) {
+    return html`<a
+      href=${isDisabled ? nothing : href}
+      aria-label=${ariaLabel || nothing}
+      aria-disabled=${isDisabled ? "true" : nothing}
+      class=${classMap(classes)}
+      @click=${isDisabled ? nothing : onClick}
+      ${ref((element) => applyElementProps(element, rest))}
+      >${children}</a
+    >`
+  }
+
   return html`
     <button
       type=${buttonType}

package/src/controls/button-group/template.js

@@ -33,9 +33,11 @@ export function render(props) {
     ...rest
   } = props
 
+  const isSelection = value != null || isMultiple
+
   const groupClasses = {
     "iw-button-group": true,
-    "iw-button-group-selection": value != null || isMultiple,
+    "iw-button-group-selection": isSelection,
     [`iw-button-group-${direction}`]: true,
     "iw-button-group-attached": isAttached,
   }
@@ -86,7 +88,8 @@ export function render(props) {
           size: itemSize ?? size,
           isDisabled: isDisabled || !!itemDisabled,
           isPressed,
-          isAriaPressed: isPressed ? true : undefined,
+          isAriaPressed: isSelection ? isPressed : undefined,
+          ariaLabel: children != null ? label : undefined,
           onClick: () => {
             if (!onChange) return
 

package/src/controls/file-upload/file-upload.stories.js

@@ -91,3 +91,14 @@ Error.args = {
   error: "Only PDF files under 5MB are allowed.",
   selectedFiles: ["invoice.png"],
 }
+
+/** Every text the field shows is a prop: `title`, `description` and `emptyLabel`. */
+export const Localized = {}
+Localized.args = {
+  ...Default.args,
+  label: "Curriculum",
+  hint: "Carica il curriculum in PDF o DOC.",
+  title: "Scegli un file",
+  description: "o trascinalo qui",
+  emptyLabel: "Nessun file selezionato",
+}

package/src/controls/file-upload/template.js

@@ -32,6 +32,7 @@ export function render(props) {
     selectedFiles = [],
     title = "Choose files",
     description = "or drag and drop here",
+    emptyLabel = "No file selected",
     onChange,
     onBlur,
     onFocus,
@@ -54,7 +55,7 @@ export function render(props) {
   }
 
   const summaryText =
-    selectedFiles.length > 0 ? selectedFiles.join(", ") : "No file selected"
+    selectedFiles.length > 0 ? selectedFiles.join(", ") : emptyLabel
 
   return html`
     <div class=${classMap(wrapperClasses)}>

package/src/controls/image-cropper/image-cropper.stories.js

@@ -83,3 +83,12 @@ Disabled.args = {
   rect: { x: 0.1, y: 0.1, w: 0.6, h: 0.6 },
   isDisabled: true,
 }
+
+/** Screen readers announce the crop area by `label` and `roleDescription`. */
+export const Localized = {}
+Localized.args = {
+  ...Default.args,
+  id: "image-cropper-localized",
+  label: "Ritaglia la foto",
+  roleDescription: "area di ritaglio",
+}

package/src/controls/image-cropper/template.js

@@ -72,7 +72,7 @@ export const ImageCropper = {
       class=${classMap(classes)}
       style=${style}
       role="group"
-      aria-roledescription="crop area"
+      aria-roledescription=${props.roleDescription ?? "crop area"}
       aria-label=${label || "Crop area"}
       tabindex=${isDisabled ? -1 : 0}
       aria-disabled=${isDisabled}

package/src/data-display/carousel/carousel.stories.js

@@ -163,3 +163,17 @@ function slide(index) {
     ${index + 1}
   </div>`
 }
+
+/** The carousel, its slides, arrows and dots take their accessible names from props. */
+export const Localized = {}
+Localized.args = {
+  ...Default.args,
+  id: "carousel-localized",
+  label: "Carosello di esempio",
+  roleDescription: "carosello",
+  slideRoleDescription: "diapositiva",
+  formatSlideLabel: (index, total) => `${index} di ${total}`,
+  formatIndicatorLabel: (index) => `Vai alla diapositiva ${index}`,
+  previousLabel: "Diapositiva precedente",
+  nextLabel: "Diapositiva successiva",
+}

package/src/data-display/carousel/template.js

@@ -92,7 +92,7 @@ export const Carousel = {
     return html`<div
       class="iw-carousel-viewport"
       role="group"
-      aria-roledescription="carousel"
+      aria-roledescription=${props.roleDescription ?? "carousel"}
       aria-label=${label || "Carousel"}
       tabindex="0"
       @scroll=${handleScroll(props)}
@@ -126,8 +126,11 @@ export const Carousel = {
     return html`<div
       class="iw-carousel-item"
       role="group"
-      aria-roledescription="slide"
-      aria-label=${`${index + HUMAN_OFFSET} of ${total}`}
+      aria-roledescription=${props.slideRoleDescription ?? "slide"}
+      aria-label=${(props.formatSlideLabel ?? formatSlideLabel)(
+        index + HUMAN_OFFSET,
+        total,
+      )}
     >
       ${item}
     </div>`
@@ -147,6 +150,8 @@ export const Carousel = {
       isInfinite = false,
       arrowVariant = DEFAULT_ARROW_VARIANT,
       arrowColor,
+      previousLabel = "Previous slide",
+      nextLabel = "Next slide",
     } = props
     const isPrevious = direction === PREVIOUS
 
@@ -168,7 +173,7 @@ export const Carousel = {
         shape: "round",
         isDisabled,
         children: html`<span class="iw-carousel-chevron"></span>`,
-        "aria-label": isPrevious ? "Previous slide" : "Next slide",
+        "aria-label": isPrevious ? previousLabel : nextLabel,
       })}
     </span>`
   },
@@ -217,7 +222,9 @@ export const Carousel = {
         "iw-carousel-indicator-current": isCurrent,
       })}
       type="button"
-      aria-label=${`Go to slide ${index + HUMAN_OFFSET}`}
+      aria-label=${(props.formatIndicatorLabel ?? formatIndicatorLabel)(
+        index + HUMAN_OFFSET,
+      )}
       aria-current=${isCurrent ? "page" : "false"}
       @click=${(event) =>
         this.indicatorSelect?.(props, index, viewportFrom(event.currentTarget))}
@@ -638,3 +645,11 @@ function viewportFrom(element) {
     element.closest(".iw-carousel")?.querySelector(".iw-carousel-viewport")
   )
 }
+
+function formatSlideLabel(index, total) {
+  return `${index} of ${total}`
+}
+
+function formatIndicatorLabel(index) {
+  return `Go to slide ${index}`
+}

package/src/data-display/data-grid/data-grid.stories.js

@@ -195,3 +195,76 @@ function createRows(count) {
     role: index % 4 === 0 ? "Admin" : "User",
   }))
 }
+
+/** Rows are selected from the keyboard: Tab to the grid, then use the arrows, Home and End to move, Enter to select a row, Space to toggle it, and Shift to extend the selection. */
+export const KeyboardSelection = {
+  args: {
+    ...Default.args,
+    id: "dataGridKeyboard",
+    ariaLabel: "Users",
+    search: null,
+    selection: [],
+    isMultiSelect: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "An ARIA grid named by `ariaLabel`. One row is in the tab order: the selection anchor, or else the first row. Keys pressed in a cell's own field stay with the field.",
+      },
+    },
+  },
+}
+
+/** With no rows to show, the footer counts no entries. */
+export const Empty = {
+  args: {
+    ...Default.args,
+    id: "dataGridEmpty",
+    rows: [],
+    selection: [],
+    pagination: { page: 0, pageSize: 10, pageSizes: [10, 20, 50] },
+  },
+}
+
+const TITLES_IT = {
+  id: "Id",
+  name: "Nome",
+  age: "Età",
+  active: "Attivo",
+  role: "Ruolo",
+}
+
+/** Every text the grid shows or announces is a prop, with English as the default. */
+export const Localized = {
+  args: {
+    ...Default.args,
+    id: "dataGridLocalized",
+    ariaLabel: "Utenti",
+    rows: createRows(24),
+    selection: [],
+    columns: baseColumns.map((column) => ({
+      ...column,
+      title: TITLES_IT[column.id],
+      isEditable: column.id === "name",
+      filter: {
+        ...column.filter,
+        ariaLabel: `Filtra ${TITLES_IT[column.id]}`,
+        minLabel: `Filtra ${TITLES_IT[column.id]}: minimo`,
+        maxLabel: `Filtra ${TITLES_IT[column.id]}: massimo`,
+      },
+    })),
+    search: { value: "", ariaLabel: "Cerca", placeholder: "Cerca…" },
+    edits: { 1: { name: "Carlo" } },
+    saveLabel: "Salva le modifiche",
+    resetLabel: "Annulla",
+    formatEditCount: (count) =>
+      count === 1 ? "1 modifica" : `${count} modifiche`,
+    formatRange: ({ start, end, total }) =>
+      total ? `${start}–${end} di ${total} righe` : "Nessuna riga",
+    pageLabel: "Pagina",
+    pageSizeLabel: "Righe per pagina",
+    formatPageLabel: (page) => `Vai a pagina ${page}`,
+    pagination: { page: 0, pageSize: 10, pageSizes: [10, 20, 50] },
+  },
+}

package/src/data-display/data-grid/template.js

@@ -5,7 +5,7 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { repeat } from "@inglorious/web/directives/repeat"
 import { when } from "@inglorious/web/directives/when"
@@ -40,6 +40,10 @@ const DATE_PART_LENGTH = 2
 /** Date's months count from zero, people's from one. */
 const MONTH_OFFSET = 1
 const INPUT_TYPES = { number: "number", date: "date", url: "url" }
+const FIRST_ROW = 0
+const LAST_ROW = -1
+const ROW_STEPS = { ArrowDown: 1, ArrowUp: -1 }
+const ARIA_SORT = { asc: "ascending", desc: "descending" }
 
 export const DataGrid = {
   /**
@@ -67,21 +71,28 @@ export const DataGrid = {
     }
 
     return html`<div class=${classMap(classes)}>
-      ${this.renderHeader?.(props)} ${this.renderBody?.(props)}
+      ${when(props.search, () => this.renderToolbar?.(props))}
+      <div
+        class="iw-data-grid-table"
+        role="grid"
+        aria-label=${props.ariaLabel ?? nothing}
+        aria-multiselectable=${props.isMultiSelect ? "true" : nothing}
+      >
+        ${this.renderHeader?.(props)} ${this.renderBody?.(props)}
+      </div>
       ${this.renderFooter?.(props)}
     </div> `
   },
 
   /**
-   * Renders the grid header region, including optional toolbar and column headers.
+   * Renders the grid header region with the column headers.
    * Column rendering is delegated to `renderHeaderColumn`.
    * @param {DataGridProps} props The data grid props.
    * @returns {TemplateResult} The rendered header.
    */
   renderHeader(props) {
     return html`<div class="iw-data-grid-header">
-      ${when(props.search, () => this.renderToolbar?.(props))}
-      <div class="iw-data-grid-header-row">
+      <div class="iw-data-grid-header-row" role="row">
         ${repeat(
           props.columns,
           (column) => column.id,
@@ -113,8 +124,12 @@ export const DataGrid = {
    * @returns {TemplateResult} The rendered header column.
    */
   renderHeaderColumn(props, { column }) {
+    const direction = getSortDirection(props, column.id)
+
     return html`<div
       class="iw-data-grid-header-column"
+      role="columnheader"
+      aria-sort=${column.isSortable ? (ARIA_SORT[direction] ?? "none") : nothing}
       style=${getColumnStyle(column)}
     >
       ${when(
@@ -126,9 +141,7 @@ export const DataGrid = {
             @click=${() => props.onSortChange?.(column.id)}
           >
             ${column.title}
-            <span aria-hidden="true"
-              >${getSortIcon(getSortDirection(props, column.id))}</span
-            >
+            <span aria-hidden="true">${getSortIcon(direction)}</span>
           </button>`,
         () =>
           html`<div class="iw-data-grid-header-title">${column.title}</div>`,
@@ -176,14 +189,20 @@ export const DataGrid = {
    */
   renderBody(props) {
     const rows = getRows(props)
+    const rowIds = rows.map((row) => getRowKeyValue(props, row))
+    const tabStopId = rowIds.includes(props.selectionAnchor)
+      ? props.selectionAnchor
+      : rowIds[FIRST_ROW]
+    const renderRow = (row, index) =>
+      this.renderRow?.(props, {
+        row,
+        index,
+        isTabStop: getRowKeyValue(props, row) === tabStopId,
+      })
 
     if (!props.isVirtualized) {
       return html`<div class="iw-data-grid-body">
-        ${repeat(
-          rows,
-          (row) => getRowKeyValue(props, row),
-          (row, index) => this.renderRow?.(props, { row, index }),
-        )}
+        ${repeat(rows, (row) => getRowKeyValue(props, row), renderRow)}
       </div>`
     }
 
@@ -211,8 +230,7 @@ export const DataGrid = {
         }
       },
       getType: () => ({
-        renderItem: (_entity, { item, index }) =>
-          this.renderRow?.(props, { row: item, index }),
+        renderItem: (_entity, { item, index }) => renderRow(item, index),
       }),
     }
 
@@ -221,17 +239,25 @@ export const DataGrid = {
 
   /**
    * Renders a single data row and wires row click/selection handlers.
-   * Cells are delegated to `renderCell` for customization.
+   * The row is focusable: arrows, Home and End move between rows, Space
+   * toggles the row as Ctrl+click does, Enter selects it alone, and Shift
+   * with either extends the selection. Only the tab stop row is in the tab
+   * order. Cells are delegated to `renderCell` for customization.
    * @param {DataGridProps} props The data grid props.
    * @param {object} payload The payload.
    * @param {Row} payload.row The row data.
    * @param {number} payload.index The row index.
+   * @param {boolean} [payload.isTabStop] Whether Tab reaches this row.
    * @returns {TemplateResult} The rendered row.
    */
-  renderRow(props, { row, index }) {
+  renderRow(props, { row, index, isTabStop = false }) {
     const rowId = getRowKeyValue(props, row)
+    const isSelected = Boolean(props.selection?.includes(rowId))
 
     return html`<div
+      role="row"
+      aria-selected=${String(isSelected)}
+      tabindex=${isTabStop ? "0" : "-1"}
       @click=${(event) =>
         props.onRowClick?.({
           rowId,
@@ -239,9 +265,10 @@ export const DataGrid = {
           metaKey: event.metaKey,
           ctrlKey: event.ctrlKey,
         })}
+      @keydown=${(event) => handleRowKeydown(event, props, rowId)}
       class="iw-data-grid-row ${classMap({
         "iw-data-grid-row-even": index % DIVISOR,
-        "iw-data-grid-row-selected": props.selection?.includes(rowId),
+        "iw-data-grid-row-selected": isSelected,
       })}"
     >
       ${repeat(
@@ -272,6 +299,7 @@ export const DataGrid = {
     const isEditable = Boolean(column.isEditable && row)
 
     return html`<div
+      role="gridcell"
       class="iw-data-grid-cell ${classMap({
         "iw-data-grid-cell-number": column.type === "number",
         "iw-data-grid-cell-date": column.type === "date",
@@ -382,8 +410,11 @@ export const DataGrid = {
         () =>
           html`<div class="iw-data-grid-footer-row">
             <div>
-              ${pagination.start + PRETTY_PAGE} to ${pagination.end} of
-              ${pagination.totalRows} entries
+              ${(props.formatRange ?? formatRange)({
+                start: pagination.start + PRETTY_PAGE,
+                end: pagination.end,
+                total: pagination.totalRows,
+              })}
             </div>
 
             ${this.renderPagination?.(props, pagination)}
@@ -405,11 +436,11 @@ export const DataGrid = {
   renderEdits(props, editCount) {
     return html`<div class="iw-data-grid-footer-row iw-data-grid-edits">
       <div role="status">
-        ${editCount} ${editCount === ONE_EDIT ? "change" : "changes"}
+        ${(props.formatEditCount ?? formatEditCount)(editCount)}
       </div>
       <div class="iw-data-grid-edits-actions">
         ${Button.render({
-          children: "Reset",
+          children: props.resetLabel ?? "Reset",
           variant: "ghost",
           size: "sm",
           onClick: () => props.onEditsReset?.(),
@@ -438,6 +469,7 @@ export const DataGrid = {
           buttonSize: "sm",
           buttonVariant: "outline",
           itemClassName: "iw-data-grid-pagination-button",
+          formatPageLabel: props.formatPageLabel,
         },
         {
           label: "«",
@@ -451,6 +483,7 @@ export const DataGrid = {
           buttonSize: "sm",
           buttonVariant: "outline",
           itemClassName: "iw-data-grid-pagination-button",
+          formatPageLabel: props.formatPageLabel,
         },
         {
           label: "‹",
@@ -461,6 +494,7 @@ export const DataGrid = {
       )}
       ${Input.render({
         name: "page",
+        ariaLabel: props.pageLabel ?? "Page",
         size: "sm",
         inputType: "number",
         min: 1,
@@ -475,6 +509,7 @@ export const DataGrid = {
           buttonSize: "sm",
           buttonVariant: "outline",
           itemClassName: "iw-data-grid-pagination-button",
+          formatPageLabel: props.formatPageLabel,
         },
         {
           label: "›",
@@ -488,6 +523,7 @@ export const DataGrid = {
           buttonSize: "sm",
           buttonVariant: "outline",
           itemClassName: "iw-data-grid-pagination-button",
+          formatPageLabel: props.formatPageLabel,
         },
         {
           label: "»",
@@ -502,8 +538,9 @@ export const DataGrid = {
 
   renderPageSize(props, pagination) {
     return html`<div class="iw-data-grid-footer-row">
-      <div>Page size:</div>
+      <div>${props.pageSizeLabel ?? "Page size"}</div>
       ${Select.render({
+        ariaLabel: props.pageSizeLabel ?? "Page size",
         size: "sm",
         value: pagination.pageSize,
         options: pagination.pageSizes,
@@ -636,3 +673,72 @@ function fromField(text, type, saved) {
   date.setFullYear(year, month - MONTH_OFFSET, day)
   return saved instanceof Date ? date : date.getTime()
 }
+
+/**
+ * Selects or moves between rows from the keyboard. Keys pressed in a cell's
+ * field stay the field's.
+ * @param {KeyboardEvent} event
+ * @param {DataGridProps} props
+ * @param {string|number} rowId
+ */
+function handleRowKeydown(event, props, rowId) {
+  if (event.target !== event.currentTarget) return
+
+  if (event.key === " " || event.key === "Enter") {
+    event.preventDefault()
+    props.onRowClick?.({
+      rowId,
+      shiftKey: event.shiftKey,
+      metaKey: event.metaKey,
+      ctrlKey: event.ctrlKey || event.key === " ",
+    })
+    return
+  }
+
+  const rows = [
+    ...event.currentTarget
+      .closest(".iw-data-grid-body")
+      .querySelectorAll(".iw-data-grid-row"),
+  ]
+  const target = getRowToFocus(
+    rows,
+    rows.indexOf(event.currentTarget),
+    event.key,
+  )
+  if (!target) return
+
+  event.preventDefault()
+  target.focus()
+}
+
+/**
+ * The row a navigation key moves focus to, if any.
+ * @param {HTMLElement[]} rows
+ * @param {number} current
+ * @param {string} key
+ * @returns {HTMLElement|undefined}
+ */
+function getRowToFocus(rows, current, key) {
+  if (key === "Home") return rows[FIRST_ROW]
+  if (key === "End") return rows.at(LAST_ROW)
+  if (key in ROW_STEPS) return rows[current + ROW_STEPS[key]]
+}
+
+/**
+ * The footer's default count of the rows shown.
+ * @param {{ start: number, end: number, total: number }} range
+ * @returns {string}
+ */
+function formatRange({ start, end, total }) {
+  if (!total) return "0 entries"
+  return `${start} to ${end} of ${total} entries`
+}
+
+/**
+ * The edits bar's default count of the unsaved edits.
+ * @param {number} count
+ * @returns {string}
+ */
+function formatEditCount(count) {
+  return `${count} ${count === ONE_EDIT ? "change" : "changes"}`
+}

package/src/data-display/data-grid/theme.css

@@ -10,8 +10,11 @@
   }
 
   .iw-data-grid-toolbar {
-    padding: 0 var(--iw-space-4);
-    padding-bottom: var(--iw-space-3);
+    padding: var(--iw-space-4) var(--iw-space-4) var(--iw-space-3);
+  }
+
+  .iw-data-grid-toolbar + .iw-data-grid-table .iw-data-grid-header {
+    padding-top: var(--iw-space-3);
   }
 
   .iw-data-grid-header-row {
@@ -71,6 +74,11 @@
   .iw-data-grid-row {
     align-items: center;
     column-gap: var(--iw-space-4);
+
+    &:focus-visible {
+      outline: 2px solid var(--iw-color-primary);
+      outline-offset: -2px;
+    }
   }
 
   &.iw-data-grid-striped {

package/src/data-display/list/list.stories.js

@@ -185,3 +185,11 @@ export const Expandable = {
     ],
   },
 }
+
+/** The expand toggle's accessible name comes from `toggleLabel`. */
+export const Localized = {
+  args: {
+    ...Nested.args,
+    toggleLabel: "Espandi o comprimi",
+  },
+}

package/src/data-display/list/template.js

@@ -225,7 +225,7 @@ export const List = {
                       shape: "square",
                       className: "iw-list-item-toggle",
                       isDisabled,
-                      ariaLabel: "Toggle section",
+                      ariaLabel: props.toggleLabel ?? "Toggle section",
                       "aria-expanded": isExpanded,
                       onClick: (event) => {
                         event.stopPropagation()

package/src/feedback/alert/alert.stories.js

@@ -76,3 +76,14 @@ export const Actionable = {
     onClose: () => {},
   },
 }
+
+/** The dismiss button's accessible name comes from `dismissLabel`. */
+export const Localized = {
+  args: {
+    title: "Salvato",
+    description: "Le modifiche sono state salvate.",
+    severity: "success",
+    dismissLabel: "Chiudi",
+    onClose: () => {},
+  },
+}

package/src/feedback/alert/template.js

@@ -28,6 +28,7 @@ export function render(props) {
     icon,
     action,
     onClose,
+    dismissLabel = "Dismiss",
     className = "",
     ...rest
   } = props
@@ -73,7 +74,7 @@ export function render(props) {
               html`<button
                 type="button"
                 class="iw-alert-close"
-                aria-label="Dismiss"
+                aria-label=${dismissLabel}
                 @click=${onClose}
               >
                 ×

package/src/feedback/snackbar/snackbar.stories.js

@@ -46,3 +46,14 @@ export const AboveBottomNavigation = {
     },
   ],
 }
+
+/** The dismiss button's accessible name comes from `dismissLabel`. */
+export const Localized = {
+  args: {
+    isOpen: true,
+    message: "Salvato",
+    position: "bottom-left",
+    dismissLabel: "Chiudi",
+    onClose: () => {},
+  },
+}

package/src/feedback/snackbar/template.js

@@ -26,6 +26,7 @@ export function render(props) {
     className = "",
     position = "bottom-left",
     onClose,
+    dismissLabel = "Dismiss",
   } = props
 
   if (!isOpen) return null
@@ -57,7 +58,7 @@ export function render(props) {
           html`<button
             type="button"
             class="iw-snackbar-close"
-            aria-label="Dismiss"
+            aria-label=${dismissLabel}
             @click=${onClose}
           >
             ×

package/src/navigation/breadcrumbs/breadcrumbs.stories.js

@@ -31,3 +31,15 @@ export const Default = {
     ],
   },
 }
+
+/** The navigation's accessible name follows the app's language through `ariaLabel`. */
+export const Localized = {
+  args: {
+    ariaLabel: "Percorso",
+    items: [
+      { label: "Home", href: "#" },
+      { label: "Libreria", href: "#" },
+      { label: "Dati" },
+    ],
+  },
+}

package/src/navigation/breadcrumbs/template.js

@@ -33,6 +33,7 @@ export const Breadcrumbs = {
       type, // eslint-disable-line no-unused-vars
       items = [],
       separator = "/",
+      ariaLabel = "Breadcrumb",
       className = "",
       ...rest
     } = props
@@ -45,7 +46,7 @@ export const Breadcrumbs = {
     )
 
     return html`<nav
-      aria-label="Breadcrumb"
+      aria-label=${ariaLabel}
       class=${classMap({ "iw-breadcrumbs": true, ...extraClasses })}
       ${ref((el) => applyElementProps(el, rest))}
     >

package/src/navigation/menu/menu.stories.js

@@ -1,3 +1,5 @@
+import { Form } from "@inglorious/web/form"
+
 import { createRender } from "../../stories/notify-story.js"
 import { Menu } from "."
 
@@ -47,3 +49,16 @@ export const WithTrigger = {
     items: Default.args.items,
   },
 }
+
+/** A menu with a trigger inside a form opens as anywhere else: the Form type cancels only buttons that would submit or reset the form. */
+export const InsideAForm = {
+  args: WithTrigger.args,
+  decorators: [
+    (story) => {
+      Form.init()
+      const form = document.createElement("form")
+      form.append(story())
+      return form
+    },
+  ],
+}

package/src/navigation/pagination/pagination.stories.js

@@ -59,3 +59,12 @@ export const Default = {
     buttonSize: "sm",
   },
 }
+
+/** `ariaLabel` names the navigation and `formatPageLabel` each control, in the app's language. */
+export const Localized = {
+  args: {
+    ...Default.args,
+    ariaLabel: "Pagine",
+    formatPageLabel: (page) => `Vai a pagina ${page}`,
+  },
+}

package/src/navigation/pagination/template.js

@@ -38,6 +38,7 @@ export const Pagination = {
       isFirstButtonVisible = false,
       isLastButtonVisible = false,
       isDisabled = false,
+      ariaLabel = "Pagination",
       className = "",
     } = props
 
@@ -51,7 +52,7 @@ export const Pagination = {
 
     return html`<nav
       class=${classMap({ "iw-pagination": true, ...extraClasses })}
-      aria-label="Pagination"
+      aria-label=${ariaLabel}
     >
       ${when(isFirstButtonVisible, () =>
         this.renderControl(props, {
@@ -130,7 +131,7 @@ export const Pagination = {
       className: ["iw-pagination-item", props.itemClassName ?? ""]
         .filter(Boolean)
         .join(" "),
-      ariaLabel: `Go to page ${target}`,
+      ariaLabel: (props.formatPageLabel ?? formatPageLabel)(target),
       isDisabled,
       onClick: () => onChange?.(target),
       children: label,
@@ -138,6 +139,10 @@ export const Pagination = {
   },
 }
 
+function formatPageLabel(page) {
+  return `Go to page ${page}`
+}
+
 function getPageItems(page, count, siblingCount) {
   if (count <= 7) {
     return Array.from({ length: count }, (_, index) => index + PRETTY_PAGE)

package/src/navigation/speed-dial/speed-dial.stories.js

@@ -38,3 +38,16 @@ export const Default = {
     ],
   },
 }
+
+/** Actions with only an icon are named by `formatActionLabel`, counted from 1. */
+export const UnlabelledActions = {
+  args: {
+    isOpen: true,
+    ariaLabel: "Azioni rapide",
+    formatActionLabel: (index) => `Azione ${index}`,
+    actions: [
+      { value: "edit", icon: "✎" },
+      { value: "share", icon: "↗" },
+    ],
+  },
+}

package/src/navigation/speed-dial/template.js

@@ -10,6 +10,8 @@ import { ref } from "@inglorious/web/directives/ref"
 
 import { syncPopover } from "../../shared/top-layer.js"
 
+const HUMAN_OFFSET = 1
+
 export const SpeedDial = {
   /**
    * Main entrypoint for the speed dial. Delegates to the base renderer for overrides.
@@ -96,7 +98,10 @@ export const SpeedDial = {
           })
         }
       })}
-      aria-label=${action.label ?? `Speed dial action ${index + 1}`}
+      aria-label=${
+        action.label ??
+        (props.formatActionLabel ?? formatActionLabel)(index + HUMAN_OFFSET)
+      }
       ?disabled=${action.isDisabled}
       @click=${() => {
         action.onClick?.(action.value ?? index)
@@ -107,3 +112,7 @@ export const SpeedDial = {
     </button>`
   },
 }
+
+function formatActionLabel(index) {
+  return `Speed dial action ${index}`
+}

package/types/controls/button-group.d.ts

@@ -5,6 +5,7 @@ import type { Renderable } from "../shared/renderable"
 export interface ButtonGroupItem {
   id?: string
   value?: string
+  /** The button's text, or its accessible name when `children` are given */
   label: string
   children?: Renderable
   isDisabled?: boolean

package/types/controls/button.d.ts

@@ -21,6 +21,8 @@ export interface ButtonProps {
   isPressed?: boolean
   isFullWidth?: boolean
   buttonType?: "button" | "submit" | "reset" | "menu"
+  /** Renders a link styled as a button instead of a `<button>` */
+  href?: string
   ariaLabel?: string
   isAriaPressed?: boolean
   className?: string

package/types/controls/file-upload.d.ts

@@ -14,6 +14,8 @@ export interface FileUploadProps {
   selectedFiles?: string[]
   title?: string
   description?: string
+  /** Shown while no file is selected. Defaults to "No file selected". */
+  emptyLabel?: string
   onChange?: (files: FileList | null) => void
   onBlur?: () => void
   onFocus?: () => void

package/types/controls/image-cropper.d.ts

@@ -12,6 +12,8 @@ export interface ImageCropperProps {
   id?: string
   type?: string
   label?: string
+  /** What screen readers call the crop area. Defaults to "crop area". */
+  roleDescription?: string
 
   src?: string
   alt?: string

package/types/data-display/carousel.d.ts

@@ -13,6 +13,18 @@ export interface CarouselProps {
   id?: string
   type?: string
   label?: string
+  /** What screen readers call the carousel. Defaults to "carousel". */
+  roleDescription?: string
+  /** What screen readers call a slide. Defaults to "slide". */
+  slideRoleDescription?: string
+  /** A slide's accessible name. Defaults to "{index} of {total}", counted from 1. */
+  formatSlideLabel?: (index: number, total: number) => string
+  /** A dot's accessible name. Defaults to "Go to slide {index}", counted from 1. */
+  formatIndicatorLabel?: (index: number) => string
+  /** The previous arrow's accessible name. Defaults to "Previous slide". */
+  previousLabel?: string
+  /** The next arrow's accessible name. Defaults to "Next slide". */
+  nextLabel?: string
 
   items?: unknown[]
   /** Index of the item the viewport has settled on. */

package/types/data-display/data-grid.d.ts

@@ -79,6 +79,8 @@ export interface DataGridProps<T extends Row = Row> {
     /** The search field's accessible name. Defaults to "Search". */
     ariaLabel?: string
   } | null
+  /** The grid's accessible name. */
+  ariaLabel?: string
   isStriped?: boolean
   isVirtualized?: boolean
   virtualization?: DataGridVirtualization
@@ -101,6 +103,18 @@ export interface DataGridProps<T extends Row = Row> {
   edits?: Record<string | number, Record<string, any>>
   /** The label of the button that saves the edits. Defaults to "Save changes". */
   saveLabel?: string
+  /** The label of the button that resets the edits. Defaults to "Reset". */
+  resetLabel?: string
+  /** The edits bar's count. Defaults to "{count} change(s)". */
+  formatEditCount?: (count: number) => string
+  /** The footer's count of the rows shown. Defaults to "{start} to {end} of {total} entries", or "0 entries". */
+  formatRange?: (range: { start: number; end: number; total: number }) => string
+  /** The page field's accessible name. Defaults to "Page". */
+  pageLabel?: string
+  /** The page size selector's label. Defaults to "Page size". */
+  pageSizeLabel?: string
+  /** A page control's accessible name. Defaults to "Go to page {page}". */
+  formatPageLabel?: (page: number) => string
   onCellChange?: (payload: {
     rowId: string | number
     columnId: string

package/types/data-display/list.d.ts

@@ -32,6 +32,8 @@ export interface ListProps {
   padding?: "none" | "sm" | "md" | "lg" | "xl"
   path?: number[]
   className?: string
+  /** The expand toggle's accessible name. Defaults to "Toggle section". */
+  toggleLabel?: string
   onItemClick?: (item: ListItem, path: number[]) => void
   onItemToggle?: (item: ListItem, path: number[]) => void
   [key: string]: unknown

package/types/feedback/alert.d.ts

@@ -13,6 +13,8 @@ export interface AlertProps {
   icon?: TemplateResult | string | number
   action?: TemplateResult | string | number
   onClose?: () => void
+  /** The dismiss button's accessible name. Defaults to "Dismiss". */
+  dismissLabel?: string
   className?: string
   [key: string]: unknown
 }

package/types/feedback/snackbar.d.ts

@@ -15,6 +15,8 @@ export interface SnackbarProps {
     | "top-right"
   className?: string
   onClose?: () => void
+  /** The dismiss button's accessible name. Defaults to "Dismiss". */
+  dismissLabel?: string
   [key: string]: unknown
 }
 

package/types/navigation/breadcrumbs.d.ts

@@ -13,6 +13,8 @@ export interface BreadcrumbsProps {
   type?: string
   items: BreadcrumbItem[]
   separator?: TemplateResult | string | number
+  /** The navigation's accessible name. Defaults to "Breadcrumb". */
+  ariaLabel?: string
   className?: string
   [key: string]: unknown
 }

package/types/navigation/pagination.d.ts

@@ -15,6 +15,10 @@ export interface PaginationProps {
   buttonSize?: "sm" | "md" | "lg"
   itemClassName?: string
   className?: string
+  /** The navigation's accessible name. Defaults to "Pagination". */
+  ariaLabel?: string
+  /** A control's accessible name. Defaults to "Go to page {page}". */
+  formatPageLabel?: (page: number) => string
   onChange?: (page: number) => void
   [key: string]: unknown
 }

package/types/navigation/speed-dial.d.ts

@@ -18,6 +18,8 @@ export interface SpeedDialProps {
   ariaLabel?: string
   direction?: "up" | "down" | "left" | "right"
   actions?: SpeedDialAction[]
+  /** The name of an action with no label. Defaults to "Speed dial action {index}", counted from 1. */
+  formatActionLabel?: (index: number) => string
   /**
    * Called with the new state when the browser opens or closes the actions.
    * Without it, the browser alone keeps the open state and `isOpen` is not