random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-03 06:53:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

[accessibility-3739790-3739677]:[Forms and Validation - Azure Cosmos DB- Data Explorer - New Vertex]: Visual Label is not defined for Key, Value and Type input fields under 'New Vertex' pane. (#2040)

Browse Source 
Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB 2025-02-19 11:26:15 +05:30 committed by GitHub
parent 8da078579e
commit 3fcbdf6152
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less
View File

@ -14,10 +14,6 @@
.flex-direction(@direction: row); .flex-direction(@direction: row);
padding: 4px 5px; padding: 4px 5px;
label {
padding: 0px;
}
.valueCol { .valueCol {
flex-grow: 1; flex-grow: 1;
padding-right: 5px; padding-right: 5px;
@ -63,6 +59,10 @@
height: 100%; height: 100%;
} }
.customTrashIcon {
padding-top: 33px;
}
.rightPaneTrashIconImg { .rightPaneTrashIconImg {
vertical-align: top; vertical-align: top;
} }

9
src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
View File

@ -142,10 +142,11 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
<div className="labelCol"> <div className="labelCol">
<TextField <TextField
className="edgeInput" className="edgeInput"
label={index === 0 && "Key"}
type="text" type="text"
id="propertyKeyNewVertexPane" id="propertyKeyNewVertexPane"
componentRef={input} componentRef={input}
aria-required="true" required
placeholder="Key" placeholder="Key"
autoComplete="off" autoComplete="off"
aria-label={`Enter value for propery ${index + 1}`} aria-label={`Enter value for propery ${index + 1}`}
@ -153,11 +154,11 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)} onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
/> />
</div> </div>
<span className="mandatoryStar">*&nbsp;</span>
<div className="valueCol"> <div className="valueCol">
<TextField <TextField
className="edgeInput" className="edgeInput"
label={index === 0 && "Value"}
type="text" type="text"
placeholder="Value" placeholder="Value"
autoComplete="off" autoComplete="off"
@ -169,6 +170,8 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
<div> <div>
<Dropdown <Dropdown
role="combobox" role="combobox"
label={index === 0 && "Type"}
ariaLabel="Type"
placeholder="Select an option" placeholder="Select an option"
defaultSelectedKey={data.values[0].type} defaultSelectedKey={data.values[0].type}
style={{ width: 100 }} style={{ width: 100 }}
@ -181,7 +184,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
</div> </div>
<div className="actionCol"> <div className="actionCol">
<div <div
className="rightPaneTrashIcon rightPaneBtns" className={`rightPaneTrashIcon rightPaneBtns ${index === 0 && "customTrashIcon"}`}
tabIndex={0} tabIndex={0}
role="button" role="button"
aria-label={`Delete ${data.key}`} aria-label={`Delete ${data.key}`}