Addressed the linting errors in your JSX files related to accessibility

KamleshKumar427 · Nov 16, 2023 · 1801ae3 · 1801ae3 · KamleshKumar427 · Nov 16, 2023
1 parent 194ff0e
commit 1801ae3
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 906 deletions.
diff --git a/frontend/src/components/contents/presentations/Editor.jsx b/frontend/src/components/contents/presentations/Editor.jsx
@@ -160,7 +160,7 @@ const Editor = ({
                   size="lg"
                 />
               </button> */}
-              <button className={command ? 'btn show-eraser' : 'btn hide-eraser'} type="button" id="eraser" onDoubleClick={() => clearCommand()}>
+              <button className={command ? 'btn show-eraser' : 'btn hide-eraser'} type="button" id="eraser" onDoubleClick={() => clearCommand()} aria-label="Clear Command">
                 <FontAwesomeIcon
                   icon={faTimesCircle}
                   size="1x"
@@ -171,6 +171,7 @@ const Editor = ({
                 type="button"
                 onClick={() => onClick()}
                 title="Run Query"
+                aria-label="Run Query"
               >
                 <IconPlay />
               </button>
@@ -190,6 +191,7 @@ const Editor = ({
                   } */
                 }}
                 title={(isActive) ? 'Hide' : 'Show'}
+                aria-label="toggleMenu"
               >
                 <SideBarToggle isActive={isActive} />
               </button>
@@ -198,6 +200,7 @@ const Editor = ({
                 type="button"
                 onClick={() => setLabel()}
                 title="Run Query"
+                aria-label="Run Query"
               >
                 <FontAwesomeIcon
                   icon={isLabel ? faToggleOn : faToggleOff}

diff --git a/frontend/src/components/cytoscape/CypherResultCytoscapeFooter.jsx b/frontend/src/components/cytoscape/CypherResultCytoscapeFooter.jsx
@@ -94,6 +94,7 @@ const CypherResultCytoscapeFooter = ({
             type="button"
             className="frame-head-button btn btn-link px-3"
             onClick={() => setFooterExpanded(!footerExpanded)}
+            aria-label="Set Footer Expanded"
           >
             <FontAwesomeIcon
               icon={footerExpanded ? faAngleUp : faAngleDown}
@@ -170,6 +171,7 @@ const CypherResultCytoscapeFooter = ({
             type="button"
             className={`btn sizeSelector node ${footerData.data.size >= nodeSize ? ' selectedSize ' : ''}`}
             style={{ width: `${size}px`, height: `${size}px` }}
+            aria-label="Update NodeLabel Size"
           >
             &nbsp;
           </button>
@@ -186,6 +188,7 @@ const CypherResultCytoscapeFooter = ({
             type="button"
             className={`btn sizeSelector edge ${footerData.data.size >= edgeSize ? ' selectedSize ' : ''}`}
             style={{ width: `${size + 18}px`, height: `${size}px` }}
+            aria-label="Update Edge Label Size"
           >
             &nbsp;
           </button>
@@ -212,6 +215,7 @@ const CypherResultCytoscapeFooter = ({
               type="button"
               className={`btn colorSelector ${footerData.data.backgroundColor === color.color ? ' selectedColor ' : ''}`}
               style={{ backgroundColor: color.color }}
+              aria-label="Update Label Color"
             >
               &nbsp;
             </button>
@@ -227,6 +231,7 @@ const CypherResultCytoscapeFooter = ({
               type="button"
               className={`btn colorSelector ${footerData.data.backgroundColor === color.color ? ' selectedColor ' : ''}`}
               style={{ backgroundColor: color.color }}
+              aria-label="Update Label Color"
             >
               &nbsp;
             </button>
@@ -293,6 +298,7 @@ const CypherResultCytoscapeFooter = ({
             type="button"
             className="frame-head-button btn btn-link px-3"
             onClick={() => setFooterExpanded(!footerExpanded)}
+            aria-label="Set Footer Expanded"
           >
             <FontAwesomeIcon
               icon={footerExpanded ? faAngleUp : faAngleDown}

diff --git a/frontend/src/components/cytoscape/CypherResultCytoscapeLegend.jsx b/frontend/src/components/cytoscape/CypherResultCytoscapeLegend.jsx
@@ -181,6 +181,7 @@ class CypherResultCytoscapeLegend extends Component {
             type="button"
             className="frame-head-button btn btn-link px-3"
             onClick={() => this.setState({ nodeLegendExpanded: !nodeLegendExpanded })}
+            aria-label="Node Legend"
           >
             <FontAwesomeIcon
               icon={nodeLegendExpanded ? faAngleUp : faAngleDown}
@@ -196,6 +197,7 @@ class CypherResultCytoscapeLegend extends Component {
             type="button"
             className="frame-head-button btn btn-link px-3"
             onClick={() => this.setState({ edgeLegendExpanded: !edgeLegendExpanded })}
+            aria-label="Edge Legend"
           >
             <FontAwesomeIcon
               icon={edgeLegendExpanded ? faAngleUp : faAngleDown}

diff --git a/frontend/src/components/sidebar/presentations/SidebarHome.jsx b/frontend/src/components/sidebar/presentations/SidebarHome.jsx
@@ -430,6 +430,7 @@ const SidebarHome = ({
               className="frame-head-button refresh_button btn btn-link"
               type="button"
               onClick={() => refreshSidebarHome()}
+              aria-label="Refresh Button"
             >
               <FontAwesomeIcon
                 icon={faRedo}
@@ -456,6 +457,7 @@ const SidebarHome = ({
                   return false;
                 },
               })}
+              aria-label="Close Button"
             >
               <FontAwesomeIcon
                 icon={faTimes}