accessibility improved for itwin/imodel grid tiles (#137)

* added role and aria label for accessibility to tiles * Create nm-acessible-tiles_2025-01-10-00-19.json * onClick shifted
iTwin · Jan 10, 2025 · 143c4b4 · 143c4b4
1 parent 44536c1
commit 143c4b4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/common/changes/@itwin/imodel-browser-react/nm-acessible-tiles_2025-01-10-00-19.json b/common/changes/@itwin/imodel-browser-react/nm-acessible-tiles_2025-01-10-00-19.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "added accessibility to grid tiles",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}
diff --git a/packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinTile.tsx b/packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinTile.tsx
@@ -108,7 +108,10 @@ export const ITwinTile = ({
         moreOptions={moreOptions}
         thumbnail={
           <div
-            aria-label={onThumbnailClick ? strings.navigateToITwin : ""}
+            role="button"
+            aria-label={
+              onThumbnailClick ? `${strings.navigateToITwin} ${iTwin?.id}` : ""
+            }
             onClick={() => onThumbnailClick?.(iTwin)}
             style={{ cursor: onThumbnailClick ? "pointer" : "auto" }}
           >

diff --git a/packages/modules/imodel-browser/src/containers/iModelThumbnail/IModelThumbnail.tsx b/packages/modules/imodel-browser/src/containers/iModelThumbnail/IModelThumbnail.tsx
@@ -44,25 +44,31 @@ export const IModelThumbnail = ({
     inView ? accessToken : undefined,
     apiOverrides
   );
-  return thumbnail ? (
-    <img
-      className={classNames("iac-thumbnail", className)}
-      style={{
-        cursor: onClick ? "pointer" : "auto",
-        width: "100%",
-      }}
-      id="base64image"
-      src={thumbnail ?? ""}
-      alt=""
+  return (
+    <div
+      role="button"
+      aria-label={`Select iModel ${iModelId}`}
       onClick={() => onClick?.(iModelId)}
-    />
-  ) : (
-    <Text
-      as="p"
-      variant="body"
-      ref={ref}
-      isSkeleton={true}
-      style={{ height: "100%", width: "100%", margin: 0 }}
-    ></Text>
+    >
+      {thumbnail ? (
+        <img
+          className={classNames("iac-thumbnail", className)}
+          style={{
+            width: "100%",
+          }}
+          id="base64image"
+          src={thumbnail ?? ""}
+          alt=""
+        />
+      ) : (
+        <Text
+          as="p"
+          variant="body"
+          ref={ref}
+          isSkeleton={true}
+          style={{ height: "100%", width: "100%", margin: 0 }}
+        ></Text>
+      )}
+    </div>
   );
 };