RubyGems - a11y_agent - Versions diffs - 0.0.1 - Mend

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 (12) hide show

checksums.yaml ADDED Viewed

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 94ca19fae4a088d592146b8df934aa4b4a2b21f60e9318198ba79c3b0bff769c
+  data.tar.gz: 39c4d8da1ece45a3a350efaf5efecd69ed3986e0da435a7d03f256186a7dd89d
+SHA512:
+  metadata.gz: 594a27d14711f26226a383aa74f45bc2bd58d880c700edc21fcd70efbd51204c0acf432366eb0ec884ae6505ea6fcd34729b6f5b862508b373c4977ca6213624
+  data.tar.gz: 8947f736049078fe40be73c49325f45a2ce185c337c04ba979af45ae90dee33998d36107a89c4f2d461962d4c5aca23f6e9f839a513ef9c25da8a0d4c520c8ee

data/.env.sample ADDED Viewed

@@ -0,0 +1,3 @@
+OPENAI_API_KEY=sk-proj-xxxxx
+GEMINI_API_KEY=xxxxx
+ANTHROPIC_API_KEY=sk-ant-xxxxx

data/README.md ADDED Viewed

@@ -0,0 +1,20 @@
+# A11y Agent
+A11y Agent is a multi-turn AI agent that supports developers in remediating React templates. It uses rules from `eslint-plugin-jsx-a11y` from a [Sublayer](https://github.com/sublayerapp/sublayer) agent to perform iterative fixes, with user input along the way.
+A11y Agent is unique in the way it combines traditional programming, AI prompting, and human judgement to accelerate the accessibility remediation process.
+## Usage
+1. Clone the repo:
+        git clone git@github.com:AccessLint/a11y-agent.git
+2. Run the CLI command and follow the prompts:
+        ruby a11y_agent.rb /path/to/file.[jsx|tsx]
+## Demo
+https://github.com/user-attachments/assets/757227ad-7f8f-4fa8-933f-daea335313c9

data/eslint.config.mjs ADDED Viewed

@@ -0,0 +1,23 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+  { languageOptions: { globals: globals.browser } },
+  jsxA11y.flatConfigs.strict,
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

data/fixtures/sample.tsx ADDED Viewed

@@ -0,0 +1,100 @@
+import React from "react";
+const AccessibilityViolations = () => {
+  return (
+    <div>
+      <html>
+        <head>
+          <title>Accessibility Violations</title>
+        </head>
+        <body>
+          <div>
+            <p>Here is an emoji not wrapped in a span: 😀</p>
+            <img src="image.jpg" alt="image" />
+            <a href="https://example.com">Click here</a>
+            <a href="#"></a>
+            <a href="invalid-url">Invalid Link</a>
+            <div aria-activedescendant="some-id"></div>
+            <div aria-bogus="true"></div>
+            <div aria-hidden="false"></div>
+            <div role="invalidRole"></div>
+            <input type="text" autoComplete="off" />
+            <div onClick={() => alert("Clicked!")}></div>
+            <input type="text" />
+            <h1></h1>
+            <iframe src="some-video.mp4"></iframe>
+            <img src="photo.jpg" alt="photo" />
+            <div onClick={() => alert("Clicked!")} tabIndex={-1}></div>
+            <label>Username</label>
+            <input type="text" id="username" />
+            <label htmlFor="username">Username</label>
+            <input type="text" id="username" />
+            <audio controls>
+              <source src="audio.mp3" type="audio/mp3" />
+            </audio>
+            <div onMouseOver={() => {}}></div>
+            <div accessKey="s"></div>
+            <div aria-hidden="true" tabIndex={0}></div>
+            <input type="text" autoFocus />
+            <marquee>Scrolling text</marquee>
+            <div role="button" onClick={() => {}}></div>
+            <div onClick={() => {}}></div>
+            <div role="link"></div>
+            <div tabIndex={1}></div>
+            <select onChange={() => {}}>
+              <option>Option 1</option>
+              <option>Option 2</option>
+            </select>
+            <div role="banner"></div>
+            <button role="button">Click me</button>
+            <table>
+              <tr>
+                <th>Header</th>
+                <th>Another Header</th>
+              </tr>
+              <tr>
+                <td>Data</td>
+                <td>More Data</td>
+              </tr>
+            </table>
+            <div tabIndex={5}></div>
+          </div>
+        </body>
+      </html>
+    </div>
+  );
+};
+export default AccessibilityViolations;

data/lib/a11y_agent/version.rb ADDED Viewed

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+module A11yAgent
+  VERSION = '0.0.1'
+end

data/lib/a11y_agent.rb ADDED Viewed

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+require 'diffy'
+require 'fileutils'
+require 'json'
+require 'open3'
+require 'rainbow/refinement'
+require 'sublayer'
+require 'tty-prompt'
+require_relative './fix_a11y_generator'
+Diffy::Diff.default_format = :color
+# Sublayer.configuration.ai_provider = Sublayer::Providers::OpenAi
+# Sublayer.configuration.ai_model = "gpt-4o-mini"
+# Sublayer.configuration.ai_provider = Sublayer::Providers::Gemini
+# Sublayer.configuration.ai_model = "gemini-1.5-flash-latest"
+Sublayer.configuration.ai_provider = Sublayer::Providers::Claude
+Sublayer.configuration.ai_model = 'claude-3-haiku-20240307'
+module Sublayer
+  module Agents
+    class A11yAgent < Base
+      using Rainbow
+      def initialize(file:)
+        @accessibility_issues = []
+        @issue_types = []
+        @file = file
+        @file_contents = File.read(@file)
+      end
+      trigger_on_files_changed do
+        ['./trigger.txt']
+      end
+      check_status do
+        puts "🔍 Checking accessibility issues in #{@file}..."
+        stdout, _stderr, _status = Open3.capture3("eslint #{@file} --format stylish")
+        @accessibility_issues = stdout.split("\n")[2..]
+        @accessibility_issues = @accessibility_issues.map { |issue| issue.gsub(/\s+/, ' ').strip }
+        puts "🚨 Found #{@accessibility_issues.length} accessibility issues" unless @accessibility_issues.empty?
+      end
+      goal_condition do
+        puts '🎉 All accessibility issues have been fixed!' if @accessibility_issues.empty?
+        @accessibility_issues.empty?
+      end
+      step do
+        prompt = TTY::Prompt.new
+        @accessibility_issues.each do |issue|
+          contents = File.read(@file)
+          user_input = nil
+          fixed = nil
+          additional_prompt = nil
+          until %i[yes no].include?(user_input)
+            puts "🔧 Attempting a fix: #{issue}"
+            result = FixA11yGenerator.new(contents:, issue:,
+                                          additional_prompt:).generate
+            result << "\n" unless result.end_with?("\n")
+            Diffy::Diff.new(contents, result).each_chunk do |chunk|
+              case chunk
+              when /^\+/
+                print chunk.to_s.green
+              when /^-/
+                print chunk.to_s.red
+              else
+                lines = chunk.to_s.split("\n")
+                puts lines[0..2].join("\n")
+                puts '...'
+                puts lines[-3..].join("\n")
+              end
+            end
+            choices = [
+              { key: 'y', name: 'approve and continue', value: :yes },
+              { key: 'n', name: 'skip this change', value: :no },
+              { key: 'r', name: 'retry with optional instructions', value: :retry },
+              { key: 'q', name: 'quit; stop making changes', value: :quit }
+            ]
+            user_input = prompt.expand('Approve changes?', choices)
+            case user_input
+            when :yes
+              fixed = result
+            when :no
+              fixed = contents
+            when :retry
+              additional_prompt = prompt.ask('Additional instructions:')
+              fixed = nil
+            when :quit
+              puts 'Quitting...'
+              exit
+            end
+          end
+          contents = fixed
+          puts 'Writing to file...'
+          File.write(@file, contents)
+        end
+        puts '🎉 Done!'
+        puts '✅ Complete diff:'
+        puts Diffy::Diff.new(@file_contents, File.read(@file))
+      end
+    end
+  end
+end

data/lib/fix_a11y_generator.rb ADDED Viewed

@@ -0,0 +1,32 @@
+class FixA11yGenerator < Sublayer::Generators::Base
+  llm_output_adapter type: :single_string,
+    name: "fix_accessibility_issue_based_on_a11y_issue",
+    description: "Given a JSX file and an accessibility issue, generate a new JSX file with the issue fixed."
+  def initialize(contents:, issue:, additional_prompt: nil)
+    @contents = contents
+    @issue = issue
+    @additional_prompt = additional_prompt
+  end
+  def generate
+    super
+  end
+  def prompt
+    <<~PROMPT
+      Given the following JSX contents and an individual accessibility issue, generate a new JSX file with the individual issue fixed, leaving the rest of the contents unchanged.:
+      Code:
+      #{@contents}
+      Accessibility issue:
+      #{@issue}
+      Additional user instructions (if any):
+      #{@additional_prompt || "None"}
+      Return the JSX contents with the issue fixed.
+    PROMPT
+  end
+end

data/package.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "devDependencies": {
+    "@eslint/js": "^9.8.0",
+    "eslint": "^9.8.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.8.0",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^7.17.0"
+  }
+}

data/trigger.txt ADDED Viewed

File without changes

a11y_agent 0.0.1