enable auto-accessibility feature on graph nodes (#2388)

* enable auto-accessibility feature on graph icons

Signed-off-by: Michael Robinson <merobi@gmail.com>

* fix icon attribute formatting

Signed-off-by: Michael Robinson <merobi@gmail.com>

---------

Signed-off-by: Michael Robinson <merobi@gmail.com>
Co-authored-by: Willy Lulciuc <willy@datakin.com>

Author: merobi-hub

web/src/components/lineage/components/node/Node.tsx

@@ -73,6 +73,8 @@ class Node extends React.Component<NodeProps> {
     const { node, edgeEnds, selectedNode } = this.props
     const job = isJob(node)
     const isSelected = selectedNode === node.label
+    const ariaJobLabel = 'Job'
+    const ariaDatasetLabel = 'Dataset'
     return (
       <Link
         to={this.determineLink(node)}
@@ -99,6 +101,8 @@ class Node extends React.Component<NodeProps> {
               cy={node.y}
             />
             <FontAwesomeIcon
+              title={ariaJobLabel}
+              aria-hidden={'true'}
               style={{ transformOrigin: `${node.x}px ${node.y}px` }}
               icon={faCog}
               width={ICON_SIZE}
@@ -133,6 +137,8 @@ class Node extends React.Component<NodeProps> {
               rx={4}
             />
             <FontAwesomeIcon
+              title={ariaDatasetLabel}
+              aria-hidden={'true'}
               icon={faDatabase}
               width={ICON_SIZE}
               height={ICON_SIZE}

web/src/components/lineage/types.ts

@@ -7,6 +7,8 @@ import { Nullable } from '../../types/util/Nullable'
 export type JobOrDataset = 'JOB' | 'DATASET'
 export type BatchOrStream = 'BATCH' | 'STREAM' | 'SERVICE'
 export type DbTableOrStream = 'DB_TABLE' | 'STREAM'
+export type ariaJobLabel = string
+export type ariaDatasetLabel = string
 
 export interface LineageDataset {
   id: { namespace: string; name: string }