@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/src/Timestamp/Timestamp.doc.mjs

@@ -45,11 +45,17 @@ export const docs = {
         'Whether to show a tooltip with the full date/time on hover when displaying relative time.',
       default: 'true',
     },
+    {
+      name: 'tooltipEntries',
+      type: 'ReadonlyArray<{timezoneID?: string; format?: TimestampTooltipFormat; label?: string}>',
+      description:
+        "Lines to show in the hover tooltip, so one instant can be read in several time zones and/or formats at once. Each entry is one line, in the order given. Omit timezoneID (or pass 'local') for the viewer's own zone; format defaults to the full absolute style and also accepts 'full' alongside every non-relative TimestampFormat. Configuring entries also attaches the tooltip to absolute formats, which otherwise have none.",
+    },
     {
       name: 'isTimezoneShown',
       type: 'boolean',
       description:
-        'Whether to append the timezone abbreviation. Applies to date_time, time, system_date_time, and system_time formats.',
+        'Whether to append the timezone abbreviation to the visible text. Applies to the date_time and time formats; system_* formats stay machine-readable and never carry one. Use tooltipEntries to control the tooltip\'s time zones.',
       default: 'false',
     },
     {
@@ -94,14 +100,19 @@ export const docs = {
       {guidance: true, description: 'Use the auto format in feeds and lists so recent items show "2 hours ago" and older items show the full date automatically.'},
       {guidance: true, description: 'Keep formatting consistent within the same list or table; mixing relative and absolute timestamps in the same column confuses scanning.'},
       {guidance: true, description: 'Enable isTimezoneShown when the audience spans multiple time zones, like a global team calendar or audit log.'},
+      {guidance: true, description: 'Use tooltipEntries when readers must compare zones, such as an incident log where the reader\'s time and the event\'s origin zone both matter.'},
+      {guidance: true, description: 'Label every entry once a tooltip shows more than one zone; a bare abbreviation is not always recognizable (Tokyo renders as "GMT+9", not "JST").'},
       {guidance: true, description: 'Use isLive for active dashboards or real-time feeds so the relative time stays accurate without a page refresh.'},
       {guidance: false, description: 'Don\'t display raw Unix timestamps or ISO strings to users; always pass them through Timestamp to get a human-readable format.'},
       {guidance: false, description: 'Avoid system_date or system_time formats in user-facing UI; they are meant for developer tools, logs, and machine-readable contexts.'},
       {guidance: false, description: 'Don\'t disable the tooltip on relative timestamps; users expect to hover for the full date when they see "3 hours ago".'},
+      {guidance: false, description: 'Don\'t stack many zones into one tooltip; it is capped at 300px wide and long labelled lines wrap. Two or three entries read well.'},
+      {guidance: false, description: 'Don\'t pass a fixed-offset abbreviation like "EST" as timezoneID; it is a valid identifier but never observes daylight saving, so it reads an hour wrong for half the year. Use the region id, "America/New_York".'},
     ],
     anatomy: [
       {name: 'Formatted text', required: true, description: 'The rendered date, time, or relative label like "2 hours ago" or "Mar 21, 2025".'},
-      {name: 'Tooltip', required: false, description: 'A hover card showing the full absolute date and time when the display is relative.'},
+      {name: 'Tooltip', required: false, description: 'A hover card showing the full absolute date and time when the display is relative, or the lines configured via tooltipEntries.'},
+      {name: 'Tooltip entry', required: false, description: 'One line of the tooltip: an optional label beside the instant rendered in one time zone and format.'},
     ],
   },
 };
