refactor(ts): use AttrString for text instead of string (#2049)

eBay · Jan 23, 2024 · 658ef38 · 658ef38
1 parent e653d7e
commit 658ef38
Show file tree

Hide file tree

Showing 37 changed files with 129 additions and 105 deletions.
diff --git a/src/components/components/ebay-dialog-base/component.ts b/src/components/components/ebay-dialog-base/component.ts
@@ -1,6 +1,6 @@
 import * as keyboardTrap from "makeup-keyboard-trap";
 import * as screenReaderTrap from "makeup-screenreader-trap";
-import type { AttrClass } from "marko/tags-html";
+import type { AttrClass, AttrString } from "marko/tags-html";
 import * as bodyScroll from "../../../common/body-scroll";
 import * as eventUtils from "../../../common/event-utils";
 import transition from "../../../common/transition";
@@ -17,9 +17,9 @@ interface DialogBaseInput extends Omit<Marko.Input<"div">, `on${string}`> {
         }
     >;
     "class-prefix"?: string;
-    "close-button-text"?: string;
+    "close-button-text"?: AttrString;
     "close-button-class"?: AttrClass;
-    "a11y-close-text"?: string;
+    "a11y-close-text"?: AttrString;
     "close-button"?: Marko.Renderable;
     "is-modal"?: boolean;
     "ignore-escape"?: boolean;
@@ -42,7 +42,7 @@ interface DialogBaseInput extends Omit<Marko.Input<"div">, `on${string}`> {
     focus?: string;
     prevButton?: WithNormalizedProps<
         Omit<Marko.Input<"button">, `on${string}`> & {
-            "a11y-text"?: string;
+            "a11y-text"?: AttrString;
         }
     >;
     "on-open"?: (event: Event) => void;

diff --git a/src/components/components/ebay-notice-base/component.ts b/src/components/components/ebay-notice-base/component.ts
@@ -1,3 +1,4 @@
+import type { AttrString } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../../global";
 
 interface NoticeBaseInput
@@ -12,15 +13,15 @@ interface NoticeBaseInput
     "prefix-class"?: string;
     root?: Marko.Renderable;
     "no-a11y-label"?: boolean;
-    "a11y-role-description"?: string;
+    "a11y-role-description"?: AttrString;
     icon?: "none";
     "icon-class"?: string;
     "header-root"?: Marko.Renderable;
-    "a11y-text"?: string;
-    "a11y-icon-text"?: string;
+    "a11y-text"?: AttrString;
+    "a11y-icon-text"?: AttrString;
     "main-root"?: Marko.Renderable;
     footer?: Marko.Renderable;
-    "a11y-dismiss-text"?: string;
+    "a11y-dismiss-text"?: AttrString;
     title?: Marko.Input<"title"> & {
         as?: Marko.Renderable;
     };

diff --git a/src/components/components/ebay-tooltip-overlay/component-browser.ts b/src/components/components/ebay-tooltip-overlay/component-browser.ts
@@ -1,4 +1,4 @@
-import type { AttrClass } from "marko/tags-html";
+import type { AttrClass, AttrString } from "marko/tags-html";
 import { typeRoles } from "./constants";
 import type { WithNormalizedProps } from "../../../global";
 
@@ -15,7 +15,7 @@ interface TooltipOverlayInput {
     id?: string;
     type: keyof typeof typeRoles;
     content?: Marko.AttrTag<Marko.Input<"span">>;
-    "a11y-close-text"?: string;
+    "a11y-close-text"?: AttrString;
     footer?: Marko.AttrTag<
         Marko.Renderable & {
             class?: AttrClass;

diff --git a/src/components/ebay-3d-viewer/component.ts b/src/components/ebay-3d-viewer/component.ts
@@ -1,16 +1,16 @@
-import type { AttrClass } from "marko/tags-html";
+import type { AttrClass, AttrString } from "marko/tags-html";
 import { CDNLoader } from "../../common/cdn";
 import type { WithNormalizedProps } from "../../global";
 
 interface ViewerInput {
     "cdn-url"?: string;
     version?: string;
     class?: AttrClass;
-    "a11y-text"?: string;
+    "a11y-text"?: AttrString;
     src?: string;
-    "error-text"?: string;
-    "a11y-start-text"?: string;
-    "a11y-load-text"?: string;
+    "error-text"?: AttrString;
+    "a11y-start-text"?: AttrString;
+    "a11y-load-text"?: AttrString;
     // TODO: import types from @google/model-viewer instead of
     // listing manually from https://modelviewer.dev/docs
     poster?: string;

diff --git a/src/components/ebay-alert-dialog/index.marko b/src/components/ebay-alert-dialog/index.marko
@@ -1,8 +1,9 @@
 import type { Input as BaseInput } from "<ebay-dialog-base>";
 import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
 
 static interface AlertDialogInput extends Omit<BaseInput, `on${string}`> {
-    "confirm-text"?: string;
+    "confirm-text"?: AttrString;
     "on-open"?: () => void;
     "on-close"?: () => void;
     "on-confirm"?: () => void;

diff --git a/src/components/ebay-avatar/index.marko b/src/components/ebay-avatar/index.marko
@@ -1,13 +1,14 @@
 import { processHtmlAttributes } from "../../common/html-attributes";
 import { getColorForText } from "./util";
 import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
 
 static type Size = 32 | 40 | 48 | 56 | 64 | 96 | 128;
 
 static interface AvatarInput extends Omit<Marko.Input<"div">, `on${string}`> {
     username?: string;
     color?: string;
-    "a11y-text"?: string;
+    "a11y-text"?: AttrString;
     size?: Size | `${Size}`;
     img?: Marko.AttrTag<Omit<Marko.Input<"img">, `on${string}`>>;
 }

diff --git a/src/components/ebay-breadcrumbs/component.ts b/src/components/ebay-breadcrumbs/component.ts
@@ -1,13 +1,13 @@
 import * as eventUtils from "../../common/event-utils";
 import { getMaxWidth } from "../../common/dom";
-import type { AttrClass } from "marko/tags-html";
+import type { AttrClass, AttrString } from "marko/tags-html";
 import type { MenuEvent } from "../ebay-menu/component";
 import type { WithNormalizedProps } from "../../global";
 
 interface BreadcrumbsInput extends Omit<Marko.Input<"nav">, `on${string}`> {
     "a11y-heading-tag"?: keyof Marko.NativeTags;
-    "a11y-heading-text"?: string;
-    "a11y-menu-button-text"?: string;
+    "a11y-heading-text"?: AttrString;
+    "a11y-menu-button-text"?: AttrString;
     class?: AttrClass;
     items: Marko.RepeatableAttrTag<
         Marko.Input<"a"> | (Marko.Input<"button"> & { href: never })

diff --git a/src/components/ebay-button/index.marko b/src/components/ebay-button/index.marko
@@ -1,3 +1,4 @@
+import type { AttrString } from "marko/tags-html";
 import { processHtmlAttributes } from "../../common/html-attributes"
 import type { WithNormalizedProps } from "../../global";
 
@@ -24,8 +25,8 @@ export interface ButtonInput extends Omit<Marko.Input<"button">, `on${string}`>
     "fixed-height"?: boolean;
     truncate?: boolean;
     split?: string;
-    "a11y-text"?: string;
-    "aria-label"?: string;
+    "a11y-text"?: AttrString;
+    "aria-label"?: AttrString;
     "on-click"?: (event: ButtonEvent<MouseEvent>) => void;
     "on-escape"?: (event: ButtonEvent<KeyboardEvent>) => void;
     "on-focus"?: (event: ButtonEvent<FocusEvent>) => void;

diff --git a/src/components/ebay-calendar/component.ts b/src/components/ebay-calendar/component.ts
@@ -1,3 +1,4 @@
+import type { AttrString } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../global";
 import {
     dateArgToISO,
@@ -29,12 +30,12 @@ interface CalendarInput {
     "disable-list"?: (Date | number | string)[];
     "link-builder"?: (iso: string) => string | false | null | undefined;
     "get-a11y-show-month-text"?: (monthName: string) => string;
-    "a11y-selected-text"?: string;
-    "a11y-range-start-text"?: string;
-    "a11y-in-range-text"?: string;
-    "a11y-range-end-text"?: string;
-    "a11y-today-text"?: string;
-    "a11y-disabled-text"?: string;
+    "a11y-selected-text"?: AttrString;
+    "a11y-range-start-text"?: AttrString;
+    "a11y-in-range-text"?: AttrString;
+    "a11y-range-end-text"?: AttrString;
+    "a11y-today-text"?: AttrString;
+    "a11y-disabled-text"?: AttrString;
     "a11y-separator"?: string;
     "on-select"?: (event: { iso: DayISO }) => void;
     "on-focus"?: (event: { iso: DayISO }) => void;

diff --git a/src/components/ebay-calendar/index.marko b/src/components/ebay-calendar/index.marko
@@ -83,10 +83,10 @@ $ var monthDates = [...Array(numMonths)].map((_, i) => component.getMonthDate(st
                                     $ var isRangeEnd = dayISO === state.rangeEnd;
                                     $ var isDisabled = component.isDisabled(dayISO);
                                     $ var a11yTexts = [""];
-                                    $ if (isSelected) a11yTexts.push(a11ySelectedText);
-                                    $ if (isRangeStart) a11yTexts.push(a11yRangeStartText);
-                                    $ if (!isRangeStart && !isRangeEnd && isInRange) a11yTexts.push(a11yInRangeText);
-                                    $ if (isRangeEnd) a11yTexts.push(a11yRangeEndText);
+                                    $ if (a11ySelectedText && isSelected) a11yTexts.push(a11ySelectedText);
+                                    $ if (a11yRangeStartText && isRangeStart) a11yTexts.push(a11yRangeStartText);
+                                    $ if (a11yInRangeText && !isRangeStart && !isRangeEnd && isInRange) a11yTexts.push(a11yInRangeText);
+                                    $ if (a11yRangeEndText && isRangeEnd) a11yTexts.push(a11yRangeEndText);
 
                                     <td class={
                                             "calendar__cell--selected": isSelected,
@@ -111,8 +111,8 @@ $ var monthDates = [...Array(numMonths)].map((_, i) => component.getMonthDate(st
                                             </button>
                                         </if>
                                         <else>
-                                            $ if (isToday) a11yTexts.push(a11yTodayText);
-                                            $ if (isDisabled) a11yTexts.push(a11yDisabledText);
+                                            $ if (a11yTodayText && isToday) a11yTexts.push(a11yTodayText);
+                                            $ if (a11yDisabledText && isDisabled) a11yTexts.push(a11yDisabledText);
                                             $ var link = !isDisabled && linkBuilder && linkBuilder(dayISO);
                                             <${link ? "a" : "span"}
                                                 class={

diff --git a/src/components/ebay-carousel/component.ts b/src/components/ebay-carousel/component.ts
@@ -1,5 +1,5 @@
 import focusables from "makeup-focusables";
-import type { AttrClass, AttrStyle } from "marko/tags-html";
+import type { AttrClass, AttrString, AttrStyle } from "marko/tags-html";
 // TODO check carousel
 import { resizeUtil } from "../../common/event-utils";
 import { processHtmlAttributes } from "../../common/html-attributes";
@@ -34,10 +34,10 @@ interface CarouselInput {
     "no-peek"?: boolean;
     class?: AttrClass;
     style?: AttrStyle;
-    "a11y-previous-text"?: string;
-    "a11y-next-text"?: string;
-    "a11y-pause-text"?: string;
-    "a11y-play-text"?: string;
+    "a11y-previous-text"?: AttrString;
+    "a11y-next-text"?: AttrString;
+    "a11y-pause-text"?: AttrString;
+    "a11y-play-text"?: AttrString;
     "aria-roledescription"?: string;
     "on-move"?: (event: { visibleIndexes: number[] }) => void;
     "on-scroll"?: (event: { index: number }) => void;

diff --git a/src/components/ebay-character-count/component.ts b/src/components/ebay-character-count/component.ts
@@ -1,3 +1,4 @@
+import type { AttrString } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../global";
 
 export interface CharacterCountEvent {
@@ -9,7 +10,7 @@ interface CharacterCountInput extends Omit<Marko.Input<"span">, `on${string}`> {
     renderBody?: Marko.Body;
     value?: string | number;
     max: number;
-    "clipped-text"?: string;
+    "clipped-text"?: AttrString;
     "on-change"?: (event?: CharacterCountEvent) => void;
 }
 

diff --git a/src/components/ebay-confirm-dialog/index.marko b/src/components/ebay-confirm-dialog/index.marko
@@ -1,9 +1,10 @@
 import type { Input as BaseInput } from "<ebay-dialog-base>";
 import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
 
 static interface ConfirmDialogInput extends Omit<BaseInput, `on${string}`> {
-    "reject-text"?: string;
-    "confirm-text"?: string;
+    "reject-text"?: AttrString;
+    "confirm-text"?: AttrString;
     "on-open"?: () => void;
     "on-reject"?: () => void;
     "on-confirm"?: () => void;

diff --git a/src/components/ebay-date-textbox/component.ts b/src/components/ebay-date-textbox/component.ts
@@ -1,6 +1,7 @@
 import Expander from "makeup-expander";
 import { toISO, type DayISO, dateArgToISO } from "../ebay-calendar/date-utils";
 import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
 
 const MIN_WIDTH_FOR_DOUBLE_PANE = 600;
 
@@ -16,11 +17,11 @@ interface DateTextboxInput {
     "input-placeholder-text"?: string | [string, string];
     "collapse-on-select"?: boolean;
     "get-a11y-show-month-text"?: (monthName: string) => string;
-    "a11y-open-popover-text"?: string;
-    "a11y-selected-text"?: string;
-    "a11y-range-start-text"?: string;
-    "a11y-in-range-text"?: string;
-    "a11y-range-end-text"?: string;
+    "a11y-open-popover-text"?: AttrString;
+    "a11y-selected-text"?: AttrString;
+    "a11y-range-start-text"?: AttrString;
+    "a11y-in-range-text"?: AttrString;
+    "a11y-range-end-text"?: AttrString;
     "a11y-separator"?: string;
     "on-change"?: (
         event:

diff --git a/src/components/ebay-drawer-dialog/component.ts b/src/components/ebay-drawer-dialog/component.ts
@@ -1,11 +1,12 @@
+import type { AttrString } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../global";
 import DialogBase, {
     type Input as BaseInput,
 } from "../components/ebay-dialog-base/component";
 
 interface DrawerDialogInput extends BaseInput {
-    "a11y-maximize-text"?: string;
-    "a11y-minimize-text"?: string;
+    "a11y-maximize-text"?: AttrString;
+    "a11y-minimize-text"?: AttrString;
     "no-handle"?: boolean;
     expanded?: boolean;
     "on-expanded"?: () => void;

diff --git a/src/components/ebay-fake-menu-button/component.ts b/src/components/ebay-fake-menu-button/component.ts
@@ -6,17 +6,18 @@ import type {
     Item as FakeMenuItem,
 } from "../ebay-fake-menu/component";
 import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
 
 interface FakeMenuButtonInput extends Omit<Marko.Input<"span">, `on${string}`> {
-    text?: string;
+    text?: AttrString;
     size?: "none" | "large";
     "prefix-id"?: string;
     variant?: "overflow" | "form" | "button" | "icon";
     priority?: "primary" | "secondary" | "delete" | "tertiary" | "none";
     borderless?: boolean;
     transparent?: boolean;
     icon?: Marko.Renderable;
-    "a11y-text"?: string;
+    "a11y-text"?: AttrString;
     disabled?: boolean;
     "no-toggle-icon"?: boolean;
     label?: { renderBody?: Marko.Body };

diff --git a/src/components/ebay-filter-menu-button/component.ts b/src/components/ebay-filter-menu-button/component.ts
@@ -7,6 +7,7 @@ import setupMenu, {
 } from "../../common/menu-utils";
 import type { FilterMenuEvent } from "../ebay-filter-menu/component";
 import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
 
 export interface FilterMenuButtonEvent {
     el?: Element;
@@ -19,20 +20,20 @@ export interface FilterMenuButtonEvent {
 interface FilterMenuButtonInput
     extends BaseMenuInput,
         Omit<Marko.Input<"span">, `on${string}`> {
-    text?: string;
-    "footer-text"?: string;
-    "a11y-footer-text"?: string;
+    text?: AttrString;
+    "footer-text"?: AttrString;
+    "a11y-footer-text"?: AttrString;
     footer?: WithNormalizedProps<
         Omit<Marko.Input<"button">, `on${string}`> & {
-            "a11y-footer-text"?: string;
+            "a11y-footer-text"?: AttrString;
         }
     >;
     variant?: "form";
     "form-name"?: string;
     "form-action"?: string;
     "form-method"?: string;
     disabled?: boolean;
-    "a11y-text"?: string;
+    "a11y-text"?: AttrString;
     "on-expand"?: () => void;
     "on-change"?: (event: FilterMenuButtonEvent) => void;
     "on-collapse"?: (event: FilterMenuButtonEvent) => void;

diff --git a/src/components/ebay-filter-menu/component.ts b/src/components/ebay-filter-menu/component.ts
@@ -8,6 +8,7 @@ import setupMenu, {
 } from "../../common/menu-utils";
 import type { RadioEvent } from "../ebay-radio/component-browser";
 import type { WithNormalizedProps } from "../../global";
+import type { AttrString } from "marko/tags-html";
 
 export interface FilterMenuEvent<T extends Event = Event> {
     el?: Element;
@@ -26,11 +27,11 @@ interface FilterMenuInput
     "form-name"?: string;
     "form-action"?: string;
     "form-method"?: string;
-    "footer-text"?: string;
-    "a11y-footer-text"?: string;
+    "footer-text"?: AttrString;
+    "a11y-footer-text"?: AttrString;
     footer?: WithNormalizedProps<
         Omit<Marko.Input<"button">, `on${string}`> & {
-            "a11y-footer-text"?: string;
+            "a11y-footer-text"?: AttrString;
         }
     >;
     "render-body"?: Marko.Body;

diff --git a/src/components/ebay-filter/component.ts b/src/components/ebay-filter/component.ts
@@ -1,11 +1,12 @@
+import type { AttrString } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../global";
 
 export interface FilterInput
     extends Omit<Marko.Input<"button">, `on${string}`> {
     selected?: boolean;
     href?: string;
     "use-aria-pressed"?: boolean;
-    "a11y-selected-text"?: string;
+    "a11y-selected-text"?: AttrString;
     "on-click"?: (event: {
         selected: boolean;
         originalEvent: MouseEvent;

diff --git a/src/components/ebay-icon-button/component-browser.ts b/src/components/ebay-icon-button/component-browser.ts
@@ -1,3 +1,4 @@
+import type { AttrString } from "marko/tags-html";
 import * as eventUtils from "../../common/event-utils";
 import type { WithNormalizedProps } from "../../global";
 
@@ -8,7 +9,7 @@ interface IconButtonInput extends Omit<Marko.Input<"button">, `on${string}`> {
     transparent?: boolean;
     size?: "small" | "large";
     "partially-disabled"?: boolean;
-    "badge-aria-label"?: string;
+    "badge-aria-label"?: AttrString;
     "on-click"?: (event: { originalEvent: MouseEvent }) => void;
     "on-escape"?: (event: { originalEvent: KeyboardEvent }) => void;
     "on-focus"?: (event: { originalEvent: FocusEvent }) => void;