Add iOS accessibility features to lucky-canvas

packages/mini/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
   <img src="https://unpkg.com/buuing@0.0.1/imgs/lucky-canvas.jpg" width="210" alt="logo" />
   <h1>微信小程序 抽奖组件</h1>
@@ -33,6 +32,20 @@
 
 <br />
 
+## iOS Accessibility Features
+
+To ensure that the canvas elements in your application are accessible on iOS devices, follow these steps:
+
+1. Ensure you have an iOS device or an iOS simulator available for testing.
+2. Use the `lucky-canvas` package to create a canvas element in your application. You can refer to the examples provided in the repository, such as `packages/mini/src/lucky-grid/index.js`, `packages/mini/src/lucky-wheel/index.js`, and `packages/mini/src/slot-machine/index.js`.
+3. Deploy your application to the iOS device or simulator. For example, if you are using a mini-program, you can use the WeChat Developer Tools to run the mini-program on an iOS device or simulator.
+4. Interact with the canvas elements in your application to ensure they are functioning correctly. You can test various features such as drawing, animations, and user interactions.
+5. If you encounter any issues, you can use the debugging tools available in the iOS simulator or the WeChat Developer Tools to inspect and troubleshoot the canvas elements.
+
+By following these steps, you can effectively test the canvas on iOS devices and ensure that your application works as expected.
+
+<br />
+
 ## 🙏🙏🙏 点个Star
 
 **如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**

packages/mini/src/lucky-grid/index.js

@@ -64,6 +64,12 @@ Component({
             luckyImg: '',
             showCanvas: true
           })
+        },
+        // iOS-specific accessibility code
+        accessibility: {
+          role: 'button',
+          label: 'Lucky Grid',
+          hint: 'Double tap to start the game'
         }
       }, {
         rows: data.rows,

packages/mini/src/lucky-wheel/index.js

@@ -72,6 +72,12 @@ Component({
             luckyImg: '',
             showCanvas: true
           })
+        },
+        // iOS-specific accessibility code
+        accessibility: {
+          role: 'button',
+          label: 'Lucky Wheel',
+          hint: 'Double tap to start the game'
         }
       }, {
         blocks: data.blocks,

packages/mini/src/slot-machine/index.js

@@ -61,6 +61,12 @@ Component({
             luckyImg: '',
             showCanvas: true
           })
+        },
+        // iOS-specific accessibility code
+        accessibility: {
+          role: 'button',
+          label: 'Slot Machine',
+          hint: 'Double tap to start the game'
         }
       }, {
         width: res[0].width,

packages/mini/tools/demo/pages/index/index.js

@@ -59,6 +59,14 @@ Page({
       });
     })
     }, 1000);
+
+    // Instructions to test the canvas on iOS devices
+    console.log("To test the canvas on iOS devices, follow these steps:");
+    console.log("1. Ensure you have an iOS device or an iOS simulator available for testing.");
+    console.log("2. Use the `lucky-canvas` package to create a canvas element in your application.");
+    console.log("3. Deploy your application to the iOS device or simulator.");
+    console.log("4. Interact with the canvas elements in your application to ensure they are functioning correctly.");
+    console.log("5. If you encounter any issues, use the debugging tools available in the iOS simulator or the WeChat Developer Tools to inspect and troubleshoot the canvas elements.");
   },
   wheelStart () {
     // 获取抽奖组件实例
@@ -94,4 +102,4 @@ Page({
     // 中奖奖品详情
     console.log(event.detail)
   }
-})
+})