Addressed the linting errors in your JSX files related to accessibili…

…ty (#165) * Addressed the linting errors in your JSX files related to accessibility * Looking of a node in the canvas added. and truncation of node and edges label added english label trunced after 8 characters and korean after 6 characters
apache · Mar 22, 2024 · f557486 · f557486
1 parent 194ff0e
commit f557486
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 908 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/cypherresult/presentations/CypherResultCytoscape.jsx b/frontend/src/components/cypherresult/presentations/CypherResultCytoscape.jsx
@@ -94,8 +94,15 @@ const CypherResultCytoscape = forwardRef((props, ref) => {
     setLegendData(addedLegendData);
     props.setChartLegend(addedLegendData);
   };
-
-  const changeColorOnCytoscapeElements = (elementType, label, color) => {
+  const truncateLabel = (label) => {
+    const maxLenEnglish = 8;
+    const maxLenKorean = 6;
+    const koreanCharRegex = /[\u3131-\uD79D]/ugi;
+    const maxLength = koreanCharRegex.test(label) ? maxLenKorean : maxLenEnglish;
+    return label.length > maxLength ? `${label.substring(0, maxLength)}...` : label;
+  };
+  const changeColorOnCytoscapeElements = (elementType, originalLabel, color) => {
+    const label = truncateLabel(originalLabel);
     const colorObject = Array.isArray(color) ? {
       color: color[0],
       borderColor: color[1],

diff --git a/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx b/frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx
@@ -35,6 +35,7 @@ import {
   faLockOpen,
   faProjectDiagram,
   faTrash,
+  faThumbtack,
 } from '@fortawesome/free-solid-svg-icons';
 import uuid from 'react-uuid';
 import cxtmenu from '../../lib/cytoscape-cxtmenu';
@@ -243,6 +244,18 @@ const CypherResultCytoscapeCharts = ({
               dispatch(addElementHistory(ele.id()));
             },
           },
+          {
+            content: ReactDOMServer.renderToString(
+              <FontAwesomeIcon icon={faThumbtack} size="lg" />,
+            ),
+            select(ele) {
+              if (!ele.locked()) {
+                ele.lock();
+              } else {
+                ele.unlock();
+              }
+            },
+          },
           {
             content: ReactDOMServer.renderToString(<IconFilter size="lg" />),
             select(ele) {

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}