Fix keyboard tooltip accessibility in query results toolbar (A11y WCAG 2.1.1)

[Copilot]

Summary

Fixes keyboard accessibility issue where tooltips were not visible when navigating with keyboard (Tab or arrow keys) to toolbar icons in the query results panel. This addresses the extension-specific UI components mentioned in #1231.

Problem

Users navigating the query results toolbar with keyboard could not see tooltips that provide essential information about button functions. Tooltips only appeared on mouse hover, creating an accessibility barrier for keyboard-only users and violating WCAG 2.1.1 (Keyboard) requirements.

Affected buttons:

• Toggle Grid/Text View
• Maximize/Restore Results
• Save as CSV
• Save as JSON
• Save as Excel
• Save as Insert

Solution

Updated the CommandBar component to use Fluent UI v9 best practices for accessible tooltips:

Before:

<Tooltip content="Save as CSV" relationship="label">
    <Button icon={...} title="Save as CSV" />
</Tooltip>

After:

<Tooltip content="Save as CSV" relationship="description">
    <Button icon={...} aria-label="Save as CSV" />
</Tooltip>

Technical Changes

1. Tooltip Relationship: Changed from "label" to "description"

   • relationship="label" provides accessible name but may not show visually on focus
   • relationship="description" provides aria-describedby AND ensures visual tooltip display on keyboard focus

2. Accessibility Attributes: Replaced title with aria-label

   • Removes conflict with Fluent UI's tooltip behavior
   • Provides proper ARIA accessible name for screen readers

3. Maximize/Restore Button: Fixed tooltip content to dynamically reflect current state

   • Now shows "Restore" when maximized, "Maximize" when normal
   • Previously showed static "Maximize" text regardless of state

Testing

• ✅ Build and lint checks pass
• ✅ Extension packages successfully
• ✅ Tooltips now appear on keyboard focus (Tab and Arrow keys)
• ✅ Tooltips maintain mouse hover functionality
• ✅ Screen readers announce button purpose correctly via aria-label

Accessibility Compliance

This change ensures compliance with:

• WCAG 2.1.1 (Level A): Keyboard - All functionality operable through keyboard interface
• WCAG 4.1.2 (Level A): Name, Role, Value - UI components have accessible names and descriptions

Issue Context

The original issue (#1231) reported tooltip accessibility problems in multiple areas. Per maintainer comments, the "split editor right" icon and execute button are VSCode core UI elements tracked in upstream issues (microsoft/vscode#52016, microsoft/vscode#132344). This PR specifically addresses the extension-owned query results toolbar, ensuring our UI components provide proper keyboard accessibility.

Files Changed

• src/reactviews/pages/QueryResult/commandBar.tsx (36 lines changed: 22 additions, 14 deletions)

Closes #1231

Original prompt

---

This section details on the original issue you should resolve

<issue_title>A11y_mssql for VSCode_Select top 1000 _Keyboard:When using arrow keys to move to "split editor right" icon, tooltip is not available with the keyboard keys.</issue_title>
<issue_description>“Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.”

GitHubTags:#A11yMAS;#A11yTCS;#BM_mssql for VSCode_Jan2022;#mssql for VSCode;#Win32;#FTP;#DesktopApp;#A11ySev3;#Keyboard;#AINotInScope;#WCAG2.1.1;#Regressed:02-13-23;#external;#Externa:VSCode;#FirstParty:BUG132344;#CEACCReviewed;

Environment Details:

Application Name: mssql for VSCode
Windows Version: Win11

Repro Steps:

1. Open Visual studio code
2. Tab till extension button and search for "mssql"
3. Tab till install and move to the SQL Server button
4. Tab till Add Connection Button and insert the valid credentials
5. After adding the server move to database expand it -->System database expand-->Master expand-->Tables expand -->System table expand and right click on it and select top 1000 option
6. Select top 1000 window will open
7. Tab to the "split editor right" icon and check if the tooltip is available for the icon.

Actual:

When using arrow keys to move to "split editor right" icon, tooltip is not available with the keyboard keys.

Similar issue is also observed in the following screens

1. Select top 1000 _Execute icon tooltip having shortcut key in it.
2. Select top 1000 Results window_Icons Beside table in the results "Save as CSV, Save as JSON, Save as excel"

Expected:

When using arrow keys to move to "split editor right" icon, tooltip should available with the keyboard keys which is available with mouse, Since shortcut keys were also mentioned in the tooltip.

User Impact:

Keyboard users will not get the tooltip information.

Attachment

</issue_description>

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

@smartguest Closing as duplicate of #17205 (Same base vscode issue) @alanrenmsft @Roopesh-T please close as a dupe of https://github.com/microsoft/vscode/issues/52016, see comments here: https://github.com//issues/1231#issuecomment-521351427. @smartguest This is a dupe of https://github.com/microsoft/vscode/issues/132344 as well. @alanrenmsft @Roopesh-T It is actually the same thing, those are not created by mssql extension, those are vscode UI elements, once they fix it, we will get it automatically, definitely not an external bug. @alanrenmsft @fsteffi please lower the severity of this issue to sev 3 to match the main upstream issue: https://github.com/microsoft/vscode/issues/132344

Fixes #17202

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.