WEBUI-1736: fix screen reader redundant and adjacent links [LTS-2025]#3251
Open
swarnadipa-dev wants to merge 5 commits into
Open
WEBUI-1736: fix screen reader redundant and adjacent links [LTS-2025]#3251swarnadipa-dev wants to merge 5 commits into
swarnadipa-dev wants to merge 5 commits into
Conversation
Apply WCAG H2 technique across all document listing views: - Combine thumbnail + title text into a single <a> element - Add alt property to nuxeo-document-thumbnail (via node_modules patch) so decorative images carry null alt text (alt="") - Remove width: calc(100% - 38px) from .ellipsis where thumbnail is now inside the link - Restructure grid card: thumbnailContainer moved inside <a class="title"> - Fix _computeTitle to not prepend doc title to Select checkbox label - Add aria-hidden to nuxeo-tooltip inside grid card link
…anges - Fix 2 failing _computeTitle tests in nuxeo-document-grid-thumbnail.test.js (method now returns only command.select, not doc.title prefix) - Add WCAG H2 DOM test suite to nuxeo-document-grid-thumbnail.test.js: thumbnail is inside <a>, img has alt="", tooltip has aria-hidden="true" - Add WCAG H2 template tests to 4 existing JS results test files using fetch+DOMParser to verify nuxeo-document-thumbnail[alt=""] is inside <a>: nuxeo-document-content, nuxeo-default-results, nuxeo-document-trash-content, nuxeo-document-publications - Create 6 new test files using fetch+DOMParser template inspection: nuxeo-default-search-results, nuxeo-trash-search-results, nuxeo-expired-search-results, nuxeo-assets-search-results, nuxeo-nxql-search-results (2 columns), nuxeo-home (3 sections)
- Use this.skip() instead of return in DOM tests where dom-if may not have stamped, so the runner reports a skip rather than a silent pass - Add response.ok, htmlTagIdx, htmlEndIdx, and tmpl guard assertions in all four suiteSetup fetch+DOMParser blocks for clearer failures
swarnadipa-dev
requested review from
AnilKumarVanga,
Copilot and
madhurkulshrestha-hyland
and removed request for
a team
Contributor
There was a problem hiding this comment.
Pull request overview
This PR ports WEBUI-1736 to lts-2025, applying the WCAG H2 technique across document listing views by combining the document thumbnail and title/path text into a single link and making thumbnails decorative (alt="") to avoid redundant screen reader announcements.
Changes:
- Updated multiple listing templates (search results, home dashboard, document content views) to wrap thumbnail + text within one
<a>and setalt=""on thumbnails. - Updated the grid card (
nuxeo-document-grid-thumbnail) to move the thumbnail inside the title link, setalt=""on the<img>, and hide the tooltip from assistive tech. - Added/updated unit tests to assert the new DOM/template structure for all affected views.
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js | Makes grid card a single link (thumbnail + title), sets decorative alt="", hides tooltip from AT, adjusts select label computation. |
| elements/nuxeo-home.html | Combines thumbnail + title into one link across dashboard tables; removes no-longer-needed ellipsis width calc. |
| elements/nuxeo-publication/nuxeo-document-publications.js | Combines thumbnail + path into a single link in publications table; removes no-longer-needed ellipsis width calc. |
| elements/nuxeo-results/nuxeo-default-results.js | Combines thumbnail + title into one link in default results table; removes no-longer-needed ellipsis width calc. |
| elements/nuxeo-results/nuxeo-document-content.js | Combines thumbnail + title into one link in document content table; removes no-longer-needed ellipsis width calc. |
| elements/nuxeo-results/nuxeo-document-trash-content.js | Combines thumbnail + title into one link in trash content table; removes no-longer-needed ellipsis width calc. |
| elements/search/assets/nuxeo-assets-search-results.html | Combines thumbnail + title into one link in assets search table. |
| elements/search/default/nuxeo-default-search-results.html | Combines thumbnail + title into one link in default search table. |
| elements/search/expired/nuxeo-expired-search-results.html | Combines thumbnail + title into one link in expired search table. |
| elements/search/nxql/nuxeo-nxql-search-results.html | Combines thumbnail + title/path into one link in NXQL search table. |
| elements/search/trash/nuxeo-trash-search-results.html | Combines thumbnail + title into one link in trash search table. |
| test/nuxeo-document-grid-thumbnail.test.js | Updates _computeTitle tests and adds assertions for single-link + decorative thumbnail + tooltip aria-hidden. |
| test/nuxeo-document-content.test.js | Adds DOM/template assertions for single-link + decorative thumbnail in document content view. |
| test/nuxeo-document-trash-content.test.js | Adds DOM/template assertions for single-link + decorative thumbnail in trash content view. |
| test/nuxeo-document-publications.test.js | Adds DOM/template assertions for single-link + decorative thumbnail in publications view. |
| test/nuxeo-default-results.test.js | Adds DOM/template assertions for single-link + decorative thumbnail in default results view. |
| test/nuxeo-home.test.js | New: asserts dashboard tables use single-link + decorative thumbnails. |
| test/nuxeo-assets-search-results.test.js | New: asserts assets search table uses single-link + decorative thumbnails. |
| test/nuxeo-default-search-results.test.js | New: asserts default search table uses single-link + decorative thumbnails. |
| test/nuxeo-expired-search-results.test.js | New: asserts expired search table uses single-link + decorative thumbnails. |
| test/nuxeo-nxql-search-results.test.js | New: asserts NXQL title+path columns use single-link + decorative thumbnails. |
| test/nuxeo-trash-search-results.test.js | New: asserts trash search table uses single-link + decorative thumbnails. |
- Remove width: calc(100% - 38px) from .ellipsis in nuxeo-nxql-search-results.html (thumbnail is now inside the <a>, so full width is correct) - Add data-index="[[index]]" to <nuxeo-document-thumbnail> inside the title link in nuxeo-default-results.js so _navigateLink can read e.target.dataIndex when the thumbnail itself is the click target
Previously .actions and .select were hidden only via opacity/height (CSS), so they remained in the accessibility tree. When the card host received focus the screen reader read all card content concatenated: 'eew22 File Add to Favorites Select, group' - Add visibility: hidden to default state of .actions and .select so they are removed from the accessibility tree when not visible - Replace :host(:focus) with .bubbleBox:focus-within so actions only enter the accessibility tree when a child element has focus (link, favorites, select), not when the outer card host itself receives focus Result: - Card host focus: reads only document title/type - Tab to <a> link: reads the link label - Tab to favorites button: reads 'Add to Favorites' - Tab to select button: reads 'Select'
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://hyland.atlassian.net/browse/WEBUI-1736