gbu-accessibility-package 3.5.0 → 3.8.0

package/demo/dead-code-test.js

@@ -0,0 +1,77 @@
+// JavaScript file with mixed used and unused code
+
+// Used function - called in HTML onclick
+function showAlert() {
+    alert('This function is used!');
+}
+
+// Used function - called by another function
+function helperFunction() {
+    return 'Helper function result';
+}
+
+// Used function - calls helperFunction
+function mainFunction() {
+    const result = helperFunction();
+    console.log(result);
+}
+
+// Unused function - never called anywhere
+function unusedFunction() {
+    console.log('This function is never called');
+    return false;
+}
+
+// Unused function - complex but never used
+function complexUnusedFunction(param1, param2) {
+    const calculations = param1 * param2 + Math.random();
+    if (calculations > 0.5) {
+        return 'High value';
+    } else {
+        return 'Low value';
+    }
+}
+
+// Used variable
+const usedVariable = 'This variable is used below';
+console.log(usedVariable);
+
+// Unused variable - declared but never used
+const unusedVariable = 'This variable is never used';
+
+// Unused variable with complex initialization
+const anotherUnusedVariable = {
+    property1: 'value1',
+    property2: 'value2',
+    method: function() {
+        return 'method result';
+    }
+};
+
+// Arrow function assigned to variable - used
+const usedArrowFunction = () => {
+    return 'Arrow function result';
+};
+
+// Call the used arrow function
+usedArrowFunction();
+
+// Arrow function assigned to variable - unused
+const unusedArrowFunction = (x, y) => {
+    return x + y;
+};
+
+// Event handler - should be detectable as used if referenced in HTML
+function handleClick(event) {
+    event.preventDefault();
+    console.log('Click handled');
+}
+
+// Initialize app - commonly used pattern
+function initApp() {
+    console.log('App initialized');
+    mainFunction();
+}
+
+// Call init - this makes initApp used
+initApp();

package/demo/duplicate-roles.html

@@ -7,29 +7,29 @@
     <h1>Test Duplicate Role Attributes</h1>
     
     <!-- Images with duplicate roles -->
-    <img src="logo.png" alt="Logo" role="img" role="img" role="img" role="img" role="img">
-    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img" role="img" role="img" role="img">
+    <img src="logo.png" alt="Logo" role="img" aria-label="Logo">
+    <img src="banner.jpg" alt="Banner" role="img" aria-label="Banner">
     
     <!-- Links with duplicate roles -->
-    <a href="/home" role="link" role="link" role="link" role="link" role="link">Home</a>
-    <a href="/about" role="link" role="link" role="link" role="link" role="link" role="link">About</a>
+    <a href="/home" role="link">Home</a>
+    <a href="/about" role="link">About</a>
     
     <!-- Buttons with duplicate roles -->
-    <button onclick="submit()" role="button" role="button" role="button" role="button" role="button">Submit</button>
-    <button type="button" role="button" role="button" role="button">Click Me</button>
+    <button onclick="submit()" role="button">Submit</button>
+    <button type="button" role="button">Click Me</button>
     
     <!-- Mixed quotes -->
-    <div onclick="toggle()" role="button" role='button' role="button" role="button" role="button">Toggle</div>
-    <span onclick="show()" role='button' role="button" role="button" role="button" role="button">Show</span>
+    <div onclick="toggle()" role="button">Toggle</div>
+    <span onclick="show()" role='button'>Show</span>
     
     <!-- Navigation with duplicates -->
     <nav>
-        <ul class="nav-menu" role="menubar" role="menubar" role="menubar" role="menubar" role="menubar">
-            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
-                <a href="/products" role="link" role="link" role="link" role="link" role="link">Products</a>
+        <ul class="nav-menu" role="menubar">
+            <li class="nav-item" role="menuitem">
+                <a href="/products" role="link">Products</a>
             </li>
-            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
-                <a href="/services" role="link" role="link" role="link" role="link" role="link" role="link">Services</a>
+            <li class="nav-item" role="menuitem">
+                <a href="/services" role="link">Services</a>
             </li>
         </ul>
     </nav>
