gbu-accessibility-package 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +7 -0
  2. package/demo/picture-test.html +37 -0
  3. package/demo/picture-test.html.backup +37 -0
  4. package/lib/fixer.js +55 -0
  5. package/package.json +5 -6
package/README.md CHANGED
@@ -182,6 +182,7 @@ gbu-a11y --comprehensive
182
182
 
183
183
  ### 3. Role Attributes
184
184
  - **Images** → `role="img"`
185
+ - **Picture elements** → Moves `role="img"` from `<picture>` to `<img>` inside
185
186
  - **Links** → `role="link"`
186
187
  - **Clickable elements** → `role="button"`
187
188
  - **Navigation lists** → `role="menubar"`
@@ -190,11 +191,17 @@ gbu-a11y --comprehensive
190
191
  ```html
191
192
  <!-- Before -->
192
193
  <img src="icon.png" alt="Icon">
194
+ <picture role="img">
195
+ <img src="photo.jpg" alt="Photo">
196
+ </picture>
193
197
  <a href="/home">Home</a>
194
198
  <div class="btn-click">Click me</div>
195
199
 
196
200
  <!-- After -->
197
201
  <img src="icon.png" alt="Icon" role="img">
202
+ <picture>
203
+ <img src="photo.jpg" alt="Photo" role="img">
204
+ </picture>
198
205
  <a href="/home" role="link">Home</a>
199
206
  <div class="btn-click" role="button">Click me</div>
200
207
  ```
package/demo/picture-test.html ADDED
@@ -0,0 +1,37 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Picture Role Test</title>
7
+ </head>
8
+ <body>
9
+ <h1>Picture Role Test Cases</h1>
10
+
11
+ <!-- Test case 1: Picture with role="img" containing img without role -->
12
+ <picture>
13
+ <source srcset="image.webp" type="image/webp">
14
+ <img src="image.jpg" alt="Test image" role="img">
15
+ </picture>
16
+
17
+ <!-- Test case 2: Picture with role="img" containing img with role (should not change) -->
18
+ <picture role="img">
19
+ <source srcset="image2.webp" type="image/webp">
20
+ <img src="image2.jpg" alt="Test image 2" role="img">
21
+ </picture>
22
+
23
+ <!-- Test case 3: Picture without role containing img without role (should add role to img) -->
24
+ <picture>
25
+ <source srcset="image3.webp" type="image/webp">
26
+ <img src="image3.jpg" alt="Test image 3" role="img">
27
+ </picture>
28
+
29
+ <!-- Test case 4: Regular img without role (should add role) -->
30
+ <img src="regular.jpg" alt="Regular image" role="img">
31
+
32
+ <!-- Test case 5: Picture with role="img" but no img inside (should not change) -->
33
+ <picture role="img">
34
+ <source srcset="video.webp" type="image/webp">
35
+ </picture>
36
+ </body>
37
+ </html>
package/demo/picture-test.html.backup ADDED
@@ -0,0 +1,37 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Picture Role Test</title>
7
+ </head>
8
+ <body>
9
+ <h1>Picture Role Test Cases</h1>
10
+
11
+ <!-- Test case 1: Picture with role="img" containing img without role -->
12
+ <picture role="img">
13
+ <source srcset="image.webp" type="image/webp">
14
+ <img src="image.jpg" alt="Test image">
15
+ </picture>
16
+
17
+ <!-- Test case 2: Picture with role="img" containing img with role (should not change) -->
18
+ <picture role="img">
19
+ <source srcset="image2.webp" type="image/webp">
20
+ <img src="image2.jpg" alt="Test image 2" role="img">
21
+ </picture>
22
+
23
+ <!-- Test case 3: Picture without role containing img without role (should add role to img) -->
24
+ <picture>
25
+ <source srcset="image3.webp" type="image/webp">
26
+ <img src="image3.jpg" alt="Test image 3">
27
+ </picture>
28
+
29
+ <!-- Test case 4: Regular img without role (should add role) -->
30
+ <img src="regular.jpg" alt="Regular image">
31
+
32
+ <!-- Test case 5: Picture with role="img" but no img inside (should not change) -->
33
+ <picture role="img">
34
+ <source srcset="video.webp" type="image/webp">
35
+ </picture>
36
+ </body>
37
+ </html>
package/lib/fixer.js CHANGED
@@ -637,12 +637,67 @@ class AccessibilityFixer {
637
637
  }
638
638
  });
639
639
 
