From f56e5e64b90c0790a00b372fd621e4e9ffb0157f Mon Sep 17 00:00:00 2001 From: SATYA SB <107645008+satya07sb@users.noreply.github.com> Date: Tue, 14 May 2024 09:56:16 +0530 Subject: [PATCH 1/3] =?UTF-8?q?[accessibility-3102916]:[Keyboard=20Navigat?= =?UTF-8?q?ion=20-=20Azure=20CosmosDB=20-=20Data=20=E2=80=A6=20(#1834)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [accessibility-3102916]:[Keyboard Navigation - Azure CosmosDB - Data Explorer]: Keyboard focus is moving to non-interactive control after checkbox control of Advanced button. * Updated Snap. --------- Co-authored-by: Satyapriya Bai --- src/Explorer/Panes/AddCollectionPanel.tsx | 7 +++---- .../Panes/__snapshots__/AddCollectionPanel.test.tsx.snap | 1 - 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx index 2a99a56a7..dee78d7bf 100644 --- a/src/Explorer/Panes/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel.tsx @@ -924,10 +924,9 @@ export class AddCollectionPanel extends React.Component - To ensure compatibility with - older SDKs, the created container will use a legacy partitioning scheme that supports partition - key values of size only up to 101 bytes. If this is enabled, you will not be able to use - hierarchical partition keys.{" "} + To ensure compatibility with older SDKs, the + created container will use a legacy partitioning scheme that supports partition key values of size + only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "} Learn more diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap index 79485d550..d2fd03913 100644 --- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap +++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap @@ -466,7 +466,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = ` To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys. From 9e9d270b65ed43d1772044368ac30dae00950599 Mon Sep 17 00:00:00 2001 From: SATYA SB <107645008+satya07sb@users.noreply.github.com> Date: Tue, 14 May 2024 09:56:53 +0530 Subject: [PATCH 2/3] =?UTF-8?q?[accessibility-3102877]:[Programmatic=20Acc?= =?UTF-8?q?ess=20-=20Azure=20CosmosDB=20=E2=80=93=20Data=20Explorer]:=20En?= =?UTF-8?q?sures=20every=20ARIA=20input=20field=20has=20an=20accessible=20?= =?UTF-8?q?name.=20(#1835)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Satyapriya Bai --- src/Explorer/Panes/AddCollectionPanel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx index dee78d7bf..8c1cfef5b 100644 --- a/src/Explorer/Panes/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel.tsx @@ -382,6 +382,7 @@ export class AddCollectionPanel extends React.Component Date: Tue, 14 May 2024 09:57:50 +0530 Subject: [PATCH 3/3] Screen Reader does not announce status message after invoking 'Add Row' control under 'Add Table Row' pane. (#1837) * [accessibility-3100026]: [Screen Reader - Azure Cosmos DB - Add Table Row]: Screen Reader does not announce status message after invoking 'Add Row' control under 'Add Table Row' pane. * Fixed format. * Snap update. --------- Co-authored-by: Satyapriya Bai --- less/Common/Constants.less | 7 +++++++ .../DeleteCollectionConfirmationPane.test.tsx.snap | 5 +++++ .../__snapshots__/ExecuteSprocParamsPane.test.tsx.snap | 5 +++++ src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx | 6 ++++++ .../__snapshots__/RightPaneForm.test.tsx.snap | 5 +++++ .../__snapshots__/StringInputPane.test.tsx.snap | 5 +++++ .../__snapshots__/TableQuerySelectPanel.test.tsx.snap | 5 +++++ .../Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap | 5 +++++ .../__snapshots__/EditTableEntityPanel.test.tsx.snap | 5 +++++ .../DeleteDatabaseConfirmationPanel.test.tsx.snap | 5 +++++ src/Explorer/Tables/Constants.ts | 5 +++++ 11 files changed, 58 insertions(+) diff --git a/less/Common/Constants.less b/less/Common/Constants.less index 946426d37..5b80d67f8 100644 --- a/less/Common/Constants.less +++ b/less/Common/Constants.less @@ -335,4 +335,11 @@ width: 0; height: 0; border-color: @InfoPointerColor transparent; +} +/********************************************************************************************************* + Screen Reader Only +**********************************************************************************************************/ +.screenReaderOnly { + position: absolute; + left: -9999px; } \ No newline at end of file diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap index e63cb45bd..8add09097 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap @@ -2140,6 +2140,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect + `; diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap index 6e0cbbeab..6c5cb5dfb 100644 --- a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap +++ b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap @@ -7073,6 +7073,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = ` + `; diff --git a/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx b/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx index 27ba8e7f6..575403ccf 100644 --- a/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx +++ b/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx @@ -2,6 +2,7 @@ import React, { CSSProperties, FunctionComponent, ReactNode } from "react"; import { PanelFooterComponent } from "../PanelFooterComponent"; import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent"; import { PanelLoadingScreen } from "../PanelLoadingScreen"; +import { labelToLoadingItemName } from "Explorer/Tables/Constants"; export interface RightPaneFormProps { formError: string; @@ -27,6 +28,10 @@ export const RightPaneForm: FunctionComponent = ({ const handleOnSubmit = (event: React.FormEvent) => { event.preventDefault(); onSubmit(); + const screenReaderStatusElement = document.getElementById("screenReaderStatus"); + if (screenReaderStatusElement) { + screenReaderStatusElement.innerHTML = labelToLoadingItemName[submitButtonText] || "Loading"; + } }; return ( @@ -42,6 +47,7 @@ export const RightPaneForm: FunctionComponent = ({ /> )} + {isExecuting && } ); diff --git a/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap b/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap index bcfa8a9e6..7691f6ed4 100644 --- a/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap +++ b/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap @@ -1782,5 +1782,10 @@ exports[`Right Pane Form should render Default properly 1`] = ` + `; diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap index 3e8f7c92d..e8553fa4e 100644 --- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap +++ b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap @@ -2449,6 +2449,11 @@ exports[`StringInput Pane should render Create new directory properly 1`] = ` + `; diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap index ca5c6c926..4a913958d 100644 --- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap +++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap @@ -3019,6 +3019,11 @@ exports[`Table query select Panel should render Default properly 1`] = ` + `; diff --git a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap index 80d494808..f2ee599f7 100644 --- a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap +++ b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap @@ -2130,6 +2130,11 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = ` + `; diff --git a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap index da5c0c722..648f797f7 100644 --- a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap +++ b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap @@ -2136,6 +2136,11 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = ` + `; diff --git a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap index 4ac4a9e20..6e32d62c0 100644 --- a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap +++ b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap @@ -2810,6 +2810,11 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = ` + `; diff --git a/src/Explorer/Tables/Constants.ts b/src/Explorer/Tables/Constants.ts index 76c050f5d..58d5b8e87 100644 --- a/src/Explorer/Tables/Constants.ts +++ b/src/Explorer/Tables/Constants.ts @@ -225,3 +225,8 @@ export const InputType = { DateTime: "datetime-local", Number: "number", }; + +export const labelToLoadingItemName: Record = { + "Add Row": "Adding row to table", + "Add Entity": "Adding entity to table", +};