RubyGems - rails_accessibility_testing - Versions diffs - 1.1.0 - Mend

rails_accessibility_testing 1.1.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 (54) hide show

checksums.yaml +7 -0
data/ARCHITECTURE.md +307 -0
data/CHANGELOG.md +81 -0
data/CODE_OF_CONDUCT.md +125 -0
data/CONTRIBUTING.md +225 -0
data/GUIDES/continuous_integration.md +326 -0
data/GUIDES/getting_started.md +205 -0
data/GUIDES/working_with_designers_and_content_authors.md +398 -0
data/GUIDES/writing_accessible_views_in_rails.md +412 -0
data/LICENSE +22 -0
data/README.md +350 -0
data/docs_site/404.html +11 -0
data/docs_site/Gemfile +11 -0
data/docs_site/Makefile +14 -0
data/docs_site/_config.yml +41 -0
data/docs_site/_includes/header.html +13 -0
data/docs_site/_layouts/default.html +130 -0
data/docs_site/assets/main.scss +4 -0
data/docs_site/ci_integration.md +76 -0
data/docs_site/configuration.md +114 -0
data/docs_site/contributing.md +69 -0
data/docs_site/getting_started.md +57 -0
data/docs_site/index.md +57 -0
data/exe/rails_a11y +12 -0
data/exe/rails_server_safe +41 -0
data/lib/generators/rails_a11y/install/generator.rb +51 -0
data/lib/rails_accessibility_testing/accessibility_helper.rb +701 -0
data/lib/rails_accessibility_testing/change_detector.rb +114 -0
data/lib/rails_accessibility_testing/checks/aria_landmarks_check.rb +33 -0
data/lib/rails_accessibility_testing/checks/base_check.rb +156 -0
data/lib/rails_accessibility_testing/checks/color_contrast_check.rb +56 -0
data/lib/rails_accessibility_testing/checks/duplicate_ids_check.rb +49 -0
data/lib/rails_accessibility_testing/checks/form_errors_check.rb +40 -0
data/lib/rails_accessibility_testing/checks/form_labels_check.rb +62 -0
data/lib/rails_accessibility_testing/checks/heading_hierarchy_check.rb +53 -0
data/lib/rails_accessibility_testing/checks/image_alt_text_check.rb +52 -0
data/lib/rails_accessibility_testing/checks/interactive_elements_check.rb +66 -0
data/lib/rails_accessibility_testing/checks/keyboard_accessibility_check.rb +36 -0
data/lib/rails_accessibility_testing/checks/skip_links_check.rb +24 -0
data/lib/rails_accessibility_testing/checks/table_structure_check.rb +36 -0
data/lib/rails_accessibility_testing/cli/command.rb +259 -0
data/lib/rails_accessibility_testing/config/yaml_loader.rb +131 -0
data/lib/rails_accessibility_testing/configuration.rb +30 -0
data/lib/rails_accessibility_testing/engine/rule_engine.rb +97 -0
data/lib/rails_accessibility_testing/engine/violation.rb +58 -0
data/lib/rails_accessibility_testing/engine/violation_collector.rb +59 -0
data/lib/rails_accessibility_testing/error_message_builder.rb +354 -0
data/lib/rails_accessibility_testing/integration/minitest_integration.rb +74 -0
data/lib/rails_accessibility_testing/rspec_integration.rb +58 -0
data/lib/rails_accessibility_testing/shared_examples.rb +93 -0
data/lib/rails_accessibility_testing/version.rb +4 -0
data/lib/rails_accessibility_testing.rb +83 -0
data/lib/tasks/accessibility.rake +28 -0
metadata +218 -0

data/GUIDES/writing_accessible_views_in_rails.md ADDED Viewed