640
+ // Check for picture elements with role="img" that contain img elements
641
+ const pictureWithImgPattern = /<picture[^>]*role\s*=\s*["']img["'][^>]*>[\s\S]*?<img[^>]*>[\s\S]*?<\/picture>/gi;
642
+ const pictureWithImgMatches = content.match(pictureWithImgPattern) || [];
643
+ pictureWithImgMatches.forEach((pictureBlock, index) => {
644
+ const imgInPicture = pictureBlock.match(/<img[^>]*>/i);
645
+ if (imgInPicture && !/role\s*=/i.test(imgInPicture[0])) {
646
+ issues.push({
647
+ type: '🖼️ Role placement',
648
+ description: `Picture ${index + 1} has role="img" but should be on the img element inside`,
649
+ element: pictureBlock.substring(0, 100) + '...'
650
+ });
651
+ }
652
+ });
653
+
640
654
  return issues;
641
655
  }
642
656
 
657
+ fixPictureImgRoles(content) {
658
+ let fixed = content;
659
+
660
+ // Find all picture elements that contain img elements
661
+ const picturePattern = /<picture[^>]*role\s*=\s*["']img["'][^>]*>[\s\S]*?<\/picture>/gi;
662
+ const pictureMatches = content.match(picturePattern) || [];
663
+
664
+ for (const pictureBlock of pictureMatches) {
665
+ // Check if this picture contains an img element
666
+ const imgInPicture = pictureBlock.match(/<img[^>]*>/i);
667
+
668
+ if (imgInPicture) {
669
+ const imgTag = imgInPicture[0];
670
+
671
+ // Check if img already has role attribute
672
+ const imgHasRole = /role\s*=/i.test(imgTag);
673
+
674
+ if (!imgHasRole) {
675
+ // Remove role="img" from picture element
676
+ const pictureWithoutRole = pictureBlock.replace(/\s*role\s*=\s*["']img["']/i, '');
677
+
678
+ // Add role="img" to img element
679
+ const imgWithRole = imgTag.replace(/(<img[^>]*?)(\s*>)/i, '$1 role="img"$2');
680
+
681
+ // Replace the img in the modified picture block
682
+ const updatedPictureBlock = pictureWithoutRole.replace(imgTag, imgWithRole);
683
+
684
+ // Replace in the main content
685
+ fixed = fixed.replace(pictureBlock, updatedPictureBlock);
686
+
687
+ console.log(chalk.yellow(` 🖼️ Moved role="img" from <picture> to <img> element`));
688
+ }
689
+ }
690
+ }
691
+
692
+ return fixed;
693
+ }
694
+
643
695
  fixRoleAttributesInContent(content) {
644
696
  let fixed = content;
645
697
 
698
+ // Fix picture elements with img children - move role from picture to img
699
+ fixed = this.fixPictureImgRoles(fixed);
700
+
646
701
  // Fix all images - add role="img" (only if no role exists)
647
702
  fixed = fixed.replace(
648
703
  /<img([^>]*>)/gi,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gbu-accessibility-package",
3
- "version": "1.3.0",
3
+ "version": "1.5.0",
4
4
  "description": "Automated accessibility fixes for HTML files - Alt attributes, Lang attributes, Role attributes. Smart context-aware alt text generation with individual fix options and comprehensive role attribute management.",
5
5
  "main": "index.js",
6
6
  "bin": {
@@ -39,11 +39,11 @@
39
39
  "license": "MIT",
40
40
  "repository": {
41
41
  "type": "git",
42
- "url": "https://github.com/your-org/gbu-accessibility-package.git"
42
+ "url": "https://github.com/dangpv94/gbu-accessibility-tool.git"
43
43
  },
44
- "homepage": "https://github.com/your-org/gbu-accessibility-package#readme",
44
+ "homepage": "https://github.com/dangpv94/gbu-accessibility-tool#readme",
45
45
  "bugs": {
46
- "url": "https://github.com/your-org/gbu-accessibility-package/issues"
46
+ "url": "https://github.com/dangpv94/gbu-accessibility-tool/issues"
47
47
  },
48
48
  "files": [
49
49
  "lib/",
@@ -56,8 +56,7 @@
56
56
  "PACKAGE_SUMMARY.md"
57
57
  ],
58
58
  "dependencies": {
59
- "chalk": "^4.1.2",
60
- "gbu-accessibility-package": "^1.3.0"
59
+ "chalk": "^4.1.2"
61
60
  },
62
61
  "engines": {
63
62
  "node": ">=12.0.0"