gbu-accessibility-package 3.5.0 ā 3.8.1
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.
- package/CHANGELOG.md +63 -0
- package/README-vi.md +51 -7
- package/README.md +50 -7
- package/bin/fix.js +140 -0
- package/bin/test.js +71 -0
- package/cli.js +97 -5
- package/lib/fixer.js +1494 -122
- package/package.json +16 -5
- package/ENHANCED_ALT_FEATURES.md +0 -230
- package/demo/advanced-test.html +0 -44
- package/demo/aria-label-test.html +0 -32
- package/demo/broken-links-test.html +0 -41
- package/demo/comprehensive-test.html +0 -21
- package/demo/demo.js +0 -73
- package/demo/duplicate-roles.html +0 -45
- package/demo/enhanced-alt-test.html +0 -150
- package/demo/form-labels-test.html +0 -87
- package/demo/heading-structure-test.html +0 -60
- package/demo/nested-controls-test.html +0 -92
- package/demo/sample.html +0 -47
- package/example.js +0 -121
|
@@ -1,150 +0,0 @@
|
|
|
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>Enhanced Alt Attribute Test Cases</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<header>
|
|
10
|
-
<h1>Enhanced Alt Attribute Testing</h1>
|
|
11
|
-
<p>Test cases for diverse alt attribute checking and generation</p>
|
|
12
|
-
</header>
|
|
13
|
-
|
|
14
|
-
<main>
|
|
15
|
-
<!-- Test Case 1: Missing alt attribute -->
|
|
16
|
-
<section>
|
|
17
|
-
<h2>Company Logo</h2>
|
|
18
|
-
<p>Welcome to our innovative technology company</p>
|
|
19
|
-
<img src="company-logo.png" width="200" height="100">
|
|
20
|
-
</section>
|
|
21
|
-
|
|
22
|
-
<!-- Test Case 2: Empty alt attribute for content image -->
|
|
23
|
-
<section>
|
|
24
|
-
<h2>Product Showcase</h2>
|
|
25
|
-
<p>Our latest smartphone with advanced features</p>
|
|
26
|
-
<img src="smartphone-product.jpg" alt="" width="300" height="200">
|
|
27
|
-
</section>
|
|
28
|
-
|
|
29
|
-
<!-- Test Case 3: Alt text too long -->
|
|
30
|
-
<section>
|
|
31
|
-
<h2>Team Photo</h2>
|
|
32
|
-
<img src="team-photo.jpg" alt="This is a very long description of our amazing team photo showing all the wonderful people who work at our company including engineers, designers, managers, and other staff members working together in our beautiful modern office space" width="400" height="300">
|
|
33
|
-
</section>
|
|
34
|
-
|
|
35
|
-
<!-- Test Case 4: Alt text with redundant words -->
|
|
36
|
-
<section>
|
|
37
|
-
<h2>Office Environment</h2>
|
|
38
|
-
<img src="office.jpg" alt="Image of office picture showing workplace photo" width="350" height="250">
|
|
39
|
-
</section>
|
|
40
|
-
|
|
41
|
-
<!-- Test Case 5: Generic alt text -->
|
|
42
|
-
<section>
|
|
43
|
-
<h2>Learn More</h2>
|
|
44
|
-
<p>Discover our services</p>
|
|
45
|
-
<a href="/services">
|
|
46
|
-
<img src="arrow-right.png" alt="Click here" width="24" height="24">
|
|
47
|
-
</a>
|
|
48
|
-
</section>
|
|
49
|
-
|
|
50
|
-
<!-- Test Case 6: Data visualization without proper description -->
|
|
51
|
-
<section>
|
|
52
|
-
<h2>Sales Performance</h2>
|
|
53
|
-
<p>Our sales increased by 25% this quarter</p>
|
|
54
|
-
<img src="sales-chart.png" alt="Chart" width="500" height="300">
|
|
55
|
-
</section>
|
|
56
|
-
|
|
57
|
-
<!-- Test Case 7: Decorative image with content alt -->
|
|
58
|
-
<section>
|
|
59
|
-
<h2>Welcome Section</h2>
|
|
60
|
-
<img src="decorative-border.png" alt="Beautiful decorative border image" width="100%" height="20">
|
|
61
|
-
<p>Welcome to our website</p>
|
|
62
|
-
</section>
|
|
63
|
-
|
|
64
|
-
<!-- Test Case 8: Functional icon without proper description -->
|
|
65
|
-
<section>
|
|
66
|
-
<h2>Contact Us</h2>
|
|
67
|
-
<button onclick="openChat()">
|
|
68
|
-
<img src="chat-icon.svg" alt="Icon" width="20" height="20">
|
|
69
|
-
</button>
|
|
70
|
-
</section>
|
|
71
|
-
|
|
72
|
-
<!-- Test Case 9: Complex image needing detailed description -->
|
|
73
|
-
<section>
|
|
74
|
-
<h2>System Architecture</h2>
|
|
75
|
-
<p>Our microservices architecture overview</p>
|
|
76
|
-
<img src="architecture-diagram.png" alt="Diagram" width="600" height="400">
|
|
77
|
-
</section>
|
|
78
|
-
|
|
79
|
-
<!-- Test Case 10: Image with filename in alt text -->
|
|
80
|
-
<section>
|
|
81
|
-
<h2>Product Features</h2>
|
|
82
|
-
<img src="feature-screenshot.png" alt="feature-screenshot.png showing app interface" width="300" height="200">
|
|
83
|
-
</section>
|
|
84
|
-
|
|
85
|
-
<!-- Test Case 11: Logo without "logo" in alt text -->
|
|
86
|
-
<section>
|
|
87
|
-
<h2>Partners</h2>
|
|
88
|
-
<img src="partner-logo.png" alt="Microsoft" width="150" height="75">
|
|
89
|
-
</section>
|
|
90
|
-
|
|
91
|
-
<!-- Test Case 12: Chart with some data context -->
|
|
92
|
-
<section>
|
|
93
|
-
<h2>Growth Metrics</h2>
|
|
94
|
-
<p>User growth from 1000 to 5000 users, showing 400% increase</p>
|
|
95
|
-
<img src="growth-chart.png" alt="User growth statistics" width="400" height="250">
|
|
96
|
-
</section>
|
|
97
|
-
|
|
98
|
-
<!-- Test Case 13: Image in figure with figcaption -->
|
|
99
|
-
<figure>
|
|
100
|
-
<img src="research-data.jpg" alt="" width="350" height="200">
|
|
101
|
-
<figcaption>Research findings from our latest study on user behavior patterns</figcaption>
|
|
102
|
-
</figure>
|
|
103
|
-
|
|
104
|
-
<!-- Test Case 14: Multiple images with similar generic alt text -->
|
|
105
|
-
<section>
|
|
106
|
-
<h2>Gallery</h2>
|
|
107
|
-
<img src="photo1.jpg" alt="Photo" width="200" height="150">
|
|
108
|
-
<img src="photo2.jpg" alt="Photo" width="200" height="150">
|
|
109
|
-
<img src="photo3.jpg" alt="Photo" width="200" height="150">
|
|
110
|
-
</section>
|
|
111
|
-
|
|
112
|
-
<!-- Test Case 15: Image with inconsistent alt and aria-label -->
|
|
113
|
-
<section>
|
|
114
|
-
<h2>Navigation</h2>
|
|
115
|
-
<img src="home-icon.png" alt="Home" aria-label="Go to homepage" width="32" height="32">
|
|
116
|
-
</section>
|
|
117
|
-
|
|
118
|
-
<!-- Test Case 16: Food image in restaurant context -->
|
|
119
|
-
<section>
|
|
120
|
-
<h2>Today's Special</h2>
|
|
121
|
-
<p>Delicious authentic Japanese cuisine</p>
|
|
122
|
-
<img src="sushi-plate.jpg" alt="" width="300" height="200">
|
|
123
|
-
</section>
|
|
124
|
-
|
|
125
|
-
<!-- Test Case 17: Technology device in business context -->
|
|
126
|
-
<section>
|
|
127
|
-
<h2>Enterprise Solutions</h2>
|
|
128
|
-
<p>Professional laptop for business productivity</p>
|
|
129
|
-
<img src="business-laptop.jpg" width="250" height="180">
|
|
130
|
-
</section>
|
|
131
|
-
|
|
132
|
-
<!-- Test Case 18: Nature image in lifestyle context -->
|
|
133
|
-
<section>
|
|
134
|
-
<h2>Wellness Program</h2>
|
|
135
|
-
<p>Find peace and tranquility in nature</p>
|
|
136
|
-
<img src="peaceful-forest.jpg" alt="" width="400" height="250">
|
|
137
|
-
</section>
|
|
138
|
-
</main>
|
|
139
|
-
|
|
140
|
-
<footer>
|
|
141
|
-
<p>Enhanced Alt Attribute Test Cases - GBU Accessibility Tool</p>
|
|
142
|
-
</footer>
|
|
143
|
-
|
|
144
|
-
<script>
|
|
145
|
-
function openChat() {
|
|
146
|
-
alert('Chat opened!');
|
|
147
|
-
}
|
|
148
|
-
</script>
|
|
149
|
-
</body>
|
|
150
|
-
</html>
|
|
@@ -1,87 +0,0 @@
|
|
|
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>Form Labels Test - Accessibility Issues</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<h1>Form Labels Test Cases</h1>
|
|
10
|
-
|
|
11
|
-
<!-- Test Case 1: Input without any label -->
|
|
12
|
-
<div>
|
|
13
|
-
<input type="text" name="username">
|
|
14
|
-
</div>
|
|
15
|
-
|
|
16
|
-
<!-- Test Case 2: Input with empty label -->
|
|
17
|
-
<div>
|
|
18
|
-
<label for="email"></label>
|
|
19
|
-
<input type="email" id="email" name="email">
|
|
20
|
-
</div>
|
|
21
|
-
|
|
22
|
-
<!-- Test Case 3: Input without aria-label -->
|
|
23
|
-
<div>
|
|
24
|
-
<input type="password" name="password" placeholder="Enter password">
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<!-- Test Case 4: Input with invalid aria-labelledby -->
|
|
28
|
-
<div>
|
|
29
|
-
<input type="tel" name="phone" aria-labelledby="nonexistent-id">
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<!-- Test Case 5: Input without title attribute -->
|
|
33
|
-
<div>
|
|
34
|
-
<input type="url" name="website">
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
<!-- Test Case 6: Textarea without proper labeling -->
|
|
38
|
-
<div>
|
|
39
|
-
<textarea name="comments"></textarea>
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
<!-- Test Case 7: Select without proper labeling -->
|
|
43
|
-
<div>
|
|
44
|
-
<select name="country">
|
|
45
|
-
<option value="">Choose country</option>
|
|
46
|
-
<option value="jp">Japan</option>
|
|
47
|
-
<option value="us">USA</option>
|
|
48
|
-
</select>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
<!-- Test Case 8: Input with implicit label but empty text -->
|
|
52
|
-
<div>
|
|
53
|
-
<label><input type="checkbox" name="agree"></label>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<!-- Test Case 9: Input with aria-labelledby pointing to empty element -->
|
|
57
|
-
<div>
|
|
58
|
-
<span id="empty-label"></span>
|
|
59
|
-
<input type="number" name="age" aria-labelledby="empty-label">
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<!-- Test Case 10: Input without role override -->
|
|
63
|
-
<div>
|
|
64
|
-
<input type="range" name="volume" min="0" max="100">
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
<!-- Test Case 11: Multiple inputs without proper structure -->
|
|
68
|
-
<form>
|
|
69
|
-
<input type="text" name="firstname">
|
|
70
|
-
<input type="text" name="lastname">
|
|
71
|
-
<input type="email" name="user_email">
|
|
72
|
-
<textarea name="message"></textarea>
|
|
73
|
-
<select name="priority">
|
|
74
|
-
<option value="low">Low</option>
|
|
75
|
-
<option value="high">High</option>
|
|
76
|
-
</select>
|
|
77
|
-
<input type="submit" value="Submit">
|
|
78
|
-
</form>
|
|
79
|
-
|
|
80
|
-
<!-- Test Case 12: Inputs with only placeholder (not sufficient) -->
|
|
81
|
-
<div>
|
|
82
|
-
<input type="search" name="query" placeholder="Search...">
|
|
83
|
-
<input type="date" name="birthdate" placeholder="Select date">
|
|
84
|
-
<input type="time" name="appointment" placeholder="Select time">
|
|
85
|
-
</div>
|
|
86
|
-
</body>
|
|
87
|
-
</html>
|
|
@@ -1,60 +0,0 @@
|
|
|
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>Heading Structure Test - Accessibility Issues</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<h1>Heading Structure Test Cases</h1>
|
|
10
|
-
|
|
11
|
-
<!-- Test Case 1: Missing h1 (this will be converted from h2) -->
|
|
12
|
-
<h2>This should be h1</h2>
|
|
13
|
-
<p>Main content of the page</p>
|
|
14
|
-
|
|
15
|
-
<!-- Test Case 2: Multiple h1 elements -->
|
|
16
|
-
<h1>First h1 (should stay)</h1>
|
|
17
|
-
<h1>Second h1 (should become h2)</h1>
|
|
18
|
-
<h1>Third h1 (should become h2)</h1>
|
|
19
|
-
|
|
20
|
-
<!-- Test Case 3: Level skipping -->
|
|
21
|
-
<h2>Section heading</h2>
|
|
22
|
-
<h4>Subsection (skips h3 - should become h3)</h4>
|
|
23
|
-
<h6>Sub-subsection (skips h4, h5 - should become h4)</h6>
|
|
24
|
-
|
|
25
|
-
<!-- Test Case 4: Empty headings -->
|
|
26
|
-
<h3></h3>
|
|
27
|
-
<h4> </h4>
|
|
28
|
-
<h5><span></span></h5>
|
|
29
|
-
|
|
30
|
-
<!-- Test Case 5: Duplicate headings -->
|
|
31
|
-
<h2>Products</h2>
|
|
32
|
-
<p>Some content about products</p>
|
|
33
|
-
<h2>Products</h2>
|
|
34
|
-
<p>More content about products</p>
|
|
35
|
-
|
|
36
|
-
<!-- Test Case 6: Proper structure (should not be changed) -->
|
|
37
|
-
<h2>Proper Section</h2>
|
|
38
|
-
<h3>Proper Subsection</h3>
|
|
39
|
-
<h4>Proper Sub-subsection</h4>
|
|
40
|
-
<p>Content with proper heading hierarchy</p>
|
|
41
|
-
|
|
42
|
-
<!-- Test Case 7: Complex nesting with issues -->
|
|
43
|
-
<h2>Services</h2>
|
|
44
|
-
<h5>Service 1 (should be h3)</h5>
|
|
45
|
-
<h6>Details (should be h4)</h6>
|
|
46
|
-
<h3>Service 2 (correct)</h3>
|
|
47
|
-
<h5>More details (should be h4)</h5>
|
|
48
|
-
|
|
49
|
-
<!-- Test Case 8: Empty headings with context -->
|
|
50
|
-
<div class="section">
|
|
51
|
-
<h3></h3>
|
|
52
|
-
<p>This section talks about our company history and achievements.</p>
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
<div class="product-info">
|
|
56
|
-
<h4> </h4>
|
|
57
|
-
<p>Our flagship product offers innovative solutions for modern businesses.</p>
|
|
58
|
-
</div>
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
|
@@ -1,92 +0,0 @@
|
|
|
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>Nested Interactive Controls Test - Accessibility Issues</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<h1>Nested Interactive Controls Test Cases</h1>
|
|
10
|
-
|
|
11
|
-
<!-- Test Case 1: div[role="button"] containing links (like in the axe error) -->
|
|
12
|
-
<div class="card-buttons" role="button">
|
|
13
|
-
<a href="https://business.mobile.rakuten.co.jp/solution/service/rakuten-ai-for-business/?scid=we_solution09_2504" class="btn btn-secondary" target="_blank" role="link">č©³ē“°ćč¦ć</a>
|
|
14
|
-
<a href="https://business.mobile.rakuten.co.jp/solution/ai/inquiry/?l=id=solution_ai_inquiry1&scid=we_solution10_2504" class="btn btn-primary" target="_blank" role="link">ćåćåćć</a>
|
|
15
|
-
</div>
|
|
16
|
-
|
|
17
|
-
<!-- Test Case 2: Button containing links -->
|
|
18
|
-
<button type="button" onclick="handleClick()">
|
|
19
|
-
<a href="/page1">Link inside button</a>
|
|
20
|
-
<span>Click me</span>
|
|
21
|
-
</button>
|
|
22
|
-
|
|
23
|
-
<!-- Test Case 3: Link containing button -->
|
|
24
|
-
<a href="/page2">
|
|
25
|
-
<button type="button">Button inside link</button>
|
|
26
|
-
</a>
|
|
27
|
-
|
|
28
|
-
<!-- Test Case 4: div[role="button"] containing input -->
|
|
29
|
-
<div role="button" tabindex="0" onclick="submit()">
|
|
30
|
-
<input type="text" placeholder="Search...">
|
|
31
|
-
<span>Submit</span>
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<!-- Test Case 5: Link containing select -->
|
|
35
|
-
<a href="/settings">
|
|
36
|
-
<select name="language">
|
|
37
|
-
<option value="ja">Japanese</option>
|
|
38
|
-
<option value="en">English</option>
|
|
39
|
-
</select>
|
|
40
|
-
Settings
|
|
41
|
-
</a>
|
|
42
|
-
|
|
43
|
-
<!-- Test Case 6: Button containing textarea -->
|
|
44
|
-
<button type="submit">
|
|
45
|
-
<textarea name="comment" placeholder="Enter comment"></textarea>
|
|
46
|
-
<span>Send</span>
|
|
47
|
-
</button>
|
|
48
|
-
|
|
49
|
-
<!-- Test Case 7: Multiple levels of nesting -->
|
|
50
|
-
<div role="button" tabindex="0">
|
|
51
|
-
<div class="container">
|
|
52
|
-
<a href="/nested">
|
|
53
|
-
<button type="button">Deeply nested</button>
|
|
54
|
-
</a>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<!-- Test Case 8: div[role="button"] with tabindex containing interactive elements -->
|
|
59
|
-
<div role="button" tabindex="0" onclick="handleAction()">
|
|
60
|
-
<input type="checkbox" id="agree">
|
|
61
|
-
<label for="agree">I agree</label>
|
|
62
|
-
<a href="/terms">Terms</a>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<!-- Test Case 9: Link containing details/summary -->
|
|
66
|
-
<a href="/info">
|
|
67
|
-
<details>
|
|
68
|
-
<summary>More info</summary>
|
|
69
|
-
<p>Details content</p>
|
|
70
|
-
</details>
|
|
71
|
-
</a>
|
|
72
|
-
|
|
73
|
-
<!-- Test Case 10: Form elements nested in buttons -->
|
|
74
|
-
<button type="button" class="form-button">
|
|
75
|
-
<input type="radio" name="choice" value="1">
|
|
76
|
-
<input type="radio" name="choice" value="2">
|
|
77
|
-
<span>Choose option</span>
|
|
78
|
-
</button>
|
|
79
|
-
|
|
80
|
-
<!-- Test Case 11: Correct structure (should not be flagged) -->
|
|
81
|
-
<div class="card-buttons">
|
|
82
|
-
<a href="/page1" class="btn btn-secondary">č©³ē“°ćč¦ć</a>
|
|
83
|
-
<a href="/page2" class="btn btn-primary">ćåćåćć</a>
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
<!-- Test Case 12: Another correct structure -->
|
|
87
|
-
<button type="button" onclick="handleClick()">
|
|
88
|
-
<span>Click me</span>
|
|
89
|
-
<i class="icon"></i>
|
|
90
|
-
</button>
|
|
91
|
-
</body>
|
|
92
|
-
</html>
|
package/demo/sample.html
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="ja">
|
|
3
|
-
<head>
|
|
4
|
-
<title>Demo HTML for Accessibility Testing</title>
|
|
5
|
-
</head>
|
|
6
|
-
<body>
|
|
7
|
-
<h1>Sample Website</h1>
|
|
8
|
-
|
|
9
|
-
<!-- Images without alt or role -->
|
|
10
|
-
<img src="logo.png" alt="Sample Website" role="img" role="img" role="img">
|
|
11
|
-
<img src="banner.jpg" alt="Sample Website" role="img" role="img" role="img">
|
|
12
|
-
<img src="icon.svg" alt="Home Icon" role="img" role="img" role="img">
|
|
13
|
-
|
|
14
|
-
<!-- Links without role -->
|
|
15
|
-
<a href="/home" role="link" role="link" role="link">Home</a>
|
|
16
|
-
<a href="/about" role="link" role="link" role="link">About Us</a>
|
|
17
|
-
|
|
18
|
-
<!-- Buttons without role -->
|
|
19
|
-
<button onclick="submit()" role="button" role="button" role="button">Submit Form</button>
|
|
20
|
-
<button type="button">Regular Button</button>
|
|
21
|
-
|
|
22
|
-
<!-- Clickable elements -->
|
|
23
|
-
<div onclick="navigate()" class="btn" role="button" role="button" role="button" role="button" role="button" role="button">Click Me</div>
|
|
24
|
-
<span onclick="toggle()" role="button" role="button" role="button">Toggle</span>
|
|
25
|
-
|
|
26
|
-
<!-- Navigation -->
|
|
27
|
-
<nav>
|
|
28
|
-
<ul class="nav-menu" role="menubar" role="menubar" role="menubar">
|
|
29
|
-
<li class="nav-item" role="menuitem"><a href="/products" role="link" role="link" role="link">Products</a></li>
|
|
30
|
-
<li class="nav-item" role="menuitem"><a href="/services" role="link" role="link" role="link">Services</a></li>
|
|
31
|
-
</ul>
|
|
32
|
-
</nav>
|
|
33
|
-
|
|
34
|
-
<!-- More content -->
|
|
35
|
-
<main>
|
|
36
|
-
<article>
|
|
37
|
-
<h2>Article Title</h2>
|
|
38
|
-
<p>Some content here...</p>
|
|
39
|
-
<img src="article-image.jpg" alt="Article Title" role="img" role="img" role="img">
|
|
40
|
-
</article>
|
|
41
|
-
</main>
|
|
42
|
-
|
|
43
|
-
<footer>
|
|
44
|
-
<p>© 2024 Demo Company</p>
|
|
45
|
-
</footer>
|
|
46
|
-
</body>
|
|
47
|
-
</html>
|
package/example.js
DELETED
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Example usage of Accessibility Fixer
|
|
3
|
-
* Demonstrates different ways to use the tool
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
const AccessibilityFixer = require('./lib/fixer.js');
|
|
7
|
-
const chalk = require('chalk');
|
|
8
|
-
|
|
9
|
-
async function example1_BasicUsage() {
|
|
10
|
-
console.log(chalk.blue('\nš Example 1: Basic Usage'));
|
|
11
|
-
|
|
12
|
-
const fixer = new AccessibilityFixer({
|
|
13
|
-
language: 'ja',
|
|
14
|
-
backupFiles: true,
|
|
15
|
-
dryRun: true // Preview mode
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
// Fix all accessibility issues
|
|
19
|
-
await fixer.fixHtmlLang('./demo');
|
|
20
|
-
await fixer.fixEmptyAltAttributes('./demo');
|
|
21
|
-
await fixer.fixRoleAttributes('./demo');
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
async function example2_EnglishProject() {
|
|
25
|
-
console.log(chalk.blue('\nš Example 2: English Project'));
|
|
26
|
-
|
|
27
|
-
const fixer = new AccessibilityFixer({
|
|
28
|
-
language: 'en',
|
|
29
|
-
backupFiles: false,
|
|
30
|
-
dryRun: false
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
const results = await fixer.fixRoleAttributes('./demo');
|
|
34
|
-
console.log(`Fixed ${results.filter(r => r.status === 'fixed').length} files`);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
async function example3_StepByStep() {
|
|
38
|
-
console.log(chalk.blue('\nš Example 3: Step by Step'));
|
|
39
|
-
|
|
40
|
-
const fixer = new AccessibilityFixer({
|
|
41
|
-
language: 'vi',
|
|
42
|
-
backupFiles: true,
|
|
43
|
-
dryRun: false
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
// Step 1: Fix lang attributes first
|
|
47
|
-
console.log('Step 1: Lang attributes...');
|
|
48
|
-
await fixer.fixHtmlLang('./demo');
|
|
49
|
-
|
|
50
|
-
// Step 2: Fix alt attributes
|
|
51
|
-
console.log('Step 2: Alt attributes...');
|
|
52
|
-
await fixer.fixEmptyAltAttributes('./demo');
|
|
53
|
-
|
|
54
|
-
// Step 3: Fix role attributes
|
|
55
|
-
console.log('Step 3: Role attributes...');
|
|
56
|
-
await fixer.fixRoleAttributes('./demo');
|
|
57
|
-
|
|
58
|
-
console.log('ā
All done!');
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
async function example4_CustomConfig() {
|
|
62
|
-
console.log(chalk.blue('\nš Example 4: Custom Configuration'));
|
|
63
|
-
|
|
64
|
-
// Custom configuration for specific needs
|
|
65
|
-
const fixer = new AccessibilityFixer({
|
|
66
|
-
language: 'zh',
|
|
67
|
-
backupFiles: true,
|
|
68
|
-
dryRun: true
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
// Only fix specific issues
|
|
72
|
-
const altResults = await fixer.fixEmptyAltAttributes('./demo');
|
|
73
|
-
|
|
74
|
-
// Analyze results
|
|
75
|
-
const fixedFiles = altResults.filter(r => r.status === 'fixed');
|
|
76
|
-
const totalIssues = altResults.reduce((sum, r) => sum + (r.issues || 0), 0);
|
|
77
|
-
|
|
78
|
-
console.log(`Found ${totalIssues} alt attribute issues in ${fixedFiles.length} files`);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
async function example5_ErrorHandling() {
|
|
82
|
-
console.log(chalk.blue('\nš Example 5: Error Handling'));
|
|
83
|
-
|
|
84
|
-
const fixer = new AccessibilityFixer({
|
|
85
|
-
language: 'ja',
|
|
86
|
-
backupFiles: true,
|
|
87
|
-
dryRun: false
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
try {
|
|
91
|
-
const results = await fixer.fixRoleAttributes('./nonexistent-directory');
|
|
92
|
-
console.log('Results:', results);
|
|
93
|
-
} catch (error) {
|
|
94
|
-
console.error(chalk.red('Error occurred:'), error.message);
|
|
95
|
-
// Handle error appropriately
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// Run examples
|
|
100
|
-
async function runExamples() {
|
|
101
|
-
console.log(chalk.green('š Accessibility Fixer Examples\n'));
|
|
102
|
-
|
|
103
|
-
await example1_BasicUsage();
|
|
104
|
-
await example2_EnglishProject();
|
|
105
|
-
await example3_StepByStep();
|
|
106
|
-
await example4_CustomConfig();
|
|
107
|
-
await example5_ErrorHandling();
|
|
108
|
-
|
|
109
|
-
console.log(chalk.green('\nā
All examples completed!'));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// Uncomment to run examples
|
|
113
|
-
// runExamples();
|
|
114
|
-
|
|
115
|
-
module.exports = {
|
|
116
|
-
example1_BasicUsage,
|
|
117
|
-
example2_EnglishProject,
|
|
118
|
-
example3_StepByStep,
|
|
119
|
-
example4_CustomConfig,
|
|
120
|
-
example5_ErrorHandling
|
|
121
|
-
};
|