[marissahuysentruyt]

Description

Improve API table readability without truncating long type definitions or squeezing disclosure controls into narrow columns.

• Add the shared se-disclosure component with native button activation, expanded-state semantics, and a bounded, scrollable content panel.
• Use disclosures for extracted types longer than 500 characters. Shorter types remain inline; disclosure controls appear when their previews overflow.
• Contain wide tables in a keyboard-focusable scrolling region while preserving the stacked layout below a 650px container width.
• Show the edge gradient before scrolling when more content is available. Recalculate it after content and layout changes, including RTL layouts.
• Associate scrolling instructions with overflowing tables through aria-describedby. Keep instructions available at either scroll end and remove them when content fits.
• Style Property, Attribute, Type, and non-placeholder Default values consistently.
• Render HTTP/HTTPS Markdown links and backtick-delimited code in extracted descriptions without interpreting raw HTML.
• Regenerate the SWC text-field data to include its complete autocomplete type.
• Add unit, browser, and accessibility coverage.

The earlier accessibility audit also identified reduced link contrast beneath the gradient.

Screenshots (if applicable)

In the video, you can see the disclosure+scrolling behavior for the expanded types in the swc-textfield page. You can also see the gradient to the side of the table if it would have overflowed the container.

Screen.Recording.2026-11-12.at.11.49.17.AM.mov

🚫 Before screenshots of the RSP calendar table, showing the unstyled table cells, plain text links and backtick, and the overflowing table at ~1660px.

Type of change

• Bug fix
• New feature / block
• Refactor
• Docs / content
• Chore (deps, config, tooling)

Related issue(s)

• fixes SPDOCS-529, SPDOCS-119, and SPDOCS-626

Validation steps

• This PR has visual elements, so it was reviewed by a designer.
• This PR has code changes, and our linters still pass.
• This PR affects production code, so it was browser tested (see below).
• This PR affects existing pages, so automated E2E tests were run (see below).
• This PR has new code, so new tests were added or updated, and they pass.
• This PR has copy changes, so copy was proofread and approved.
• The content of this PR requires documentation, so a detailed description of the component's purpose, requirements, quirks, and instructions for use by designers and developers was added, along with accessibility information if pertinent.

Validation run against the current branch:

• npx web-test-runner --config ./web-test-runner.config.mjs --files test/blocks/table.test.js --node-resolve --port=2000: passed, 52 tests.
• npx playwright test test/a11y/blocks/table.spec.js test/a11y/custom-components/se-disclosure.spec.js: 34 passed, 2 skipped. Both failures are the shared disclosure test “keeps desktop table layout stable when overflow adds a trigger.”
• npx eslint blocks/table/table.js deps/se/se.js test/blocks/table.test.js test/a11y/blocks/table.spec.js test/a11y/custom-components/se-disclosure.spec.js: passed with one warning that deps/se/se.js is ignored by the repository configuration.
• npx stylelint blocks/table/table.css deps/se/se.css: passed.
• Full npm test, npm run lint, and the separate E2E suite were not run for this draft.

To Validate

URL for testing:
https://autocomplete--spectrum-hub--adobe.aem.live/web/rsp/components/calendar
https://autocomplete--spectrum-hub--adobe.aem.live/web/swc/components/text-field

• Make sure all PR Checks have passed
• Pull down the branch locally or visit the branch preview
• Run npm test and confirm all tests pass
• Run npm run lint and confirm no linting errors
• Verified in browser with aem up

• Start npx aem up --port 3001 --no-open and open http://localhost:3001/test/a11y/fixtures/table.html?data. Confirm the full autocomplete type is available through its disclosure.
• Confirm types of 500 characters or fewer remain inline. Longer types should show a disclosure control only when the preview overflows.
• Narrow a desktop table until it overflows. Confirm scrolling stays within the table, Type disclosures remain readable, and the gradient appears before interaction.
• Scroll to the reading-direction end. Confirm the gradient disappears; return to the start and confirm it returns. Repeat in RTL.
• Widen the container until content fits. Confirm both the gradient and accessible scrolling description deactivate without requiring a scroll.
• At mobile widths, confirm stacked rows retain their visible cell labels and do not create page-level horizontal overflow.
• Confirm Property, Attribute, Type, and non-placeholder Default values receive styling, while a Default value of - does not.
• Confirm description links navigate to their HTTP/HTTPS destinations, backticks produce inline code, and raw HTML or unsupported link destinations remain literal text.
• Cross-check shared disclosure behavior using http://localhost:3001/test/a11y/fixtures/custom-components/se-disclosure.html.

Accessibility testing checklist

• Keyboard

1. Go here. Use Tab to reach the table scrolling container and confirm its focus indicator is visible.
2. With the table overflowing and its container focused, use Left and Right Arrow to scroll. Tab to the autocomplete disclosure and use Enter or Space to expand it.
3. Confirm focus stays on the trigger after activation. Tab into the expanded panel, scroll its content with the keyboard, then Shift+Tab back and collapse it. Confirm all links and subsequent controls remain reachable without a focus trap.
4. Navigate to the calendar page. Ensure that you can Tab to the rendered MDN links within the Description column of the API table.

• Screen reader

1. Go here with VoiceOver or NVDA enabled. Navigate to the table and confirm its headings, column headers, and cells retain their relationships.
2. Focus the overflowing scroll container. Confirm its heading-based name and “Scrollable table. Use the left and right arrow keys to view more.” description are available. Confirm the description remains at either scroll end and disappears when the table fits.
3. Navigate to the textfield page with an autocomplete disclosure. Confirm its property-specific name and collapsed/expanded state are announced, and its expanded region exposes the complete type without duplicate preview content. Confirm description links have meaningful names and scrolling does not produce repeated live announcements.

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• da44084 ✅ (latest)
• 697d122 ✅
• 6a50cce ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/web/rsp/components/calendar
🖥️	/web/rsp/components/calendar
📱	/web/swc/components/text-field
🖥️	/web/swc/components/text-field

[marissahuysentruyt]

homepage a11y check passes: