Skip to content

Joho ai building blocks info extraction 6920 #2249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 29 commits into
base: master
Choose a base branch
from
Draft

Joho ai building blocks info extraction 6920 #2249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
5d17f47
Update backgroundController.ts
drjoho Nov 21, 2024
23b8dd1
Merge branch 'master' into joho-AI-building-blocks-info-extraction-6920
drjoho Dec 13, 2024
07057e9
Merge branch 'master' into joho-AI-building-blocks-info-extraction-6920
drjoho Jan 9, 2025
5c2902f
Extract Data for AI Prompt for a code fix for an accessibility issue
drjoho Jan 9, 2025
458e53f
Reviewing messageing technique between background and contentScripts
drjoho Jan 24, 2025
022249b
working on establishing complete element
drjoho Jan 27, 2025
90dea23
new websocket code
drjoho Feb 6, 2025
5648775
Complete Checker Architecture now works.
drjoho Feb 6, 2025
3e1683a
Now can get context from reportTreeGrid
drjoho Feb 6, 2025
e4db87e
AI testing changes
drjoho Feb 25, 2025
edf0197
Html formatting of code snippet
drjoho Mar 5, 2025
ae762cd
help info extracted from response in background
drjoho Mar 5, 2025
31bbf6e
All AI data is now process in helpScreen.txs, help.js and the svg hel…
drjoho Mar 14, 2025
a55fc68
Updated code-snippet, AI data now live
drjoho Mar 21, 2025
4c6e06e
Updated code-snippet, AI data now live
drjoho Mar 26, 2025
75b44e3
Merge branch 'master' into joho-AI-building-blocks-info-extraction-6920
drjoho Mar 26, 2025
593faa2
can see more that on helpfile
drjoho Apr 1, 2025
e92bd31
Four violation rules are using AI
drjoho Apr 10, 2025
35e6349
Used context for color contrast from issue message args
drjoho Apr 14, 2025
d298568
adding more context
drjoho Apr 15, 2025
ac5d5a0
Basic functionality of AI generated Alt text
drjoho Apr 21, 2025
a8edcf9
Now image urls work for relative or absolute urls
drjoho Apr 21, 2025
ff3e43b
Moved summary to top
drjoho Apr 23, 2025
6997c6b
Merge branch 'master' into joho-AI-building-blocks-info-extraction-6920
drjoho Apr 23, 2025
5ee06a3
Comments
drjoho Apr 24, 2025
b37a0b3
AI Lang rule html_lang_exists added
drjoho Apr 27, 2025
4cfd7d8
a_text_purpose first edition added
drjoho Apr 29, 2025
0f929b0
cleanup
drjoho Apr 29, 2025
898456b
added first iteration of aria_content_in_landmark rule
drjoho May 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions accessibility-checker-engine/help-v4/common/code-snippet.js
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 16 additions & 2 deletions accessibility-checker-engine/help-v4/common/help.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,22 @@ letter-spacing: 0.16px;
max-width: 66.66%;
}
}
bx-code-snippet[type="multi"]::after {
height: 0px;

/* bx-code-snippet[type="multi"] {
max-height: fit-content;
} */

.bx--snippet-container {
max-height: fit-content !important;
}

.bx--snippet-container pre {
overflow: scroll !important;
}

#inA11yDOMCode {
max-height: fit-content;
overflow: scroll;
}

#ruleInfo {
Expand Down
334 changes: 305 additions & 29 deletions accessibility-checker-engine/help-v4/common/help.js
View file
Open in desktop

Large diffs are not rendered by default.

74 changes: 70 additions & 4 deletions accessibility-checker-engine/help-v4/en-US/a_text_purpose.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,57 @@
<link rel="icon" href="https://ibm.com/able/favicon-32x32.png" type="image/png">
<link rel="icon" href="https://ibm.com/able/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="../common/help.css" />
<script type="module">
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/code-snippet.min.js";
<script defer type="module">
console.log("***** START LOAD IMPORTS *****");
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/code-snippet.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/ai-label.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/list.min.js";
</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../common/help.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- NOTE: LZString is not getting loaded on time all the time -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js"></script>
<script defer src="../common/help.js"></script> -->
<script>
console.log("***** START SEQUENTIAL IMPORTS *****");
(function() {

// JS files that need to be loaded one after the other
var libs = [
'https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js',
'../common/help.js'
];

var injectLibFromStack = function(){
if(libs.length > 0){

//grab the next item on the stack
var nextLib = libs.shift();
var headTag = document.getElementsByTagName('head')[0];

//create a script tag with this library
var scriptTag = document.createElement('script');
scriptTag.src = nextLib;

//when successful, inject the next script
scriptTag.onload = function(e){
console.log("---> loaded: " + e.target.src);
injectLibFromStack();
};

//append the script tag to the <head></head>
headTag.appendChild(scriptTag);
console.log("injecting: " + nextLib);
}
else return;
}

//start script injection
injectLibFromStack();
})();
</script>
</head>
<body>

<div class="bx--grid toolHelp">
<div class="bx--row">
<div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-16 toolHead">
Expand All @@ -43,6 +86,29 @@ <h3 id="ruleMessage"></h3>
<!-- Start main panel -->
<mark-down><script type="text/plain">

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

<!-- AI info injection sites -->

<div id="inA11yDOMCode"></div>

<div id="summary"></div>

<div id="a11yDOMCode"></div>

<div id="sourceCode"></div>

<!-- DONE with AI info injection sites -->

</script></mark-down>

<!-- End main panel -->
<div><p><br /></p></div>
<div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-4 toolSide">
<!-- Start side panel -->
<mark-down><script type="text/plain">

### Why is this important?

When the purpose of a link is clear users can easily navigate links on the page without having to see the surrounding information for context.
Expand Down
74 changes: 70 additions & 4 deletions accessibility-checker-engine/help-v4/en-US/aria_content_in_landmark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,57 @@
<link rel="icon" href="https://ibm.com/able/favicon-32x32.png" type="image/png">
<link rel="icon" href="https://ibm.com/able/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="../common/help.css" />
<script type="module">
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/code-snippet.min.js";
<script defer type="module">
console.log("***** START LOAD IMPORTS *****");
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/code-snippet.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/ai-label.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/list.min.js";
</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../common/help.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- NOTE: LZString is not getting loaded on time all the time -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js"></script>
<script defer src="../common/help.js"></script> -->
<script>
console.log("***** START SEQUENTIAL IMPORTS *****");
(function() {

// JS files that need to be loaded one after the other
var libs = [
'https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js',
'../common/help.js'
];

var injectLibFromStack = function(){
if(libs.length > 0){

//grab the next item on the stack
var nextLib = libs.shift();
var headTag = document.getElementsByTagName('head')[0];

//create a script tag with this library
var scriptTag = document.createElement('script');
scriptTag.src = nextLib;

//when successful, inject the next script
scriptTag.onload = function(e){
console.log("---> loaded: " + e.target.src);
injectLibFromStack();
};

//append the script tag to the <head></head>
headTag.appendChild(scriptTag);
console.log("injecting: " + nextLib);
}
else return;
}

//start script injection
injectLibFromStack();
})();
</script>
</head>
<body>

<div class="bx--grid toolHelp">
<div class="bx--row">
<div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-16 toolHead">
Expand All @@ -43,6 +86,29 @@ <h3 id="ruleMessage"></h3>
<!-- Start main panel -->
<mark-down><script type="text/plain">

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

<!-- AI info injection sites -->

<div id="inA11yDOMCode"></div>

<div id="summary"></div>

<div id="a11yDOMCode"></div>

<div id="sourceCode"></div>

<!-- DONE with AI info injection sites -->

</script></mark-down>

<!-- End main panel -->
<div><p><br /></p></div>
<div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-4 toolSide">
<!-- Start side panel -->
<mark-down><script type="text/plain">

### Why is this important?

Landmark roles provide programmatic access to sections of a web page, making it easy for the user to understand the structure of the page and easily navigate to different sections.
Expand Down
35 changes: 31 additions & 4 deletions accessibility-checker-engine/help-v4/en-US/element_tabbable_role_valid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,16 @@
<link rel="icon" href="https://ibm.com/able/favicon-32x32.png" type="image/png">
<link rel="icon" href="https://ibm.com/able/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="../common/help.css" />
<script type="module">
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/code-snippet.min.js";
<script defer type="module">
console.log("***** START LOAD IMPORTS *****");
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/code-snippet.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/ai-label.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/list.min.js";
</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../common/help.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- NOTE: LZString is not getting loaded on time all the time -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js"></script>
<script defer src="../common/help.js"></script>
</head>
<body>
<div class="bx--grid toolHelp">
Expand All @@ -43,6 +47,29 @@ <h3 id="ruleMessage"></h3>
<!-- Start main panel -->
<mark-down><script type="text/plain">

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

<!-- AI info injection sites -->

<div id="inA11yDOMCode"></div>

<div id="summary"></div>

<div id="a11yDOMCode"></div>

<div id="sourceCode"></div>

<!-- DONE with AI info injection sites -->

</script></mark-down>

<!-- End main panel -->
<div><p><br /></p></div>
<div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-4 toolSide">
<!-- Start side panel -->
<mark-down><script type="text/plain">

### Why is this important?

A keyboard-focusable (tabbable) element has been found with an invalid role.
Expand Down
74 changes: 70 additions & 4 deletions accessibility-checker-engine/help-v4/en-US/html_lang_exists.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,57 @@
<link rel="icon" href="https://ibm.com/able/favicon-32x32.png" type="image/png">
<link rel="icon" href="https://ibm.com/able/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="../common/help.css" />
<script type="module">
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/code-snippet.min.js";
<script defer type="module">
console.log("***** START LOAD IMPORTS *****");
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/code-snippet.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v2.25.2/ai-label.min.js";
import "https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/list.min.js";
</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../common/help.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- NOTE: LZString is not getting loaded on time all the time -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js"></script>
<script defer src="../common/help.js"></script> -->
<script>
console.log("***** START SEQUENTIAL IMPORTS *****");
(function() {

// JS files that need to be loaded one after the other
var libs = [
'https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js',
'../common/help.js'
];

var injectLibFromStack = function(){
if(libs.length > 0){

//grab the next item on the stack
var nextLib = libs.shift();
var headTag = document.getElementsByTagName('head')[0];

//create a script tag with this library
var scriptTag = document.createElement('script');
scriptTag.src = nextLib;

//when successful, inject the next script
scriptTag.onload = function(e){
console.log("---> loaded: " + e.target.src);
injectLibFromStack();
};

//append the script tag to the <head></head>
headTag.appendChild(scriptTag);
console.log("injecting: " + nextLib);
}
else return;
}

//start script injection
injectLibFromStack();
})();
</script>
</head>
<body>

<div class="bx--grid toolHelp">
<div class="bx--row">
<div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-16 toolHead">
Expand All @@ -43,6 +86,29 @@ <h3 id="ruleMessage"></h3>
<!-- Start main panel -->
<mark-down><script type="text/plain">

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

<!-- AI info injection sites -->

<div id="inA11yDOMCode"></div>

<div id="summary"></div>

<div id="a11yDOMCode"></div>

<div id="sourceCode"></div>

<!-- DONE with AI info injection sites -->

</script></mark-down>

<!-- End main panel -->
<div><p><br /></p></div>
<div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-4 toolSide">
<!-- Start side panel -->
<mark-down><script type="text/plain">

### Why is this important?

Speech synthesizers that support multiple languages can adapt to the pronunciation and syntax specific to the language,
Expand Down
Loading
Loading