@@ -113,7 +124,10 @@ export const docsZh = {
     format: "\u663e\u793a\u683c\u5f0f\u3002'relative' \u663e\u793a '2\u5c0f\u65f6\u524d'\uff0c'date' \u663e\u793a\u65e5\u671f\uff0c'date_long' \u663e\u793a\u957f\u6708\u4efd\u65e5\u671f\uff0c'date_weekday' \u663e\u793a\u661f\u671f+\u65e5\u671f\uff0c'auto' \u6839\u636e\u65f6\u95f4\u8fdc\u8fd1\u81ea\u52a8\u5207\u6362\u3002",
     autoThreshold: "auto \u683c\u5f0f\u4ece\u76f8\u5bf9\u65f6\u95f4\u5207\u6362\u5230 date_time \u7684\u9608\u503c\u79d2\u6570\u3002",
     hasTooltip: '\u60ac\u505c\u65f6\u662f\u5426\u663e\u793a\u5305\u542b\u5b8c\u6574\u65e5\u671f/\u65f6\u95f4\u7684\u5de5\u5177\u63d0\u793a\uff08\u76f8\u5bf9\u65f6\u95f4\u6a21\u5f0f\uff09\u3002',
-    isTimezoneShown: '\u662f\u5426\u9644\u52a0\u65f6\u533a\u7f29\u5199\u3002',
+    tooltipEntries:
+      '\u5de5\u5177\u63d0\u793a\u4e2d\u8981\u663e\u793a\u7684\u884c\uff0c\u7528\u4e8e\u540c\u65f6\u5c55\u793a\u591a\u4e2a\u65f6\u533a\u548c/\u6216\u591a\u79cd\u683c\u5f0f\u3002\u6bcf\u9879\u4e3a\u4e00\u884c\uff0c\u6309\u987a\u5e8f\u6e32\u67d3\uff1b\u7701\u7565 timezoneID\uff08\u6216\u4f20\u5165 \'local\'\uff09\u8868\u793a\u67e5\u770b\u8005\u672c\u5730\u65f6\u533a\u3002\u914d\u7f6e\u540e\uff0c\u7edd\u5bf9\u65f6\u95f4\u683c\u5f0f\u4e5f\u4f1a\u663e\u793a\u5de5\u5177\u63d0\u793a\u3002',
+    isTimezoneShown:
+      '\u662f\u5426\u5728\u53ef\u89c1\u6587\u672c\u540e\u9644\u52a0\u65f6\u533a\u7f29\u5199\uff08\u4ec5 date_time \u548c time\uff1bsystem_* \u683c\u5f0f\u4e0d\u9644\u52a0\uff09\u3002',
     isLive: '\u76f8\u5bf9\u65f6\u95f4\u662f\u5426\u5b9e\u65f6\u66f4\u65b0\u3002',
     type: '\u6765\u81ea Text \u7684\u8bed\u4e49\u6587\u672c\u7c7b\u578b\u3002',
     size: '\u663e\u5f0f\u5b57\u4f53\u5927\u5c0f\u8986\u76d6\u3002',
@@ -127,21 +141,26 @@ export const docsZh = {
       {guidance: true, description: 'Use the auto format in feeds and lists so recent items show "2 hours ago" and older items show the full date automatically.'},
       {guidance: true, description: 'Keep formatting consistent within the same list or table; mixing relative and absolute timestamps in the same column confuses scanning.'},
       {guidance: true, description: 'Enable isTimezoneShown when the audience spans multiple time zones, like a global team calendar or audit log.'},
+      {guidance: true, description: 'Use tooltipEntries when readers must compare zones, such as an incident log where the reader\'s time and the event\'s origin zone both matter.'},
+      {guidance: true, description: 'Label every entry once a tooltip shows more than one zone; a bare abbreviation is not always recognizable (Tokyo renders as "GMT+9", not "JST").'},
       {guidance: true, description: 'Use isLive for active dashboards or real-time feeds so the relative time stays accurate without a page refresh.'},
       {guidance: false, description: 'Don\'t display raw Unix timestamps or ISO strings to users; always pass them through Timestamp to get a human-readable format.'},
       {guidance: false, description: 'Avoid system_date or system_time formats in user-facing UI; they are meant for developer tools, logs, and machine-readable contexts.'},
       {guidance: false, description: 'Don\'t disable the tooltip on relative timestamps; users expect to hover for the full date when they see "3 hours ago".'},
+      {guidance: false, description: 'Don\'t stack many zones into one tooltip; it is capped at 300px wide and long labelled lines wrap. Two or three entries read well.'},
+      {guidance: false, description: 'Don\'t pass a fixed-offset abbreviation like "EST" as timezoneID; it is a valid identifier but never observes daylight saving, so it reads an hour wrong for half the year. Use the region id, "America/New_York".'},
     ],
     anatomy: [
       {name: 'Formatted text', required: true, description: 'The rendered date, time, or relative label like "2 hours ago" or "Mar 21, 2025".'},
-      {name: 'Tooltip', required: false, description: 'A hover card showing the full absolute date and time when the display is relative.'},
+      {name: 'Tooltip', required: false, description: 'A hover card showing the full absolute date and time when the display is relative, or the lines configured via tooltipEntries.'},
+      {name: 'Tooltip entry', required: false, description: 'One line of the tooltip: an optional label beside the instant rendered in one time zone and format.'},
     ],
   },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
