Merge pull request #506 from Lemoncode/fixaccessibilitybug/expand-button-and-css-dev-canvas

Change the labels of the expand nested fields button and add styles f…

Author: brauliodiez

src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.module.css

@@ -5,7 +5,9 @@
   /* only for see the content while developing */
   /* 
   z-index: 1;
-  background-color: rgba(0, 0, 0, 0.908); */
+  background-color: rgba(0, 0, 0, 0.908);
+  text-align: left;
+  padding-left: 2rem; */
   /* comment for show accessibility canvas*/
   width: 1px;
   height: 1px;

src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx

@@ -33,9 +33,6 @@ export const CanvasAccessible: React.FC<CanvasAccessibleProps> = props => {
   }, []);
 
   return (
-    //Maybe it needs something for better accessibility.
-    //Before, the screen reader read all the content and displayed
-    // the levels of the titles and the list of items, now read all like plain text.
     <section
       className={classes.screenReaderOnly}
       tabIndex={-1}

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

@@ -134,8 +134,8 @@ export const Field: React.FC<Props> = props => {
                 onClick={() => toggleExpand(field.id)}
                 aria-label={
                   expandedFields.has(field.id)
-                    ? 'contract nested fields'
-                    : 'expand nested fields'
+                    ? `collapse nested fields of "${field.name}"`
+                    : `expand nested fields of "${field.name}"`
                 }
               >
                 {expandedFields.has(field.id) ? (