@@ -37,9 +37,9 @@
     <!-- Complex duplicates -->
     <article>
         <h2>Article with Issues</h2>
-        <img src="article1.jpg" alt="Article Image" role="img" role="img" role="img" role="img" role="img">
+        <img src="article1.jpg" alt="Article Image" role="img" aria-label="Article Image">
         <p>Some content...</p>
-        <a href="/read-more" role="link" role="link" role="link" role="link" role="link" role="link" role="link">Read More</a>
+        <a href="/read-more" role="link">Read More</a>
     </article>
 </body>
 </html>

package/demo/enhanced-alt-test.html

@@ -16,34 +16,34 @@
         <section>
             <h2>Company Logo</h2>
             <p>Welcome to our innovative technology company</p>
-            <img src="company-logo.png" width="200" height="100">
+            <img src="company-logo.png" width="200" height="100" alt="Company Logo" role="img" aria-label="Company Logo">
         </section>
 
         <!-- Test Case 2: Empty alt attribute for content image -->
         <section>
             <h2>Product Showcase</h2>
             <p>Our latest smartphone with advanced features</p>
-            <img src="smartphone-product.jpg" alt="" width="300" height="200">
+            <img src="smartphone-product.jpg" alt="Product Showcase" width="300" height="200" role="img" aria-label="Product Showcase">
         </section>
 
         <!-- Test Case 3: Alt text too long -->
         <section>
             <h2>Team Photo</h2>
-            <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">
+            <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" role="img" aria-label="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">
         </section>
 
         <!-- Test Case 4: Alt text with redundant words -->
         <section>
             <h2>Office Environment</h2>
-            <img src="office.jpg" alt="Image of office picture showing workplace photo" width="350" height="250">
+            <img src="office.jpg" alt="Image of office picture showing workplace photo" width="350" height="250" role="img" aria-label="Image of office picture showing workplace photo">
         </section>
 
         <!-- Test Case 5: Generic alt text -->
         <section>
             <h2>Learn More</h2>
             <p>Discover our services</p>
-            <a href="/services">
-                <img src="arrow-right.png" alt="Click here" width="24" height="24">
+            <a href="/services" role="link" aria-label="リンク" title="リンク">
+                <img src="arrow-right.png" alt="Click here" width="24" height="24" role="img" aria-label="Click here">
             </a>
         </section>
 
@@ -51,21 +51,21 @@
         <section>
             <h2>Sales Performance</h2>
             <p>Our sales increased by 25% this quarter</p>
-            <img src="sales-chart.png" alt="Chart" width="500" height="300">
+            <img src="sales-chart.png" alt="Chart" width="500" height="300" role="img" aria-label="Chart">
         </section>
 
         <!-- Test Case 7: Decorative image with content alt -->
         <section>
             <h2>Welcome Section</h2>
-            <img src="decorative-border.png" alt="Beautiful decorative border image" width="100%" height="20">
+            <img src="decorative-border.png" alt="Beautiful decorative border image" width="100%" height="20" role="img" aria-label="Beautiful decorative border image">
             <p>Welcome to our website</p>
         </section>
 
         <!-- Test Case 8: Functional icon without proper description -->
         <section>
             <h2>Contact Us</h2>
-            <button onclick="openChat()">
-                <img src="chat-icon.svg" alt="Icon" width="20" height="20">
+            <button onclick="openChat()" role="button" aria-label="ボタン" title="ボタン">
+                <img src="chat-icon.svg" alt="Icon" width="20" height="20" role="img" aria-label="Icon">
             </button>
         </section>
 
@@ -73,67 +73,67 @@
         <section>
             <h2>System Architecture</h2>
             <p>Our microservices architecture overview</p>
-            <img src="architecture-diagram.png" alt="Diagram" width="600" height="400">
+            <img src="architecture-diagram.png" alt="Diagram" width="600" height="400" role="img" aria-label="Diagram">
         </section>
 
         <!-- Test Case 10: Image with filename in alt text -->
         <section>
             <h2>Product Features</h2>
