Skip to content

Add aria label hint for keyboard deletion of chat attachments#299785

Merged
meganrogge merged 5 commits intomainfrom
copilot/fix-accessibility-issue-context-file
Mar 11, 2026
Merged

Add aria label hint for keyboard deletion of chat attachments#299785
meganrogge merged 5 commits intomainfrom
copilot/fix-accessibility-issue-context-file

Conversation

Copy link
Contributor

Copilot AI commented Mar 6, 2026

Screen reader users had no way to discover that Delete/Backspace removes attached context files in Chat.

Adds a (Delete) suffix to attachment aria labels when deletion is supported. The hint is gated on the same conditions as the existing keyboard handler (supportsDeletion && !attachment.range).

  • Added _hasClearButton flag and appendDeletionHint() helper in AbstractChatAttachmentWidget
  • Updated all 13 attachment widget subclasses to pipe their aria labels through appendDeletionHint()
  • Added missing aria label and deletion hint to PromptTextAttachmentWidget
  • Fixed ImageAttachmentWidget and NotebookCellOutputChatAttachmentWidget.renderImageOutput to pass local ariaLabel variable directly to appendDeletionHint() instead of reading back from this.element.ariaLabel

Before: "Attached file, main.ts /src"
After: "Attached file, main.ts /src (Delete)"


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

When a chat attachment supports deletion (Delete/Backspace), the aria
label now includes ", press Delete to remove from context" so screen
reader users can discover this keyboard shortcut.

Fixes accessibility issue where there was no way to discover how to
remove attached context files via keyboard.

Co-authored-by: meganrogge <29464607+meganrogge@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix keyboard accessibility for removing attached context files Add aria label hint for keyboard deletion of chat attachments Mar 6, 2026
@meganrogge meganrogge marked this pull request as ready for review March 6, 2026 16:15
Copilot AI review requested due to automatic review settings March 6, 2026 16:15
@meganrogge meganrogge enabled auto-merge (squash) March 6, 2026 16:15
@meganrogge meganrogge added this to the 1.112.0 milestone Mar 6, 2026
@meganrogge
Copy link
Collaborator

@copilot, it should just say (Delete) in parens, not that long message

Co-authored-by: meganrogge <29464607+meganrogge@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Mar 6, 2026

@copilot, it should just say (Delete) in parens, not that long message

Updated in f55762a. The hint is now (Delete) — e.g. "Attached file, main.ts /src (Delete)".

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves accessibility for screen reader users in VS Code's Chat panel by adding a deletion hint to the aria labels of chat attachment widgets. When an attachment supports keyboard deletion (Delete/Backspace), its aria label now includes ", press Delete to remove from context" so screen reader users can discover this capability.

Changes:

  • Added _hasClearButton flag and appendDeletionHint() helper method to AbstractChatAttachmentWidget base class, which appends a localized deletion hint only when the clear button is active.
  • Set _hasClearButton = true inside attachClearButton() to track whether deletion is supported.
  • Updated 12 of the 13 attachment widget subclasses to pipe their aria labels through appendDeletionHint().
Comments suppressed due to low confidence (2)

src/vs/workbench/contrib/chat/browser/attachments/chatAttachmentWidgets.ts:445

  • In ImageAttachmentWidget, appendDeletionHint is called with this.element.ariaLabel ?? '' even though the local ariaLabel variable (defined earlier in the constructor) is still in scope and would be more direct and robust. Reading from this.element.ariaLabel is fragile because it depends on createImageElements having set it; a future refactor of that function could silently break the hint.
		this.element.ariaLabel = this.appendDeletionHint(this.element.ariaLabel ?? '');

src/vs/workbench/contrib/chat/browser/attachments/chatAttachmentWidgets.ts:936

  • In NotebookCellOutputChatAttachmentWidget.renderImageOutput, appendDeletionHint is called with this.element.ariaLabel ?? '' even though the local ariaLabel variable is still in scope. Using the local variable directly is more robust: it doesn't depend on createImageElements having set element.ariaLabel.
		this.element.ariaLabel = this.appendDeletionHint(this.element.ariaLabel ?? '');

…ntWidgets.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…l patterns

Co-authored-by: meganrogge <29464607+meganrogge@users.noreply.github.com>
@meganrogge meganrogge merged commit 56540e1 into main Mar 11, 2026
20 checks passed
@meganrogge meganrogge deleted the copilot/fix-accessibility-issue-context-file branch March 11, 2026 20:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants