random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[accessibility-3100029]:[Screen Reader - Azure Cosmos DB - Add Table Row]: Descriptive Label is not provided for 'Value' edit fields under 'Add Table Row' pane. (#1970) 

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB 2024-10-01 09:15:25 +05:30 committed by GitHub
parent 261289b031
commit eb0d7b71b3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Common/EntityValue.tsx
View File

@ -10,6 +10,7 @@ export interface TableEntityProps {
isEntityValueDisable?: boolean; isEntityValueDisable?: boolean;
entityTimeValue: string; entityTimeValue: string;
entityValueType: string; entityValueType: string;
entityProperty: string;
onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void; onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
onSelectDate: (date: Date | null | undefined) => void; onSelectDate: (date: Date | null | undefined) => void;
onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void; onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
@ -26,6 +27,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
onSelectDate, onSelectDate,
isEntityValueDisable, isEntityValueDisable,
onEntityTimeValueChange, onEntityTimeValueChange,
entityProperty,
}: TableEntityProps): JSX.Element => { }: TableEntityProps): JSX.Element => {
if (isEntityTypeDate) { if (isEntityTypeDate) {
return ( return (
@ -51,15 +53,20 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
} }
return ( return (
<TextField <>
label={entityValueLabel && entityValueLabel} <span id={entityProperty} className="screenReaderOnly">
className="addEntityTextField" Edit Property {entityProperty} {attributeValueLabel}
disabled={isEntityValueDisable} </span>
type={entityValueType} <TextField
placeholder={entityValuePlaceholder} label={entityValueLabel && entityValueLabel}
value={typeof entityValue === "string" ? entityValue : ""} className="addEntityTextField"
onChange={onEntityValueChange} disabled={isEntityValueDisable}
ariaLabel={attributeValueLabel} type={entityValueType}
/> placeholder={entityValuePlaceholder}
value={typeof entityValue === "string" ? entityValue : ""}
onChange={onEntityValueChange}
aria-labelledby={entityProperty}
/>
</>
); );
}; };

1
src/Common/TableEntity.tsx
View File

@ -135,6 +135,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
onEntityValueChange={onEntityValueChange} onEntityValueChange={onEntityValueChange}
onSelectDate={onSelectDate} onSelectDate={onSelectDate}
onEntityTimeValueChange={onEntityTimeValueChange} onEntityTimeValueChange={onEntityTimeValueChange}
entityProperty={entityProperty}
/> />
{!isEntityValueDisable && ( {!isEntityValueDisable && (
<TooltipHost content="Edit property" id="editTooltip"> <TooltipHost content="Edit property" id="editTooltip">