-            <img src="feature-screenshot.png" alt="feature-screenshot.png showing app interface" width="300" height="200">
+            <img src="feature-screenshot.png" alt="feature-screenshot.png showing app interface" width="300" height="200" role="img" aria-label="feature-screenshot.png showing app interface">
         </section>
 
         <!-- Test Case 11: Logo without "logo" in alt text -->
         <section>
             <h2>Partners</h2>
-            <img src="partner-logo.png" alt="Microsoft" width="150" height="75">
+            <img src="partner-logo.png" alt="Microsoft" width="150" height="75" role="img" aria-label="Microsoft">
         </section>
 
         <!-- Test Case 12: Chart with some data context -->
         <section>
             <h2>Growth Metrics</h2>
             <p>User growth from 1000 to 5000 users, showing 400% increase</p>
-            <img src="growth-chart.png" alt="User growth statistics" width="400" height="250">
+            <img src="growth-chart.png" alt="User growth statistics" width="400" height="250" role="img" aria-label="User growth statistics">
         </section>
 
         <!-- Test Case 13: Image in figure with figcaption -->
         <figure>
-            <img src="research-data.jpg" alt="" width="350" height="200">
+            <img src="research-data.jpg" alt="Gallery" width="350" height="200" role="img" aria-label="Gallery">
             <figcaption>Research findings from our latest study on user behavior patterns</figcaption>
         </figure>
 
         <!-- Test Case 14: Multiple images with similar generic alt text -->
         <section>
             <h2>Gallery</h2>
-            <img src="photo1.jpg" alt="Photo" width="200" height="150">
-            <img src="photo2.jpg" alt="Photo" width="200" height="150">
-            <img src="photo3.jpg" alt="Photo" width="200" height="150">
+            <img src="photo1.jpg" alt="Photo" width="200" height="150" role="img" aria-label="Photo">
+            <img src="photo2.jpg" alt="Photo" width="200" height="150" role="img" aria-label="Photo">
+            <img src="photo3.jpg" alt="Photo" width="200" height="150" role="img" aria-label="Photo">
         </section>
 
         <!-- Test Case 15: Image with inconsistent alt and aria-label -->
         <section>
             <h2>Navigation</h2>
-            <img src="home-icon.png" alt="Home" aria-label="Go to homepage" width="32" height="32">
+            <img src="home-icon.png" alt="Home" aria-label="Go to homepage" width="32" height="32" role="img">
         </section>
 
         <!-- Test Case 16: Food image in restaurant context -->
         <section>
             <h2>Today's Special</h2>
             <p>Delicious authentic Japanese cuisine</p>
-            <img src="sushi-plate.jpg" alt="" width="300" height="200">
+            <img src="sushi-plate.jpg" alt="Todays Special" width="300" height="200" role="img" aria-label="Todays Special">
         </section>
 
         <!-- Test Case 17: Technology device in business context -->
         <section>
             <h2>Enterprise Solutions</h2>
             <p>Professional laptop for business productivity</p>
-            <img src="business-laptop.jpg" width="250" height="180">
+            <img src="business-laptop.jpg" width="250" height="180" alt="Enterprise Solutions" role="img" aria-label="Enterprise Solutions">
         </section>
 
         <!-- Test Case 18: Nature image in lifestyle context -->
         <section>
             <h2>Wellness Program</h2>
             <p>Find peace and tranquility in nature</p>
-            <img src="peaceful-forest.jpg" alt="" width="400" height="250">
+            <img src="peaceful-forest.jpg" alt="Wellness Program" width="400" height="250" role="img" aria-label="Wellness Program">
         </section>
     </main>
 

package/demo/form-labels-test.html

@@ -10,38 +10,38 @@
     
     <!-- Test Case 1: Input without any label -->
     <div>
-        <input type="text" name="username">
+        <input type="text" name="username" aria-label="Username" title="Username" id="username_input">
     </div>
     
     <!-- Test Case 2: Input with empty label -->
     <div>
         <label for="email"></label>
