Image accessibility

Author: Raushen

apps/demos/Demos/DataGrid/AIColumn/jQuery/index.html

@@ -13,8 +13,8 @@
 
       window.AzureOpenAI = AzureOpenAI;
     </script>
-    <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script>
     <script src="data.js"></script>
+    <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script>
     <script src="index.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>

apps/demos/Demos/DataGrid/AIColumn/jQuery/index.js

@@ -100,6 +100,9 @@ $(() => {
       src: `../../../../images/vehicles/image_${ID}.png`,
       alt: `${TrademarkName} ${Name}`,
       tabindex: 0,
+      role: 'button',
+      'aria-haspopup': 'dialog',
+      'aria-label': `${TrademarkName} ${Name} - press Enter for image info`,
     });
 
     const showPopup = () => {

apps/demos/Demos/TreeList/AIColumn/jQuery/index.js

@@ -110,6 +110,9 @@ $(() => {
       src: `../../../../images/vehicles/image_${ID}.png`,
       alt: `${TrademarkName} ${Name}`,
       tabindex: 0,
+      role: 'button',
+      'aria-haspopup': 'dialog',
+      'aria-label': `${TrademarkName} ${Name} - press Enter for image info`,
     });
 
     const showPopup = () => {