fix: add Enter key support and aria-labels to interactive controls

Author: avinxshKD

src/component/FullScreenButton.jsx

@@ -15,7 +15,11 @@ export default function FullScreenButton() {
     };
 
     return (
-        <button type="button" onClick={toggleFullscreen}>
+        <button
+            type="button"
+            aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+            onClick={toggleFullscreen}
+        >
             {isFullscreen ? <Minimize size={20} /> : <Maximize size={20} />}
         </button>
     );

src/component/HeaderComps.jsx

@@ -37,7 +37,7 @@ const Switcher = ({
         tabIndex={tabIndex}
         className={`tool ${active ? 'active' : ''}`}
         onClick={action}
-        onKeyDown={(ev) => ev.key === ' ' && action()}
+        onKeyDown={(ev) => (ev.key === ' ' || ev.key === 'Enter') && action()}
     >
         {Icon && <div className="icon"><Icon size="20" /></div>}
         <Switch
@@ -60,7 +60,7 @@ const ActionButton = ({
         tabIndex={tabIndex}
         className={`tool ${active ? 'active' : ''}`}
         onClick={() => (active && action())}
-        onKeyDown={(ev) => active && ev.key === ' ' && action()}
+        onKeyDown={(ev) => active && (ev.key === ' ' || ev.key === 'Enter') && action()}
         data-tip={hotkey ? hotkey.split(',')[0] : ''}
         style={{ display: `${visibility ? '' : 'none'}` }}
     >

src/component/TabBar.jsx

@@ -79,6 +79,7 @@ const TabBar = ({ superState, dispatcher }) => {
                 onClick={newProject.bind(this, superState, dispatcher)}
                 type="button"
                 id="new_graph"
+                aria-label="New workflow tab"
                 data-tip="New Workflow Tab (Ctrl + Shift + M)"
             >
                 <MdAdd size={25} />
@@ -88,7 +89,7 @@ const TabBar = ({ superState, dispatcher }) => {
                     key={el.graphID}
                     className={`tab tab-graph ${superState.curGraphIndex === i ? 'selected' : 'none'}`}
                     onClick={() => dispatcher({ type: T.CHANGE_TAB, payload: i })}
-                    onKeyDown={(ev) => ev.key === ' ' && dispatcher({ type: T.CHANGE_TAB, payload: i })}
+                    onKeyDown={(ev) => (ev.key === ' ' || ev.key === 'Enter') && dispatcher({ type: T.CHANGE_TAB, payload: i })}
                     role="button"
                     tabIndex={0}
                     id={`tab_${i}`}
@@ -102,6 +103,7 @@ const TabBar = ({ superState, dispatcher }) => {
                             className="tab-act edit"
                             onClick={editCur}
                             type="button"
+                            aria-label="Edit workflow details"
                             data-tip="Edit Workflow Details (Ctrl + Shift + E)"
                             data-for="header-tab"
                         >
@@ -112,6 +114,7 @@ const TabBar = ({ superState, dispatcher }) => {
                         className="tab-act close"
                         onClick={handleRequestCloseTab.bind(this, i)}
                         type="button"
+                        aria-label="Close workflow tab"
                         data-tip="Close current Workflow (Ctrl + Shift + L)"
                         data-for="header-tab"
                     >

src/component/ZoomSetter.jsx

@@ -19,19 +19,21 @@ const ZoomComp = ({ superState, dispatcher }) => {
                 <div
                     role="button"
                     tabIndex={0}
+                    aria-label="Reset zoom"
                     className="zoom-box zoom-btn"
                     onClick={() => myGraph.resetZoom()}
-                    onKeyDown={(ev) => ev.key === ' ' && (myGraph.resetZoom())}
+                    onKeyDown={(ev) => (ev.key === ' ' || ev.key === 'Enter') && myGraph.resetZoom()}
                 >
                     <BiReset />
 
                 </div>
                 <div
                     role="button"
                     tabIndex={0}
+                    aria-label="Fit to screen"
                     className="zoom-box zoom-btn"
                     onClick={() => myGraph.fitZoom()}
-                    onKeyDown={(ev) => ev.key === ' ' && (myGraph.resetZoom())}
+                    onKeyDown={(ev) => (ev.key === ' ' || ev.key === 'Enter') && myGraph.fitZoom()}
                 >
                     <BiRectangle />