Fix keyboard accessibility for IPyWidget output controls

[Copilot]

Interactive widget outputs (matplotlib, ipywidgets) render buttons and controls that are unreachable via keyboard navigation, violating WCAG 2.1.1.

Changes

Widget Container Accessibility

• Added tabindex="0" and ARIA attributes to widget output containers
• Enables keyboard focus and screen reader announcements for interactive regions

Automatic Interactive Element Enhancement

• Implemented ensureWidgetKeyboardAccessibility() that scans rendered widgets for interactive elements
• Automatically adds tabindex="0" to buttons, links, and interactive elements lacking keyboard access
• Targets standard elements, toolbar buttons, matplotlib controls, and custom widget components
• Adds Enter/Space key handlers to activate non-standard interactive elements

Focus Indicators

• Added visible focus outlines using VS Code theme variables
• Applies to all interactive elements within widget outputs

Implementation

function ensureWidgetKeyboardAccessibility(container: HTMLElement): void {
    setTimeout(() => {
        const interactiveSelectors = [
            'button:not([tabindex])',
            'a[href]:not([tabindex])',
            '[role="button"]:not([tabindex])',
            '[onclick]:not([tabindex])',
            '.toolbar button',
            '.mpl-toolbar button'
        ];

        interactiveSelectors.forEach((selector) => {
            container.querySelectorAll(selector).forEach((element) => {
                if (element instanceof HTMLElement) {
                    element.setAttribute('tabindex', '0');
                    // Add keyboard activation handlers
                }
            });
        });
    }, 500);
}

Works universally across matplotlib toolbars, ipywidgets buttons, and third-party widget libraries.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>"More option", "copy", "save" and "Expand" buttons are not accessible using the keyboard: A11y_Visual Studio Code Jupyter Extensions_Home_Keyboard.</issue_title>
<issue_description>### GitHub Tags
#A11yMAS; #A11yTCS; #Win32; #A11ySev1;#DesktopApp; #Visual Studio Code Jupyter Extensions; #GH-VSCodeJupyterExtensions-Win32-Oct2025; #WCAG2.1.1; #FTP; #Keyboard;

Environment Details:

Application: Visual Studio Code Jupyter Extensions
Version: 1.105.0-insider (user setup)
OS build :26100.4770
Screen reader
JAWS version: 2025
NVDA: 2024.4.2

Repro Steps
1.Install Jupyter extension app.
2.Launch the Visual studio code.
3.Create new jupyter notbook file and run the code
(# Matplotlib widget
from ipywidgets import *
import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(0, 2 * np.pi)
fig = plt.figure()
ax = fig.add_subplot(2, 1, 2)
line, = ax.plot(x, np.sin(x))

def update(w=1.1):
line.set_ydata(np.sin(w * x))
fig.canvas.draw_idle()

interact(update))

4.Verify that "More option", "copy", "save" and "Expand" buttons are not accessible using the keyboard.

Actual Experience.

"More option", "copy", "save" and "Expand" buttons are not accessible using the keyboard.

Expected Experience

"More option", "copy", "save" and "Expand" buttons should be accessible using the keyboard keys.

User Impact:

Keyboard and screen reader users will not be able to access the controls.

Attachment

https://github.com/user-attachments/assets/10e3623b-460c-4edf-827c-6c6446e49b7a
</issue_description>

Comments on the Issue (you are @copilot in this section)

@DonJayamanne Please can you attach screen shots, I'm not sure where or what part of VS Code you are referring to. @amunger I'm pretty sure it's custom webview toolbar from the jupyter-renderer at :03 in the video. Ideally we can just migrate to the built-in renderer and move those into the output menu.

</comment_new>

• Fixes "More option", "copy", "save" and "Expand" buttons are not accessible using the keyboard: A11y_Visual Studio Code Jupyter Extensions_Home_Keyboard. #17043

---

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