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-2724013]:[Screen reader - Cosmos DB - Data Explorer -> Entities -> Add entity]: Screen reader announces incorrect role when focus lands on the "Edit" and "Delete" buttons. (#1822) 

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB 2024-04-29 22:23:49 +05:30 committed by GitHub
parent f8f7ea34bd
commit b94ce28e96
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Common/TableEntity.tsx
View File

@ -142,7 +142,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
<Image <Image
{...imageProps} {...imageProps}
src={EditIcon} src={EditIcon}
alt="editEntity" alt={`Edit ${entityProperty} entity`}
onClick={onEditEntity} onClick={onEditEntity}
tabIndex={0} tabIndex={0}
onKeyPress={handleKeyPress} onKeyPress={handleKeyPress}
@ -156,7 +156,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
<Image <Image
{...imageProps} {...imageProps}
src={DeleteIcon} src={DeleteIcon}
alt="delete entity" alt={`Delete ${entityProperty} entity`}
id="deleteEntity" id="deleteEntity"
onClick={onDeleteEntity} onClick={onDeleteEntity}
tabIndex={0} tabIndex={0}

4
src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
View File

@ -349,7 +349,7 @@ export class NodePropertiesComponent extends React.Component<
onActivated={this.setIsDeleteConfirm.bind(this, true)} onActivated={this.setIsDeleteConfirm.bind(this, true)}
aria-label="Delete this vertex" aria-label="Delete this vertex"
> >
<img src={DeleteIcon} alt="Delete" /> <img src={DeleteIcon} alt="Delete" role="button" />
</AccessibleElement> </AccessibleElement>
); );
} else { } else {
@ -406,7 +406,7 @@ export class NodePropertiesComponent extends React.Component<
aria-label="Edit properties" aria-label="Edit properties"
onActivated={expandClickHandler} onActivated={expandClickHandler}
> >
<img src={EditIcon} alt="Edit" /> <img src={EditIcon} alt="Edit" role="button" />
</AccessibleElement> </AccessibleElement>
)} )}

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

@ -184,12 +184,18 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
className="rightPaneTrashIcon rightPaneBtns" className="rightPaneTrashIcon rightPaneBtns"
tabIndex={0} tabIndex={0}
role="button" role="button"
aria-label={`Delete ${data.key}`}
onClick={(event: React.MouseEvent<HTMLDivElement>) => removeNewVertexProperty(event, index)} onClick={(event: React.MouseEvent<HTMLDivElement>) => removeNewVertexProperty(event, index)}
onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) =>
removeNewVertexPropertyKeyPress(event, index) removeNewVertexPropertyKeyPress(event, index)
} }
> >
<img className="refreshcol rightPaneTrashIconImg" src={DeleteIcon} alt="Remove property" /> <img
aria-label="hidden"
className="refreshcol rightPaneTrashIconImg"
src={DeleteIcon}
alt="Remove property"
/>
</div> </div>
</div> </div>
</div> </div>