@@ -0,0 +1,412 @@
+# Writing Accessible Views in Rails
+This guide shows you how to write accessible Rails views that pass Rails A11y checks and meet WCAG 2.1 AA standards.
+## Core Principles
+1. **Semantic HTML** - Use the right elements for the job
+2. **Clear Structure** - Logical heading hierarchy and landmarks
+3. **Accessible Forms** - Proper labels and error associations
+4. **Descriptive Content** - Alt text, link text, and button labels
+5. **Keyboard Navigation** - Everything works without a mouse
+## Forms
+### ✅ Good: Proper Labels
+```erb
+<%= form_with model: @user do |f| %>
+  <%= f.label :email, "Email Address" %>
+  <%= f.email_field :email %>
+  <%= f.label :password, "Password" %>
+  <%= f.password_field :password %>
+<% end %>
+```
+### ❌ Bad: Missing Labels
+```erb
+<%= form_with model: @user do |f| %>
+  <%= f.email_field :email %>  <!-- No label! -->
+  <%= f.password_field :password %>  <!-- No label! -->
+<% end %>
+```
+### Alternative: aria-label
+For icon-only inputs, use `aria-label`:
+```erb
+<%= f.search_field :query, aria: { label: "Search" } %>
+```
+### Form Errors
+Associate error messages with inputs:
+```erb
+<%= form_with model: @user do |f| %>
+  <%= f.label :email %>
+  <%= f.email_field :email,
+      aria: {
+        describedby: "email-error",
+        invalid: @user.errors[:email].any?
+      } %>
+  <% if @user.errors[:email].any? %>
+    <div id="email-error" class="error">
+      <%= @user.errors[:email].first %>
+    </div>
+  <% end %>
+<% end %>
+```
+## Images
+### ✅ Good: Descriptive Alt Text
+```erb
+<%= image_tag "logo.png", alt: "Company Logo" %>
+<!-- For decorative images -->
+<%= image_tag "decoration.png", alt: "" %>
+```
+### ❌ Bad: Missing Alt
+```erb
+<%= image_tag "logo.png" %>  <!-- Missing alt! -->
+```
+### When to Use Empty Alt
+Use `alt=""` only for purely decorative images:
+```erb
+<!-- Decorative border -->
+<%= image_tag "border.png", alt: "" %>
+<!-- Spacer image -->
+<%= image_tag "spacer.gif", alt: "" %>
+```
+## Links and Buttons
+### ✅ Good: Descriptive Text
+```erb
+<%= link_to "Read More", article_path(@article) %>
+<%= button_to "Submit", submit_path, method: :post %>
+```
+### ❌ Bad: Generic or Missing Text
+```erb
+<%= link_to "Click here", article_path(@article) %>  <!-- Generic! -->
+<%= link_to article_path(@article) do %>
+  <i class="icon"></i>  <!-- No accessible name! -->
+<% end %>
+```
+### Icon-Only Links/Buttons
+For icon-only interactive elements, use `aria-label`:
+```erb
+<%= link_to article_path(@article), aria: { label: "Read article" } do %>
+  <i class="icon-read"></i>
+<% end %>
+<%= button_tag type: "submit", aria: { label: "Close dialog" } do %>
+  <i class="icon-close"></i>
+<% end %>
+```
+### Visually Hidden Text
+Alternative approach using CSS:
+```erb
+<%= link_to article_path(@article) do %>
+  <i class="icon-read"></i>
+  <span class="visually-hidden">Read article</span>
+<% end %>
+```
+```css
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+```
+## Headings
+### ✅ Good: Proper Hierarchy
+```erb
+<h1>Page Title</h1>
+  <h2>Section Title</h2>
+    <h3>Subsection Title</h3>
+  <h2>Another Section</h2>
+```
+### ❌ Bad: Skipped Levels
+```erb
+<h1>Page Title</h1>
+  <h3>Subsection</h3>  <!-- Skipped h2! -->
+```
+### ❌ Bad: Multiple H1s
+```erb
+<h1>Main Title</h1>
+<h1>Another Title</h1>  <!-- Should be h2! -->
+```
+### Rails Helper
+Use a helper to manage heading levels:
+```ruby
+# app/helpers/application_helper.rb
+def heading(text, level: 2)
+  content_tag("h#{level}", text)
+end
+```
+## Landmarks
+### ✅ Good: Semantic Structure
+```erb
+<body>
+  <header>
+    <nav>
+      <!-- Navigation -->
+    </nav>
+  </header>
+  <main>
+    <%= yield %>
+  </main>
+  <footer>
+    <!-- Footer content -->
+  </footer>
+</body>
+```
+### ARIA Landmarks
+If you can't use semantic HTML:
+```erb
+<div role="main">
+  <%= yield %>
+</div>
+<div role="navigation">
+  <!-- Navigation -->
+</div>
+```
+## Tables
+### ✅ Good: Proper Headers
+```erb
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @users.each do |user| %>
+      <tr>
+        <td><%= user.name %></td>
+        <td><%= user.email %></td>
+        <td><%= user.role %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+```
+### With Caption
+```erb
+<table>
+  <caption>User Directory</caption>
+  <thead>
+    <!-- ... -->
+  </thead>
+</table>
+```
+## Skip Links
+Add skip navigation links:
+```erb
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<header>
+  <!-- Navigation -->
+</header>
+<main id="main-content">
+  <%= yield %>
+</main>
+```
+```css
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000;
+  color: #fff;
+  padding: 8px;
+  text-decoration: none;
+  z-index: 100;
+}
+.skip-link:focus {
+  top: 0;
+}
+```
+## Modals and Dialogs
+### ✅ Good: Focusable Elements
+```erb
+<div role="dialog" aria-labelledby="modal-title">
+  <h2 id="modal-title">Confirm Action</h2>
+  <p>Are you sure?</p>
+  <button>Cancel</button>
+  <button>Confirm</button>
+</div>
+```
+### Focus Management
+Use JavaScript to trap focus:
+```javascript
+// Trap focus in modal
+const modal = document.querySelector('[role="dialog"]');
+const focusableElements = modal.querySelectorAll(
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+);
+const firstElement = focusableElements[0];
+const lastElement = focusableElements[focusableElements.length - 1];
+firstElement.focus();
+```
+## Color and Contrast
+### ✅ Good: Sufficient Contrast
+```erb
+<!-- Dark text on light background -->
+<p style="color: #000; background: #fff;">Readable text</p>
+<!-- Light text on dark background -->
+<p style="color: #fff; background: #000;">Readable text</p>
+```
+### ❌ Bad: Low Contrast
+```erb
+<!-- Hard to read -->
+<p style="color: #ccc; background: #fff;">Poor contrast</p>
+```
+### Tools
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- Browser DevTools (Chrome Lighthouse)
+## Common Patterns
+### Breadcrumbs
+```erb
+<nav aria-label="Breadcrumb">
+  <ol>
+    <li><%= link_to "Home", root_path %></li>
+    <li><%= link_to "Products", products_path %></li>
+    <li aria-current="page"><%= @product.name %></li>
+  </ol>
+</nav>
+```
+### Error Messages
+```erb
+<% if @user.errors.any? %>
+  <div role="alert" aria-live="polite">
+    <h2>Please fix the following errors:</h2>
+    <ul>
+      <% @user.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
+```
+### Loading States
+```erb
+<button aria-busy="true" aria-label="Loading...">
+  <span class="spinner"></span>
+  <span class="visually-hidden">Loading</span>
+</button>
+```
+## Testing Your Views
+Run Rails A11y checks:
+```bash
+# Run all system tests
+bundle exec rspec spec/system/
+# Check specific routes
+bundle exec rails_a11y check --routes home_path about_path
+```
+## Resources
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [WebAIM](https://webaim.org/) - Accessibility resources
+- [A11y Project](https://www.a11yproject.com/) - Community-driven
+- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+## Next Steps
+- **Run checks regularly** - Catch issues early
+- **Review with screen readers** - Test with NVDA, JAWS, or VoiceOver
+- **Keyboard testing** - Navigate without a mouse
+- **Color blindness** - Test with color blindness simulators
+---
+**Remember:** Accessibility isn't optional—it's a requirement. These practices make your app usable for everyone.

data/LICENSE ADDED Viewed

@@ -0,0 +1,22 @@
+MIT License
+Copyright (c) 2024-2025 Regan Maharjan
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.