From cf8af4aaa0dd743f7ccb16bfcf8d9ea4e59500ff Mon Sep 17 00:00:00 2001 From: Jade Welton Date: Mon, 20 Jul 2026 14:36:05 -0700 Subject: [PATCH] Fix accessible name for New Database panel 'Database id' field (4768133) The Database id input in the New Database panel is a Fluent UI v8 TextField that was given a kebab-case `aria-label`. Fluent v8 TextField only honors the camelCase `ariaLabel` prop and overwrites the input's `aria-label` with `this.props.ariaLabel` (undefined), so the input had no accessible name and screen readers fell back to the `title` attribute ("May not end with space..."). Associate the visible "Database id" label with the input via `aria-labelledby` (the input now resolves to the accessible name "Database id"), matching the MAS 4.1.2 expected behavior. Replace the enzyme shallow snapshot test with React Testing Library tests that assert the resolved accessible name, and add an E2E assertion in the SQL shared-throughput spec. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 966869a1-04d0-4651-9ede-f8cf861ae658 --- .../AddDatabasePanel.test.tsx | 37 ++++++++--- .../AddDatabasePanel/AddDatabasePanel.tsx | 4 +- .../AddDatabasePanel.test.tsx.snap | 66 ------------------- .../scaleAndSettings/sharedThroughput.spec.ts | 17 +++++ 4 files changed, 46 insertions(+), 78 deletions(-) delete mode 100644 src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap diff --git a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx index 4206eb723..658b32de9 100644 --- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx +++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx @@ -1,17 +1,34 @@ -import { shallow } from "enzyme"; +jest.mock("../../../Common/dataAccess/createDatabase"); +jest.mock("../../../Shared/Telemetry/TelemetryProcessor"); +import "@testing-library/jest-dom"; +import { render, screen } from "@testing-library/react"; import React from "react"; +import { updateUserContext } from "../../../UserContext"; import Explorer from "../../Explorer"; import { AddDatabasePanel } from "./AddDatabasePanel"; -const props = { - explorer: new Explorer(), - closePanel: (): void => undefined, - openNotificationConsole: (): void => undefined, -}; +describe("AddDatabasePanel", () => { + const props = { + explorer: new Explorer(), + }; -describe("AddDatabasePane Pane", () => { - it("should render Default properly", () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + afterEach(() => { + updateUserContext({ apiType: "SQL" }); + }); + + it("programmatically associates the visible 'Database id' label with the input", () => { + updateUserContext({ apiType: "SQL" }); + render(); + + // getByRole resolves the accessible name via aria-labelledby, which must + // point at the visible "Database id" label (regression guard for bug 4768133). + expect(screen.getByRole("textbox", { name: "Database id" })).toBeInTheDocument(); + }); + + it("uses 'Keyspace id' as the accessible name for Cassandra accounts", () => { + updateUserContext({ apiType: "Cassandra" }); + render(); + + expect(screen.getByRole("textbox", { name: "Keyspace id" })).toBeInTheDocument(); }); }); diff --git a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx index d2ba746dc..f4e0a16e2 100644 --- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx +++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx @@ -148,7 +148,7 @@ export const AddDatabasePanel: FunctionComponent = ({ *  - + {databaseIdLabel} {databaseIdTooltipText} @@ -162,7 +162,7 @@ export const AddDatabasePanel: FunctionComponent = ({ pattern={ValidCosmosDbIdInputPattern.source} title={ValidCosmosDbIdDescription} size={40} - aria-label={databaseIdLabel} + aria-labelledby="database-id-label" placeholder={databaseIdPlaceHolder} value={databaseId} onChange={handleonChangeDBId} diff --git a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap deleted file mode 100644 index c9ab614a6..000000000 --- a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap +++ /dev/null @@ -1,66 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AddDatabasePane Pane should render Default properly 1`] = ` - -
- - - - *  - - - Database id - - - A database is a logical container of one or more collections - - - - -
- -`; diff --git a/test/sql/scaleAndSettings/sharedThroughput.spec.ts b/test/sql/scaleAndSettings/sharedThroughput.spec.ts index cd754b0cc..f4f658590 100644 --- a/test/sql/scaleAndSettings/sharedThroughput.spec.ts +++ b/test/sql/scaleAndSettings/sharedThroughput.spec.ts @@ -36,6 +36,23 @@ test.describe("Shared Throughput Option Removed from Creation Dialogs", () => { await panel.waitFor({ state: "detached" }); }); + test("New Database panel 'Database id' field has an accessible name", async () => { + // Regression guard for bug 4768133: the "Database id" label must be + // programmatically associated with the edit field, so the input's accessible + // name is "Database id" rather than falling back to its title attribute. + const newDatabaseButton = await explorer.globalCommandButton("New Database"); + await newDatabaseButton.click(); + + const panel = explorer.panel("New Database"); + await panel.waitFor(); + + await expect(panel.getByRole("textbox", { name: "Database id" })).toBeVisible(); + + const closeButton = explorer.frame.getByLabel("Close New Database"); + await closeButton.click(); + await panel.waitFor({ state: "detached" }); + }); + test("New Container panel should not show shared throughput checkbox when creating new database", async () => { // Open the "New Container" panel const newContainerButton = await explorer.globalCommandButton("New Container");