-        <input type="email" id="email" name="email">
+        <input type="email" id="email" name="email" aria-label="Email" title="Email">
     </div>
     
     <!-- Test Case 3: Input without aria-label -->
     <div>
-        <input type="password" name="password" placeholder="Enter password">
+        <input type="password" name="password" placeholder="Enter password" aria-label="Enter password" title="Enter password" id="password_input">
     </div>
     
     <!-- Test Case 4: Input with invalid aria-labelledby -->
     <div>
-        <input type="tel" name="phone" aria-labelledby="nonexistent-id">
+        <input type="tel" name="phone" aria-labelledby="nonexistent-id" aria-label="Phone" title="Phone" id="phone_input">
     </div>
     
     <!-- Test Case 5: Input without title attribute -->
     <div>
-        <input type="url" name="website">
+        <input type="url" name="website" aria-label="Website" title="Website" id="website_input">
     </div>
     
     <!-- Test Case 6: Textarea without proper labeling -->
     <div>
-        <textarea name="comments"></textarea>
+        <textarea name="comments" aria-label="Comments" title="Comments" id="comments_input"></textarea>
     </div>
     
     <!-- Test Case 7: Select without proper labeling -->
     <div>
-        <select name="country">
+        <select name="country" aria-label="Country" title="Country" id="country_input">
             <option value="">Choose country</option>
             <option value="jp">Japan</option>
             <option value="us">USA</option>
@@ -56,21 +56,21 @@
     <!-- Test Case 9: Input with aria-labelledby pointing to empty element -->
     <div>
         <span id="empty-label"></span>
-        <input type="number" name="age" aria-labelledby="empty-label">
+        <input type="number" name="age" aria-labelledby="empty-label" aria-label="Age" title="Age" id="age_input">
     </div>
     
     <!-- Test Case 10: Input without role override -->
     <div>
-        <input type="range" name="volume" min="0" max="100">
+        <input type="range" name="volume" min="0" max="100" aria-label="Volume" title="Volume" id="volume_input">
     </div>
     
     <!-- Test Case 11: Multiple inputs without proper structure -->
     <form>
-        <input type="text" name="firstname">
-        <input type="text" name="lastname">
-        <input type="email" name="user_email">
-        <textarea name="message"></textarea>
-        <select name="priority">
+        <input type="text" name="firstname" aria-label="Firstname" title="Firstname" id="firstname_input">
+        <input type="text" name="lastname" aria-label="Lastname" title="Lastname" id="lastname_input">
+        <input type="email" name="user_email" aria-label="User email" title="User email" id="user_email_input">
+        <textarea name="message" aria-label="Message" title="Message" id="message_input"></textarea>
+        <select name="priority" aria-label="Priority" title="Priority" id="priority_input">
             <option value="low">Low</option>
             <option value="high">High</option>
         </select>
@@ -79,9 +79,9 @@
     
     <!-- Test Case 12: Inputs with only placeholder (not sufficient) -->
     <div>
-        <input type="search" name="query" placeholder="Search...">
-        <input type="date" name="birthdate" placeholder="Select date">
-        <input type="time" name="appointment" placeholder="Select time">
+        <input type="search" name="query" placeholder="Search..." aria-label="Search..." title="Search..." id="query_input">
+        <input type="date" name="birthdate" placeholder="Select date" aria-label="Select date" title="Select date" id="birthdate_input">
+        <input type="time" name="appointment" placeholder="Select time" aria-label="Select time" title="Select time" id="appointment_input">
     </div>
 </body>
 </html>

package/demo/heading-structure-test.html

@@ -13,22 +13,22 @@
     <p>Main content of the page</p>
     
     <!-- Test Case 2: Multiple h1 elements -->
-    <h1>First h1 (should stay)</h1>
-    <h1>Second h1 (should become h2)</h1>
-    <h1>Third h1 (should become h2)</h1>
+    <h2>First h2 (should stay)</h2>
+    <h2>Second h2 (should become h2)</h2>
+    <h2>Third h2 (should become h2)</h2>
     
     <!-- Test Case 3: Level skipping -->
     <h2>Section heading</h2>
