Accessibility bug fix 2737342

[navya9singh]

Add role=status and aria-live=polite to both the sidebar (#like-dislike-subnav) and popup (#page-helpful-popup) feedback containers so screen readers announce the 'Thanks for the feedback' message when users click Like/Dislike.

Fixes MAS 1.3.1 - Info and Relationships accessibility violation.

Fixes Bug 2737342

I have verified this manually.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3532.centralus.5.azurestaticapps.net

[Copilot]

Pull request overview

Adds ARIA live-region semantics to the documentation “Like/Dislike” feedback UI so assistive technologies announce the “Thanks for the feedback” confirmation message when a user submits feedback.

Changes:

• Add role="status" and aria-live="polite" to the popup feedback container (#page-helpful-popup)
• Add role="status" and aria-live="polite" to the sidebar feedback container (#like-dislike-subnav)

Comments suppressed due to low confidence (3)

packages/typescriptlang-org/src/templates/documentation.tsx:168

• role="status" is currently on the whole #like-dislike-subnav container, which contains headings and focusable buttons before the user clicks. To avoid announcing non-status content (and to avoid live-region noise if anything else inside this container changes), prefer putting the live-region role/attributes on a dedicated element that only holds the dynamic “thanks” text and updating that element when feedback is submitted.

This issue also appears on line 94 of the same file.

                  <div id="like-dislike-subnav" role="status" aria-live="polite">
                    <h5>{i("handb_like_dislike_title")}</h5>
                    <div>
                      <button title="Like this page" id="like-button"><LikeUnfilledSVG /> {i("handb_like_desc")}</button>
                      <button title="Dislike this page" id="dislike-button"><DislikeUnfilledSVG /> {i("handb_dislike_desc")}</button>

packages/typescriptlang-org/src/templates/documentation.tsx:95

• role="status" is applied to the entire popup container which initially contains interactive Like/Dislike buttons. Live regions with role="status" are intended to contain only the status message text; wrapping focusable controls can lead to screen readers treating those controls as part of the live announcement and can create noisy/incorrect announcements when other DOM changes occur in the container. Consider moving the live-region semantics onto a dedicated element that only contains the dynamic “thanks” message (and keep the buttons outside of that live region).

        <div className="page-popup" id="page-helpful-popup" role="status" aria-live="polite" style={{ opacity: 0, display: "none" }}>
          <p>Was this page helpful?</p>

packages/typescriptlang-org/src/templates/documentation.tsx:94

• role="status" already has an implicit aria-live="polite" (and typically aria-atomic="true"). Adding an explicit aria-live here is redundant and inconsistent with other role="status" usage in this repo (e.g. the loader messages). If you keep role="status", consider dropping the explicit aria-live to reduce duplication and potential confusion.

        <div className="page-popup" id="page-helpful-popup" role="status" aria-live="polite" style={{ opacity: 0, display: "none" }}>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[DanielRosenwasser]

I don't know about the redundancy, but should these only be added after the click has happened?

[DanielRosenwasser]

Let me rephrase - if the whole thing is that we don't announce an update (e.g. "thanks for the feedback"), doesn't this mean on every docs page will announce the entire "is this page helpful?" control?

[jakebailey]

I didn't know we even still had thumbs buttons?

[DanielRosenwasser]

Let me rephrase - if the whole thing is that we don't announce an update (e.g. "thanks for the feedback"), doesn't this mean on every docs page will announce the entire "is this page helpful?" control?