@sensiblestats/widget-react 0.66.0 → 0.66.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 0.66.1
+
+### Patch Changes
+
+- Match odds card polish: a compact list price with Add to slip off has a name screen readers read, and the 1 X 2 heads are hidden from them; "Show more" moves focus to the first new row; a list price already in the slip shows a tick; the Odds tab never draws a card stat.
+
 ## 0.66.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1480,8 +1480,9 @@ function SlipButton({ selection, shownOdds, marketDeveloperName, selectionLabel,
         disabled: pending || settled,
         onClick,
         children: [
+          settled ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-mol-tick", "aria-hidden": "true", children: "\u2713" }) : null,
           price.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-mol-lab", children: price.label }) : null,
-          shownOdds
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: shownOdds })
         ]
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1951,7 +1952,7 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }
         vm.market ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mo-market-row", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-mo-market", children: vm.market }) }) : null
       ] }) : null
     ] }),
-    vm.statText && !hideHeader ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mo-stat", children: vm.statText }) : null,
+    vm.statText && !hideHeader && !pinRef ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mo-stat", children: vm.statText }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ss-w-mo-rows", children: [
       vm.mainRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OddsRow, { vm, row, ui, slip, inSlipIds, history }, row.key)),
       open ? vm.moreRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OddsRow, { vm, row, ui, slip, inSlipIds, history }, row.key)) : null
@@ -2032,6 +2033,7 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 function Cell({ row, cell, ui, slip }) {
   const vm = row.card;
   const selection = vm.addToSlipEnabled ? marketOddsRowToSlipSelection(vm, cell.row, slip.conversationId) : null;
+  const name = `${vm.homeTeamName ?? ""} ${vm.awayTeamName ?? ""}, ${cell.row.selection} ${cell.row.odds}`;
   const button = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     SlipButton,
     {
@@ -2042,7 +2044,7 @@ function Cell({ row, cell, ui, slip }) {
       line: cell.row.line,
       slip,
       ui,
-      price: { label: cell.label, ariaLabel: `${vm.homeTeamName ?? ""} ${vm.awayTeamName ?? ""}, ${cell.row.selection} ${cell.row.odds}` }
+      price: { label: cell.label, ariaLabel: name }
     }
   );
   return (
@@ -2050,18 +2052,19 @@ function Cell({ row, cell, ui, slip }) {
     // and 101.00 two.
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: ["ss-w-mol-cell", cell.row.odds.length >= 5 && "ss-w-mol-cell--wide", cell.row.odds.length >= 6 && "ss-w-mol-cell--wider"].filter(Boolean).join(" "), children: [
       selection && slip.onAddToSlip && ui ? button : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ss-w-mol-price", children: [
-        cell.label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-lab", children: cell.label }) : null,
-        cell.row.odds
+        cell.label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-lab", "aria-hidden": "true", children: cell.label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: cell.row.odds }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-vh", children: name })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(OddsMovementBadge, { previous: cell.row.previousOdds, current: cell.row.odds, direction: cell.row.movementDirection, ui })
     ] })
   );
 }
-function Row({ row, columns, ui, slip, monitor }) {
+function Row({ row, columns, ui, slip, monitor, rowRef }) {
   const vm = row.card;
   const kickoffFallback = vm.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(vm.kickoffUtc) : void 0;
   const when = vm.isLive ? ui?.liveLabel ?? "Live" : vm.kickoffLabel ?? (kickoffFallback ? `${kickoffFallback.dayLabel} ${kickoffFallback.time}` : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol-row", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol-row", ref: rowRef, tabIndex: rowRef ? -1 : void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(MatchLink, { as: "div", matchId: vm.matchId, home: vm.homeTeamName, away: vm.awayTeamName, className: "ss-w-mol-fx", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ss-w-mol-team", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Crest2, { kind: "team", url: vm.homeCrest, name: vm.homeTeamName ?? "" }),
@@ -2083,11 +2086,17 @@ function Row({ row, columns, ui, slip, monitor }) {
 function CompactOddsList({ list, ui, slip, monitor }) {
   const [shown, setShown] = (0, import_react13.useState)(COMPACT_PAGE);
   const hidden = list.rowCount - shown;
+  const [focusIndex, setFocusIndex] = (0, import_react13.useState)(null);
+  const focusRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    if (focusIndex !== null) focusRef.current?.focus();
+  }, [focusIndex]);
   let left = shown;
+  let index = 0;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-mol-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-market", children: list.market }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-cols", style: { gridTemplateColumns: `repeat(${list.columns.length}, minmax(0, 1fr))` }, children: list.columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-col", children: c }, `${c}:${i}`)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-cols", "aria-hidden": "true", style: { gridTemplateColumns: `repeat(${list.columns.length}, minmax(0, 1fr))` }, children: list.columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-col", children: c }, `${c}:${i}`)) }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mol-side", "aria-hidden": "true" })
     ] }),
     list.groups.map((group, gi) => {
@@ -2099,10 +2108,16 @@ function CompactOddsList({ list, ui, slip, monitor }) {
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Crest2, { kind: "comp", url: group.competitionCrest, name: group.competition }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: group.competition })
         ] }) : null,
-        rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Row, { row, columns: list.columns.length, ui, slip, monitor }, row.card.id))
+        rows.map((row) => {
+          const at = index++;
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Row, { row, columns: list.columns.length, ui, slip, monitor, rowRef: at === focusIndex ? focusRef : void 0 }, row.card.id);
+        })
       ] }, `${group.competition ?? ""}:${gi}`);
     }),
-    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "ss-w-mo-more", onClick: () => setShown((n) => n + COMPACT_PAGE), children: [
+    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "ss-w-mo-more", onClick: () => {
+      setFocusIndex(shown);
+      setShown((n) => n + COMPACT_PAGE);
+    }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: ui?.showMore ? ui.showMore(Math.min(COMPACT_PAGE, hidden)) : `Show ${Math.min(COMPACT_PAGE, hidden)} more` }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-mo-more-chev", "aria-hidden": "true" })
     ] }) : null,
@@ -8601,6 +8616,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mol-col { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); text-align: center; overflow-wrap: break-word; min-width: 0; }
 .ss-w-mol-comp { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding-top: 4px; }
 .ss-w-mol-row { padding: 6px 0; border-bottom: 1px dashed var(--ss-w-line); min-height: 48px; box-sizing: border-box; }
+.ss-w-mol-row:focus { outline: none; }
+.ss-w-mol-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; border-radius: 6px; }
+.ss-w-mol-tick { font-family: inherit; font-size: 9.5px; font-weight: 700; line-height: 1.1; }
+.ss-w-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 .ss-w-mol-group .ss-w-mol-row:last-child { border-bottom: none; }
 .ss-w-mol-fx { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: none; border: none; padding: 0; text-align: left; font: inherit; color: inherit; }
 .ss-w-mol-team { display: flex; align-items: center; gap: 5px; min-width: 0; }