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 25 commits into
base: master
Choose a base branch
from
+4,932 −13,175
Draft

Joho ai building blocks info extraction 6920 #2249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 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
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.

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
76 changes: 72 additions & 4 deletions accessibility-checker-engine/help-v4/en-US/img_alt_valid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,58 @@
<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 +87,30 @@ <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 an image contains important information, providing a text alternative makes the same information accessible through assistive technologies, such as a Braille display.
Expand Down
83 changes: 76 additions & 7 deletions accessibility-checker-engine/help-v4/en-US/svg_graphics_labelled.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,31 @@ <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">

### General guidance for this issue

### Why is this important?

An SVG component with a graphics role can contain essential information as well as multiple shapes.
Expand All @@ -51,7 +119,7 @@ <h3 id="ruleMessage"></h3>
With the explicit use of roles and attributes, the author provides a clear indication that the content should convey meaning via the accessibility name and description to assistive technology users.

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

### What to do

Expand All @@ -76,7 +144,7 @@ <h3 id="ruleMessage"></h3>
Note: The `aria-labelledby` and `aria-describedby` properties can reference the element on which they are given,
in order to concatenate one of the other text alternatives with text from a separate element.


Example:

```
Expand All @@ -93,7 +161,7 @@ <h3 id="ruleMessage"></h3>
<!-- This is where the rule id is injected -->
<div id="ruleInfo"></div>
</div>
<div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-4 toolSide">
<!-- <div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-4 toolSide"> -->
<!-- Start side panel -->
<mark-down><script type="text/plain">

Expand All @@ -113,6 +181,7 @@ <h3 id="ruleMessage"></h3>
* People using text-based browsers (e.g., Lynx) or audio interfaces

</script></mark-down>

<!-- End side panel -->
</div>
</div>
Expand Down
Loading
Loading