Merge pull request #505 from Lemoncode/fixaccessibilitybug/canvas-list

Fixed minor bugs
Lemoncode · Jun 18, 2024 · b2889e2 · b2889e2
2 parents 5a7c37e + b1bd029
commit b2889e2
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -151,6 +151,7 @@
         font-weight: 600;
         letter-spacing: 0.2px;
         font-size: 20px;
+        cursor: pointer;
       }
       .info__group {
         display: flex;

diff --git a/src/common/a11y/select/select.hooks.ts b/src/common/a11y/select/select.hooks.ts
@@ -51,7 +51,8 @@ export const useA11ySelect = <Option>(
     );
   };
 
-  useOnKey(buttonRef, ['ArrowDown', 'ArrowUp'], () => {
+  useOnKey(buttonRef, ['ArrowDown', 'ArrowUp'], (e: KeyboardEvent) => {
+    e.preventDefault();
     if (!isOpen) {
       setIsOpen(true);
     }

diff --git a/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx
@@ -47,7 +47,9 @@ export const CollectionAccessible: React.FC<Props> = props => {
         </ul>
       ) : null}
       <h4>Fields for {table.tableName} collection</h4>
-      <FieldList fieldList={table.fields} listName={table.tableName} />
+      <ul>
+        <FieldList fieldList={table.fields} listName={table.tableName} />
+      </ul>
       <TableRelationsAccessible
         table={table}
         canvasSchema={canvasSchema}

diff --git a/src/pods/canvas/components/canvas-accessible/components/field-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/components/field-accessible.component.tsx
@@ -24,7 +24,11 @@ export const Field: React.FC<Props> = props => {
 
   const renderChildrenElement = (name: string, children?: FieldVm[]) => {
     if (children)
-      return <FieldList fieldList={children} listName={`${name} nested`} />;
+      return (
+        <ul>
+          <FieldList fieldList={children} listName={`${name} nested`} />
+        </ul>
+      );
   };
 
   return (

diff --git a/src/pods/canvas/components/canvas-accessible/components/field-list-accessible.component.tsx b/src/pods/canvas/components/canvas-accessible/components/field-list-accessible.component.tsx
@@ -10,11 +10,7 @@ interface Props {
 export const FieldList: React.FC<Props> = props => {
   const { fieldList, listName } = props;
 
-  return (
-    <ul>
-      {fieldList.map(field => (
-        <Field field={field} listName={listName} key={field.id} />
-      ))}
-    </ul>
-  );
+  return fieldList.map(field => (
+    <Field field={field} listName={listName} key={field.id} />
+  ));
 };