adding new class and tab setting enable for this

Author: Jatin24062005

client/modules/IDE/components/SketchListRowBase.jsx

@@ -126,8 +126,26 @@ const SketchListRowBase = ({
   return (
     <tr className="sketches-table__row">
       <th scope="row">{name}</th>
-      <td>{formatDateCell(sketch.createdAt, mobile)}</td>
-      <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
+      <td
+        className="sketches-table__date-cell"
+        tabIndex={0}
+        aria-label={`${t('SketchList.HeaderCreatedAt')}: ${formatDateCell(
+          sketch.createdAt,
+          mobile
+        )}`}
+      >
+        {formatDateCell(sketch.createdAt, mobile)}
+      </td>
+      <td
+        className="sketches-table__date-cell"
+        tabIndex={0}
+        aria-label={`${t('SketchList.HeaderUpdatedAt')}: ${formatDateCell(
+          sketch.updatedAt,
+          mobile
+        )}`}
+      >
+        {formatDateCell(sketch.updatedAt, mobile)}
+      </td>
       <td hidden={!userIsOwner || mobile}>
         <VisibilityDropdown
           sketch={sketch}

client/styles/abstracts/_variables.scss

@@ -53,6 +53,7 @@ $themes: (
     console-header-background-color: $medium-light,
     console-header-color: $darker,
     console-input-background-color: $lightest,
+    date-created-updated: $outline-color,
     editor-gutter-color: $lighter,
     error-color: $p5js-pink,
     file-hover-color: $light,

client/styles/components/_sketch-list.scss

@@ -297,4 +297,9 @@
     color: getThemifyVariable("logo-color");
   }
   text-decoration-thickness: 0.1em;
+}
+.sketches-table__date-cell:focus-visible {
+  outline: 2px solid #53d2f7;
+  outline-offset: 2px;
+  border-radius: 2px;
 }