refactor(resizable-layout-website): add aria role and label

asyncapi · Jul 12, 2024 · 31151ec · 31151ec
1 parent 512cb34
commit 31151ec
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/modelina-website/src/components/MonacoEditorWrapper.tsx b/modelina-website/src/components/MonacoEditorWrapper.tsx
@@ -59,6 +59,8 @@ export default function MonacoEditorWrapper({
 
   return (
     <Editor
+      role='figure'
+      ariaLabel='Code Editor'
       onMount={handleEditorDidMount}
       language={language}
       theme={theme}

diff --git a/modelina-website/src/components/playground/Content.tsx b/modelina-website/src/components/playground/Content.tsx
@@ -68,32 +68,36 @@ export const Content: FunctionComponent<ContentProps> = ({ setNewConfig, setNewQ
         })}
       >
           <Resizable
-            leftComponent={<div className={clsx('h-full rounded-b bg-code-editor-dark font-bold text-white shadow-lg', {
-              'hidden md:block': showInputEditor && !showOptions
-            })}>
-                <MonacoEditorWrapper
-                  value={input}
-                  onChange={(_, change) => {
-                    setInput(change);
-                    generateNewCode(change);
-                  }}
-                  editorDidMount={() => {
-                    setLoaded({ ...loaded, editorLoaded: true });
-                  }}
-                  language='json'
-                />
-            </div>}
-            rightComponent={<div className={clsx('size-full', {
-              'hidden md:block': !showInputEditor && !showOptions
-            })}>
-            {error ? (
-              <CustomError statusCode={statusCode} errorMessage={errorMessage} />
-            ) : (
-              <PlaygroundGeneratedContext.Provider value={PlaygroundGeneratedContextValue}>
-                <GeneratedModelsComponent setNewQuery={setNewQuery} />
-              </PlaygroundGeneratedContext.Provider>
-            )}
-          </div>} />
+            leftComponent={
+              <div className={clsx('h-full rounded-b bg-code-editor-dark font-bold text-white shadow-lg', {
+                'hidden md:block': showInputEditor && !showOptions
+              })}>
+                  <MonacoEditorWrapper
+                    value={input}
+                    onChange={(_, change) => {
+                      setInput(change);
+                      generateNewCode(change);
+                    }}
+                    editorDidMount={() => {
+                      setLoaded({ ...loaded, editorLoaded: true });
+                    }}
+                    language='json'
+                  />
+              </div>
+            }
+            rightComponent={
+              <div className={clsx('size-full', {
+                'hidden md:block': !showInputEditor && !showOptions
+              })}>
+                {error ? (
+                  <CustomError statusCode={statusCode} errorMessage={errorMessage} />
+                ) : (
+                  <PlaygroundGeneratedContext.Provider value={PlaygroundGeneratedContextValue}>
+                    <GeneratedModelsComponent setNewQuery={setNewQuery} />
+                  </PlaygroundGeneratedContext.Provider>
+                )}
+              </div>
+            } />
 
       </div>
     </div>