fix: Make truncated filename tooltip keyboard accessible (file-token-group) by Who-is-PS · Pull Request #4157 · cloudscape-design/components

Who-is-PS · 2026-01-05T18:09:48Z

Description

Adds keyboard accessibility to the file token tooltip. The filename container is now focusable (tabIndex={0}) with onFocus/onBlur handlers, allowing keyboard users to view the full filename when text is truncated.

Related links, issue #, if available:
AWSUI-61600

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-01-05T18:19:31Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.19%. Comparing base (fb474aa) to head (5731bc5).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4157      +/-   ##
==========================================
- Coverage   97.19%   97.19%   -0.01%     
==========================================
  Files         886      886              
  Lines       25996    26005       +9     
  Branches     9415     9418       +3     
==========================================
+ Hits        25267    25275       +8     
- Misses        723      724       +1     
  Partials        6        6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

src/file-token-group/file-token.tsx

Who-is-PS · 2026-02-06T07:20:06Z

Received translations from i18n package (CR-252051089) and merged them into main of AWS-UI-Components-I18n

avinashbot · 2026-02-06T13:58:06Z

src/file-token-group/file-token.tsx

+    checkTruncation();
+
+    // Check on window resize
+    window.addEventListener('resize', checkTruncation);


There are things other than a full window resize that can cause the truncation to trigger (opening panels, content changes, layout updates) so a ResizeObserver (we have a useResizeObserver) might be more "correct" here. But I think it's fine — the max width of the token is 230px, it's probably very unlikely that the component will be placed in a layout that narrow, so there's no need to pay that performance tax unless we have to.

I would recommend to switch to the resize observer as it has a better performance than the resize event

Done! Switched to useResizeObserver to observe the filename container element directly. This gives us better performance and also handles container-level resizes (panels, layout changes) that the window resize event would miss.

georgylobko · 2026-02-06T16:59:03Z

src/file-token-group/__tests__/file-token-group.test.tsx

+    const wrapper = render({ items: [{ file: file3 }], alignment: 'horizontal' });
+
+    fireEvent.focus(wrapper.findFileToken(1)!.findFileName().getElement());
+    expect(document.querySelector(`.${tooltipStyles.root}`)).not.toBeNull();


should you check the content of the tooltip instead of 'not null'?

Good point! Updated the assertions to verify the tooltip displays the correct file name.

georgylobko · 2026-02-06T18:26:56Z

src/file-token-group/__tests__/file-token-group.test.tsx


-    expect(wrapper.findFileToken(1)!.findRemoveButton().getElement()).toHaveFocus();
+    // After dismissal, focus moves to the filename container (first focusable element in the token)
+    const fileNameElement = wrapper.findFileToken(1)!.findFileName().getElement().parentElement;


[non-blocking]: I'd be easier to search by the container classname - file-name-button

Done! Updated to use the file-name-container classname selector instead of parentElement.

georgylobko · 2026-02-06T18:29:12Z

src/file-token-group/file-token.tsx

          >
            <InternalSpaceBetween direction="vertical" size="xxxs">
              <div
+                className={styles['file-name-button']}


[nit] "button" in the classname is a bit misleading. I'd suggest to rename it to file-name-container instead

Done! Renamed to file-name-container

georgylobko · 2026-02-09T09:22:11Z

src/file-token-group/__tests__/file-token-group.test.tsx


    fireEvent.mouseEnter(wrapper.findFileToken(1)!.findFileName().getElement());
-    expect(document.querySelector(`.${tooltipStyles.root}`)).not.toBeNull();
+    expect(document.querySelector(`.${tooltipStyles.root}`)).toHaveTextContent(file3.name);


[non-blocking, could be a follow-up] Should you use test wrapper instead such as createWrapper().findTooltip()?

fix: make file token tooltip keyboard accessible

9afbafd

Who-is-PS deployed to dev-pages-react18 January 5, 2026 18:19 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react16 January 5, 2026 18:19 — with GitHub Actions View deployment

Who-is-PS marked this pull request as ready for review January 5, 2026 18:37

Who-is-PS requested a review from a team as a code owner January 5, 2026 18:37

Who-is-PS requested review from a team, amanabiy, ernst-dev and georgylobko and removed request for a team, amanabiy and ernst-dev January 5, 2026 18:37

Who-is-PS added 3 commits January 8, 2026 17:57

fix: Add button to file-token-group which is focused on tab key

4b5dac8

fix: Added fileName in i18n and file token

504a03f

fix: Use conditional role for truncated file names

1570d42

avinashbot requested changes Jan 30, 2026

View reviewed changes

src/file-token-group/file-token.tsx Show resolved Hide resolved

fix: Add aria label to div for toltip

7cb9709

Who-is-PS deployed to dev-pages-react16 January 30, 2026 15:07 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react18 January 30, 2026 15:07 — with GitHub Actions View deployment

Merge branch 'main' into dev-v3-philosr-file-token-group-fix

a1c0306

Who-is-PS deployed to dev-pages-react18 February 5, 2026 16:55 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react16 February 5, 2026 16:55 — with GitHub Actions View deployment

add translations for file token group

7eb5f35

Who-is-PS deployed to dev-pages-react18 February 5, 2026 17:05 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react16 February 5, 2026 17:05 — with GitHub Actions View deployment

Who-is-PS requested a review from avinashbot February 6, 2026 09:56

avinashbot reviewed Feb 6, 2026

View reviewed changes

avinashbot previously approved these changes Feb 6, 2026

View reviewed changes

georgylobko reviewed Feb 6, 2026

View reviewed changes

feedback

db5b771

Who-is-PS dismissed avinashbot’s stale review via db5b771 February 8, 2026 18:40

Who-is-PS deployed to dev-pages-react18 February 8, 2026 18:50 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react16 February 8, 2026 18:50 — with GitHub Actions View deployment

update test

ceab68e

Who-is-PS deployed to dev-pages-react16 February 9, 2026 07:23 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react18 February 9, 2026 07:23 — with GitHub Actions View deployment

Who-is-PS requested review from avinashbot and georgylobko February 9, 2026 08:38

georgylobko approved these changes Feb 9, 2026

View reviewed changes

Merge branch 'main' into dev-v3-philosr-file-token-group-fix

cfdc954

Who-is-PS enabled auto-merge February 9, 2026 10:31

Who-is-PS deployed to dev-pages-react18 February 9, 2026 10:40 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react16 February 9, 2026 10:40 — with GitHub Actions View deployment

Merge branch 'main' into dev-v3-philosr-file-token-group-fix

5731bc5

Who-is-PS deployed to dev-pages-react16 February 9, 2026 13:50 — with GitHub Actions View deployment

Who-is-PS deployed to dev-pages-react18 February 9, 2026 13:50 — with GitHub Actions View deployment

Who-is-PS added this pull request to the merge queue Feb 9, 2026

Merged via the queue into main with commit 8ae8f78 Feb 9, 2026
50 checks passed

Who-is-PS deleted the dev-v3-philosr-file-token-group-fix branch February 9, 2026 14:22

Conversation

Who-is-PS commented Jan 5, 2026

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Who-is-PS commented Feb 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Jan 5, 2026 •

edited

Loading