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 <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB 2024-05-14 09:57:50 +05:30 committed by GitHub
parent 9e9d270b65
commit b6e3e5ea1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 58 additions and 0 deletions

View File

@ -335,4 +335,11 @@
width: 0;
height: 0;
border-color: @InfoPointerColor transparent;
}
/*********************************************************************************************************
Screen Reader Only
**********************************************************************************************************/
.screenReaderOnly {
position: absolute;
left: -9999px;
}

View File

@ -2140,6 +2140,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
</DeleteCollectionConfirmationPane>
`;

View File

@ -7073,6 +7073,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
</ExecuteSprocParamsPane>
`;

View File

@ -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<RightPaneFormProps> = ({
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
onSubmit();
const screenReaderStatusElement = document.getElementById("screenReaderStatus");
if (screenReaderStatusElement) {
screenReaderStatusElement.innerHTML = labelToLoadingItemName[submitButtonText] || "Loading";
}
};
return (
@ -42,6 +47,7 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
/>
)}
</form>
<span role="status" className="screenReaderOnly" id="screenReaderStatus"></span>
{isExecuting && <PanelLoadingScreen />}
</>
);

View File

@ -1782,5 +1782,10 @@ exports[`Right Pane Form should render Default properly 1`] = `
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
`;

View File

@ -2449,6 +2449,11 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
</StringInputPane>
`;

View File

@ -3019,6 +3019,11 @@ exports[`Table query select Panel should render Default properly 1`] = `
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
</TableQuerySelectPanel>
`;

View File

@ -2130,6 +2130,11 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
</AddTableEntityPanel>
`;

View File

@ -2136,6 +2136,11 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
</EditTableEntityPanel>
`;

View File

@ -2810,6 +2810,11 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
</div>
</PanelFooterComponent>
</form>
<span
className="screenReaderOnly"
id="screenReaderStatus"
role="status"
/>
</RightPaneForm>
</DeleteDatabaseConfirmationPanel>
`;

View File

@ -225,3 +225,8 @@ export const InputType = {
DateTime: "datetime-local",
Number: "number",
};
export const labelToLoadingItemName: Record<string, string> = {
"Add Row": "Adding row to table",
"Add Entity": "Adding entity to table",
};