Merge remote-tracking branch 'origin/main' into fixaccessibilitybug/#499-13-Changing-the-order-of-toolbar-buttons-and-creating-button-groups

Author: deletidev

src/pods/canvas/canvas.pod.tsx

@@ -233,7 +233,7 @@ export const CanvasPod: React.FC = () => {
   }, [modalDialog.isOpen, canvasSchema.selectedElementId]);
 
   return (
-    <div
+    <main
       className={classes.container}
       ref={containerRef}
       onScroll={handleScroll}
@@ -282,6 +282,6 @@ export const CanvasPod: React.FC = () => {
           />
         )}
       </div>
-    </div>
+    </main>
   );
 };

src/pods/canvas/components/canvas-accessible/components/collection-accessible.component.tsx

@@ -28,20 +28,24 @@ export const CollectionAccessible: React.FC<Props> = props => {
     <>
       <h3 ref={collectionRefs.current[table.id]}>
         {table.tableName} collection
-        {!isTabletOrMobileDevice ? (
-          <>
+      </h3>
+      {!isTabletOrMobileDevice ? (
+        <ul>
+          <li>
             <button type="button" onClick={() => onEditTable(table)}>
               Edit {table.tableName} collection
             </button>
+          </li>
+          <li>
             <button
               type="button"
               onClick={() => onDeleteSelectedItem(table.id)}
             >
               Delete {table.tableName} collection
             </button>
-          </>
-        ) : null}
-      </h3>
+          </li>
+        </ul>
+      ) : null}
       <h4>Fields for {table.tableName} collection</h4>
       <FieldList fieldList={table.fields} listName={table.tableName} />
       <TableRelationsAccessible

src/pods/canvas/components/canvas-accessible/components/field-accessible.component.tsx

@@ -8,10 +8,18 @@ interface Props {
 }
 
 export const Field: React.FC<Props> = props => {
-  const { field, listName } = props;
+  const { field } = props;
 
   const renderNNElement = (NN?: boolean) => {
-    if (NN) return <span>NN</span>;
+    if (NN) return <span>Not Null</span>;
+  };
+  const renderArrayElement = (isArray?: boolean) => {
+    if (isArray)
+      return (
+        <>
+          <span>array</span>&nbsp;
+        </>
+      );
   };
 
   const renderChildrenElement = (name: string, children?: FieldVm[]) => {
@@ -20,9 +28,10 @@ export const Field: React.FC<Props> = props => {
   };
 
   return (
-    <li aria-label={`${listName} field`}>
-      <span>{field.name}</span>
-      <span>{field.type}</span>
+    <li>
+      <span>{field.name}</span>&nbsp;
+      <span>{field.type}</span>&nbsp;
+      {renderArrayElement(field.isArray)}
       {renderNNElement(field.isNN)}
       {renderChildrenElement(field.name, field.children)}
     </li>

src/pods/edit-table/components/field.tsx

@@ -37,9 +37,9 @@ interface Props {
 
 const INPUT_NAME = 'Field for field ';
 const CHECKBOX_PK = 'Primary key for field ';
-const CHECKBOX_FK = 'Checkbox fk for field ';
-const CHECKBOX_ARRAY = 'Checkbox isArray for field ';
-const CHECKBOX_ISNN = 'Checkbox isNN for field ';
+const CHECKBOX_FK = 'Foreign key for field ';
+const CHECKBOX_ARRAY = 'Array for field ';
+const CHECKBOX_ISNN = 'Not null for field ';
 const SELECT = 'Select field type for';
 const NESTED_FIELD_ADD_FIELD_LABEL = 'Add nested field for ';
 

src/pods/edit-table/edit-table.component.tsx

@@ -71,6 +71,7 @@ export const EditTableComponent: React.FC<Props> = props => {
             type="text"
             value={table.tableName}
             onChange={handleChangeTableName}
+            onFocus={e => e.currentTarget.select()}
           />
         </label>
       </div>

src/pods/footer/footer.component.tsx

@@ -29,11 +29,11 @@ export const FooterComponent: React.FC = () => {
       ? getFileNameCanvasIsPristine(filename, NEW_DOCUMENT_NAME)
       : getFileNameCanvasDirty(filename, NEW_DOCUMENT_NAME, ASTERISK);
   return (
-    <div className={classes.footerText}>
+    <footer className={classes.footerText}>
       <span>{isDevice ? documentNameMobile() : documentName()}</span>
       <button onClick={toggleTheme} className="mobile-only">
         {theme.themeMode === 'dark' ? <LightIcon /> : <DarkIcon />}
       </button>
-    </div>
+    </footer>
   );
 };

src/pods/toolbar/toolbar.pod.tsx

@@ -20,7 +20,7 @@ import classes from './toolbar.pod.module.css';
 
 export const ToolbarPod: React.FC = () => {
   return (
-    <div className={classes.container}>
+    <header className={classes.container}>
       <ul>
         <li>
           <NewButton />
@@ -67,6 +67,6 @@ export const ToolbarPod: React.FC = () => {
           <ThemeToggleButton darkLabel="Dark Mode" lightLabel="Light Mode" />
         </li>
       </ul>
-    </div>
+    </header>
   );
 };