fix: A11Y Improvement Content Display Screen Reader

[NathanZlion]

Description

Improve Screen Reader Experience for Colletion Preferences Content Display reordering.

Changes Done:

• The entire reordering UI is wrapped in role="group" and aria-labelledby the visible heading and aria-describedby the instruction text.
• The collection of column resize controls is wrapped in role="application" and also aria-labelledby the visible heading
• Each resize grabber control is now a div with role="button". This button is stateful (it has aria-pressed) to track whether or not it is activated. It has an aria-label that indicates that it is a drag handle and for what column. It also is aria-describedby the instruction text.

Related links, issue #, if available: n/a

Ticket: AWS-CXA-787

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.

[avinashbot]

Is this the result of some accessibility feedback? If I recall correctly, role="application" is better for screen readers like NVDA/JAWS because it captures arrow key presses more reliably. Have you tested if wrapping the whole thing with role="application" solves this issue?

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.41%. Comparing base (16e2159) to head (031ca83).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4494   +/-   ##
=======================================
  Coverage   97.41%   97.41%           
=======================================
  Files         933      933           
  Lines       29595    29596    +1     
  Branches    10757    10757           
=======================================
+ Hits        28831    28832    +1     
- Misses        716      757   +41     
+ Partials       48        7   -41     

☔ 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.