-  description: 'formatted timestamp with relative/absolute/auto modes, live updates, timezone display',
+  description: 'formatted timestamp with relative/absolute/auto modes, live updates, timezone display, multi-zone tooltip',
   usage: {
     description:
       'Timestamp formats a date or time into readable text. Use for creation dates, update times, or schedules; relative for recency, absolute for precision, auto to switch automatically.',
@@ -149,10 +168,14 @@ export const docsDense = {
       {guidance: true, description: 'Auto format in feeds and lists; recent shows relative, older shows date_time.'},
       {guidance: true, description: 'Consistent formatting within the same list or table column.'},
       {guidance: true, description: 'isTimezoneShown for multi-timezone audiences.'},
+      {guidance: true, description: 'tooltipEntries to compare zones when the reader time and event zone both matter.'},
+      {guidance: true, description: 'Label each entry once a tooltip shows more than one zone; a bare abbreviation is not always recognizable (Tokyo renders "GMT+9", not "JST").'},
       {guidance: true, description: 'isLive for dashboards so relative time stays current.'},
       {guidance: false, description: 'Don\'t show raw Unix timestamps or ISO strings; always use Timestamp.'},
       {guidance: false, description: 'Avoid system_* formats in user-facing UI; those are for dev tools and logs.'},
       {guidance: false, description: 'Don\'t disable tooltip on relative timestamps; users expect the full date on hover.'},
+      {guidance: false, description: 'Don\'t stack many zones in one tooltip; it caps at 300px and long labels wrap. Two or three read well.'},
+      {guidance: false, description: 'Don\'t use fixed-offset ids like "EST" for timezoneID; they skip DST. Use region ids like "America/New_York".'},
     ],
   },
   propDescriptions: {
@@ -160,7 +183,10 @@ export const docsDense = {
     format: "display mode: 'relative', 'auto', 'date', 'date_long', 'date_weekday', 'date_time', 'time', 'system_date', 'system_date_time', 'system_time'",
     autoThreshold: 'seconds threshold for auto relative\u2192date_time switch',
     hasTooltip: 'show full time tooltip on hover (relative mode)',
-    isTimezoneShown: 'append timezone abbreviation',
+    tooltipEntries:
+      "tooltip lines across zones/formats: [{timezoneID?, format?, label?}]; timezoneID omitted or 'local' = viewer zone, format defaults to 'full'; also enables the tooltip on absolute formats",
+    isTimezoneShown:
+      'append timezone abbreviation to visible text (date_time and time only)',
     isLive: 'live-update relative time',
     type: 'Text semantic type',
     size: 'font size override',

package/src/Timestamp/Timestamp.test.tsx

@@ -4,6 +4,7 @@ import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, act, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Timestamp} from './Timestamp';
+import {formatTooltipLines} from './tooltipEntries';
 
 describe('Timestamp', () => {
   beforeEach(() => {
@@ -487,4 +488,374 @@ describe('Timestamp', () => {
       expect(label).not.toContain('ago');
     });
   });
+
+  // --- Multi-zone / multi-format tooltip entries ---
+
+  describe('tooltipEntries', () => {
+    // A fixed instant that lands on a different calendar day in Tokyo, so a
+    // zone-blind implementation is visible in the output.
+    const VALUE = '2026-02-19T17:00:00Z';
+
+    const originalShowPopover = HTMLElement.prototype.showPopover;
+    const originalHidePopover = HTMLElement.prototype.hidePopover;
+
+    beforeEach(() => {
+      // The tooltip is lazy-loaded; real timers let the dynamic import and
+      // RTL's findBy* resolve (the outer beforeEach installs fake timers).
+      vi.useRealTimers();
+      HTMLElement.prototype.showPopover = vi.fn();
+      HTMLElement.prototype.hidePopover = vi.fn();
+    });
+
+    afterEach(() => {
+      HTMLElement.prototype.showPopover = originalShowPopover;
+      HTMLElement.prototype.hidePopover = originalHidePopover;
+    });
+
+    it('leaves the default tooltip as a single unwrapped line', async () => {
+      render(
+        <Timestamp
+          value={Date.now() / 1000 - 3600}
+          format="relative"
+          data-testid="ts"
+        />,
+      );
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      // No entries configured — the tooltip content stays the bare string it
+      // has always been, with no list wrapper introduced around it.
+      expect(layer.querySelector('dl')).toBeNull();
+
+      const normalize = (s: string) => s.replace(/\s+/g, ' ');
+      expect(normalize(layer.textContent ?? '')).toContain(
+        normalize(screen.getByTestId('ts').getAttribute('aria-label') ?? '\0'),
+      );
+    });
+
+    it('renders one tooltip line per configured entry', async () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="relative"
+          tooltipEntries={[
+            {label: 'Local'},
+            {timezoneID: 'UTC', label: 'UTC'},
+            {timezoneID: 'Asia/Tokyo', label: 'Tokyo'},
+          ]}
+        />,
+      );
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      expect(layer.querySelectorAll('dd')).toHaveLength(3);
+      expect(layer.textContent).toContain('Local');
+      expect(layer.textContent).toContain('UTC');
+      expect(layer.textContent).toContain('Tokyo');
+    });
+
+    it('renders each entry in the time zone it names', async () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="relative"
+          tooltipEntries={[
+            {timezoneID: 'UTC', format: 'system_date_time', label: 'UTC'},
+            {
+              timezoneID: 'Asia/Tokyo',
+              format: 'system_date_time',
+              label: 'Tokyo',
+            },
+          ]}
+        />,
+      );
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      const values = Array.from(layer.querySelectorAll('dd')).map(
+        el => el.textContent,
+      );
+      // Machine formats are locale- and host-timezone-independent, so these
+      // hold on any developer machine and on CI.
+      expect(values).toEqual(['2026-02-19 17:00:00', '2026-02-20 02:00:00']);
+    });
+
+    it('shows a tooltip for absolute formats once entries are configured', async () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="date_time"
+          tooltipEntries={[{timezoneID: 'UTC', label: 'UTC'}]}
+          data-testid="ts"
+        />,
+      );
+      // Without entries an absolute format has no tooltip at all; configuring
+      // entries must not be silently ignored.
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      expect(layer.textContent).toContain('UTC');
+      // ...and the anchor becomes keyboard-reachable, as it is for relative.
+      expect(screen.getByTestId('ts')).toHaveAttribute('tabindex', '0');
+    });
+
+    it('treats an empty entry list exactly like no configuration', () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="date_time"
+          tooltipEntries={[]}
+          data-testid="ts"
+        />,
+      );
+      // `hasTooltip` stays the only on/off switch — an empty array is not a
+      // second way to spell "off", and it must not widen the gate either.
+      expect(screen.getByTestId('ts')).not.toHaveAttribute('tabindex');
+    });
+
+    it('still honors hasTooltip={false} when entries are configured', () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="date_time"
+          hasTooltip={false}
+          tooltipEntries={[{timezoneID: 'UTC'}]}
+          data-testid="ts"
+        />,
+      );
+      expect(screen.getByTestId('ts')).not.toHaveAttribute('tabindex');
+    });
+
+    it('leaves the accessible name unchanged when entries are configured', async () => {
+      const value = Date.now() / 1000 - 3600;
+      const {unmount} = render(
+        <Timestamp value={value} format="relative" data-testid="a" />,
+      );
+      const before = screen.getByTestId('a').getAttribute('aria-label');
+      unmount();
+
+      render(
+        <Timestamp
+          value={value}
+          format="relative"
+          tooltipEntries={[{timezoneID: 'UTC', label: 'UTC'}]}
+          data-testid="b"
+        />,
+      );
+      // The accessible name stays the canonical absolute time in the viewer's
+      // own zone; the extra zones reach assistive tech through the tooltip's
+      // aria-describedby, not by being stuffed into the name.
+      expect(screen.getByTestId('b').getAttribute('aria-label')).toBe(before);
+    });
+
+    it('does not add an accessible name to absolute formats with entries', () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="date_time"
+          tooltipEntries={[{timezoneID: 'UTC'}]}
+          data-testid="ts"
+        />,
+      );
+      expect(screen.getByTestId('ts').getAttribute('aria-label')).toBeNull();
+    });
+
+    it('renders nothing for an unparseable value even with entries', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      try {
+        const {container} = render(
+          <Timestamp
+            value="not-a-date"
+            tooltipEntries={[{timezoneID: 'UTC', label: 'UTC'}]}
+          />,
+        );
+        // The invalid-value bail-out runs before any tooltip work, so there is
+        // no half-rendered tooltip anchored to nothing.
+        expect(container).toBeEmptyDOMElement();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    it('shows configured entries when auto resolves to an absolute format', async () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="auto"
+          autoThreshold={0}
+          tooltipEntries={[
+            {timezoneID: 'UTC', format: 'system_date_time', label: 'UTC'},
+          ]}
+          data-testid="ts"
+        />,
+      );
+      // autoThreshold={0} forces the absolute branch regardless of the clock.
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      expect(layer.textContent).toContain('2026-02-19 17:00:00');
+      expect(screen.getByTestId('ts')).toHaveAttribute('tabindex', '0');
+    });
+
+    it('accepts a unix-seconds value alongside entries', async () => {
+      render(
+        <Timestamp
+          value={Date.parse(VALUE) / 1000}
+          format="relative"
+          tooltipEntries={[
+            {timezoneID: 'UTC', format: 'system_date_time', label: 'UTC'},
+          ]}
+        />,
+      );
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      expect(layer.textContent).toContain('2026-02-19 17:00:00');
+    });
+
+    it('pairs exactly one label cell with one value cell per entry', async () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="relative"
+          tooltipEntries={[
+            {timezoneID: 'UTC', label: 'UTC'},
+            {timezoneID: 'Asia/Tokyo'},
+            {timezoneID: 'Europe/London', label: 'London'},
+          ]}
+        />,
+      );
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      // An unlabeled entry still emits its label cell, so the two-column grid
+      // stays aligned and the <dl> stays valid markup.
+      expect(layer.querySelectorAll('dt')).toHaveLength(3);
+      expect(layer.querySelectorAll('dd')).toHaveLength(3);
+      expect(layer.querySelectorAll('dt')[1].textContent).toBe('');
+    });
+
+    it('gives the tab stop back when entries are removed', () => {
+      const {rerender} = render(
+        <Timestamp
+          value={VALUE}
+          format="date_time"
+          tooltipEntries={[{timezoneID: 'UTC'}]}
+          data-testid="ts"
+        />,
+      );
+      expect(screen.getByTestId('ts')).toHaveAttribute('tabindex', '0');
+
+      rerender(<Timestamp value={VALUE} format="date_time" data-testid="ts" />);
+      // The widened gate is driven purely by entry presence, so dropping the
+      // prop must also drop the tab stop rather than stranding one.
+      expect(screen.getByTestId('ts')).not.toHaveAttribute('tabindex');
+    });
+
+    it('describes an absolute-format timestamp with its tooltip', async () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="date_time"
+          tooltipEntries={[{timezoneID: 'UTC', label: 'UTC'}]}
+          data-testid="ts"
+        />,
+      );
+      const layer = await screen.findByRole('tooltip', {hidden: true});
+      const el = screen.getByTestId('ts');
+      // An absolute format carries no aria-label, so aria-describedby is the
+      // only route the configured zones have to assistive tech.
+      expect(el.getAttribute('aria-label')).toBeNull();
+      await waitFor(() => {
+        expect(el.getAttribute('aria-describedby')).toBe(layer.id);
+      });
+      expect(layer.id).toBeTruthy();
+    });
+
+    it('leaves no tooltip and no description when hasTooltip is false', () => {
+      render(
+        <Timestamp
+          value={VALUE}
+          format="relative"
+          hasTooltip={false}
+          tooltipEntries={[{timezoneID: 'UTC', label: 'UTC'}]}
+          data-testid="ts"
+        />,
+      );
+      expect(
+        screen.queryByRole('tooltip', {hidden: true}),
+      ).not.toBeInTheDocument();
+      // No orphaned reference pointing at a tooltip that was never rendered.
+      expect(
+        screen.getByTestId('ts').getAttribute('aria-describedby'),
+      ).toBeNull();
+    });
+
+    it('does not crash on an unknown time zone', async () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      try {
+        render(
+          <Timestamp
+            value={VALUE}
+            format="relative"
+            tooltipEntries={[
+              {timezoneID: 'Not/AZone', format: 'system_date_time'},
+              {timezoneID: 'UTC', format: 'system_date_time'},
+            ]}
+          />,
+        );
+        const layer = await screen.findByRole('tooltip', {hidden: true});
+        const values = Array.from(layer.querySelectorAll('dd')).map(
+          el => el.textContent,
+        );
+        expect(values).toHaveLength(2);
+        expect(values[1]).toBe('2026-02-19 17:00:00');
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining('Not/AZone'));
+      } finally {
+        warn.mockRestore();
+      }
+    });
+  });
+
+  describe('one formatter behind both surfaces', () => {
+    // The rendered text and a tooltip line are two views of the same instant.
+    // They are meant to come from one formatter parameterized by zone, not two
+    // that happen to agree: a format added or reshaped on one surface and not
+    // the other is a silent drift, invisible until someone compares them.
+    // These assertions compare the two surfaces directly, so re-forking either
+    // one fails here. Locale- and timezone-agnostic: nothing is pinned to a
+    // literal, only the two paths to each other.
+    const VALUE = '2026-02-19T17:00:00Z';
+
+    const SHARED_FORMATS = [
+      'date',
+      'date_long',
+      'date_weekday',
+      'date_time',
+      'time',
+      'system_date',
+      'system_date_time',
+      'system_time',
+    ] as const;
+
+    it.each(SHARED_FORMATS)(
+      'renders %s identically as text and as a zone-less tooltip line',
+      format => {
+        render(
+          <Timestamp
+            value={VALUE}
+            format={format}
+            hasTooltip={false}
+            data-testid="ts"
+          />,
+        );
+        const [line] = formatTooltipLines(new Date(VALUE), [{format}]);
+        expect(line.value).toBe(screen.getByTestId('ts').textContent);
+      },
+    );
+
+    it('renders the full style identically as the aria-label and as a line', () => {
+      // 'full' is the one member with no visible-text counterpart — it backs
+      // the accessible name of a relative timestamp and the tooltip's default
+      // line. Those two must not drift apart either.
+      render(
+        <Timestamp
+          value={VALUE}
+          format="relative"
+          hasTooltip={false}
+          data-testid="ts"
+        />,
+      );
+      const [line] = formatTooltipLines(new Date(VALUE), [{format: 'full'}]);
+      expect(line.value).toBe(
+        screen.getByTestId('ts').getAttribute('aria-label'),
+      );
+    });
+  });
 });