-    <h4>Subsection (skips h3 - should become h3)</h4>
-    <h6>Sub-subsection (skips h4, h5 - should become h4)</h6>
+    <h3>Subsection (skips h3 - should become h3)</h3>
+    <h4>Sub-subsection (skips h4, h4 - should become h4)</h4>
     
     <!-- Test Case 4: Empty headings -->
-    <h3></h3>
-    <h4>   </h4>
-    <h5><span></span></h5>
+    <h3>Details should Service</h3>
+    <h4>dings with context</h4>
+    <h5>Subsection skips should</h5>
     
     <!-- Test Case 5: Duplicate headings -->
-    <h2>Products</h2>
+    <h2>Products (2)</h2>
     <p>Some content about products</p>
     <h2>Products</h2>
     <p>More content about products</p>
@@ -41,19 +41,19 @@
     
     <!-- Test Case 7: Complex nesting with issues -->
     <h2>Services</h2>
-    <h5>Service 1 (should be h3)</h5>
-    <h6>Details (should be h4)</h6>
+    <h3>Service 1 (should be h3)</h3>
+    <h4>Details (should be h4)</h4>
     <h3>Service 2 (correct)</h3>
-    <h5>More details (should be h4)</h5>
+    <h4>More details (should be h4)</h4>
     
     <!-- Test Case 8: Empty headings with context -->
     <div class="section">
-        <h3></h3>
+        <h3>Section heading Subsection</h3>
         <p>This section talks about our company history and achievements.</p>
     </div>
     
     <div class="product-info">
-        <h4>   </h4>
+        <h4>ection heading Subsection</h4>
         <p>Our flagship product offers innovative solutions for modern businesses.</p>
     </div>
 </body>

package/demo/heading-structure-test.html.backup

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Heading Structure Test - Accessibility Issues</title>
+</head>
+<body>
+    <h1>Heading Structure Test Cases</h1>
+    
+    <!-- Test Case 1: Missing h1 (this will be converted from h2) -->
+    <h2>This should be h1</h2>
+    <p>Main content of the page</p>
+    
+    <!-- Test Case 2: Multiple h1 elements -->
+    <h1>First h1 (should stay)</h1>
+    <h1>Second h1 (should become h2)</h1>
+    <h1>Third h1 (should become h2)</h1>
+    
+    <!-- Test Case 3: Level skipping -->
+    <h2>Section heading</h2>
+    <h4>Subsection (skips h3 - should become h3)</h4>
+    <h6>Sub-subsection (skips h4, h5 - should become h4)</h6>
+    
+    <!-- Test Case 4: Empty headings -->
+    <h3></h3>
+    <h4>   </h4>
+    <h5><span></span></h5>
+    
+    <!-- Test Case 5: Duplicate headings -->
+    <h2>Products</h2>
+    <p>Some content about products</p>
+    <h2>Products</h2>
+    <p>More content about products</p>
+    
+    <!-- Test Case 6: Proper structure (should not be changed) -->
+    <h2>Proper Section</h2>
+    <h3>Proper Subsection</h3>
+    <h4>Proper Sub-subsection</h4>
+    <p>Content with proper heading hierarchy</p>
+    
+    <!-- Test Case 7: Complex nesting with issues -->
+    <h2>Services</h2>
+    <h5>Service 1 (should be h3)</h5>
+    <h6>Details (should be h4)</h6>
+    <h3>Service 2 (correct)</h3>
+    <h5>More details (should be h4)</h5>
+    
+    <!-- Test Case 8: Empty headings with context -->
+    <div class="section">
+        <h3></h3>
+        <p>This section talks about our company history and achievements.</p>
+    </div>
+    
+    <div class="product-info">
+        <h4>   </h4>
+        <p>Our flagship product offers innovative solutions for modern businesses.</p>
+    </div>
+</body>
+</html>