${0}/g, "")
- // .replace(/<\/code>[ \r\n]*<\/pre>/g, " ");
- // }
}
);
@@ -86,14 +156,25 @@ customElements.define(
"code-snippet",
class extends HTMLBaseElement {
childrenAvailableCallback() {
+ console.log("Func childrenAvailableCallback");
let oldCode = this.innerHTML;
this.innerHTML = "";
// const shadowRoot = this.attachShadow({mode: 'open'});
const shadowRoot = this;
- let snip = document.createElement("bx-code-snippet");
+
+ // create
+ const codeSnippet = this;
+ console.log("codeSnippet = ", codeSnippet);
+
+ // create
+ let snip = document.createElement("cds-code-snippet");
snip.setAttribute("type", "multi");
- snip.innerHTML = oldCode.replace(/ ruleInfo.msgArgs[matchedNum]);
+ console.log("***** Func updateWithRuleInfo *****"); // used for rule and code injection
+ console.log("ruleInfo = \n", ruleInfo);
+ // split ruleInfo (later rename to helpInfo) into ruleInfo (param1) and aiInfo (param2)
+
+ let ruleInfoTemp = ruleInfo?.substring(0, ruleInfo.indexOf('&'));
+ console.log("ruleInfoTemp = \n", ruleInfoTemp);
+ ruleInfoTemp = JSON.parse(decodeURIComponent(ruleInfoTemp));
+ console.log("ruleInfoTemp = \n", ruleInfoTemp);
+ console.log("ruleInfoTemp.message = ", ruleInfoTemp.message);
+
+ let aiInfo = ruleInfo?.substring(ruleInfo.indexOf('&') + 1);
+ console.log("aiInfo = \n", aiInfo);
+ console.log("typeof aiInfo = ", typeof aiInfo);
+ aiInfo = JSON.parse(aiInfo);
+ if (aiInfo.inaccessible_dom) {
+
+ } else {
+ aiInfo = JSON.parse(aiInfo);
+ }
+ console.log("aiInfo = \n", aiInfo);
+ console.log("typeof aiInfo = ", typeof aiInfo);
+ console.log("aiInfo.inaccessible_dom = ", aiInfo.inaccessible_dom);
+
+ if (ruleInfoTemp) {
+ if (ruleInfoTemp.message) {
+ let ruleMessage = ruleInfoTemp.message.replace(/\{(\d+)\}/g, (matchedStr, matchedNum, matchedIndex) => ruleInfoTemp.msgArgs[matchedNum]);
document.querySelector("#ruleMessage").innerHTML = ruleMessage.replace(/&/g, "&").replace(//g, ">")
}
+ // NOT used in AI version
+ // setTimeout(() => {
+ // if (ruleInfo.snippet) {
+ // console.log("JOHO Element location");
+ // let snip = ruleInfo.snippet;
+ // snip = snip.replace(/( [a-zA-Z-]+="[^"]*")/g, "\n $1");
+ // let snipElem = document.createElement("code-snippet");
+ // for (let line of snip.split("\n")) {
+ // snipElem.appendChild(document.createTextNode(line+"\n"));
+ // }
+ // let locSnippet = document.querySelector("#locSnippet");
+ // locSnippet.innerHTML = `Element location
`;
+ // locSnippet.appendChild(snipElem);
+ // }
+ // }, 0);
setTimeout(() => {
- if (ruleInfo.snippet) {
- let snip = ruleInfo.snippet;
- snip = snip.replace(/( [a-zA-Z-]+="[^"]*")/g, "\n $1");
- let snipElem = document.createElement("code-snippet");
- for (let line of snip.split("\n")) {
- snipElem.appendChild(document.createTextNode(line+"\n"));
+ // let inA11yDOMCode = "";
+ if (aiInfo.inaccessible_dom) {
+ console.log("JOHO aiInfo.inaccessible_dom = \n", aiInfo.inaccessible_dom);
+ let formattedHTML = "";
+ let codeSnippet = HTMLElement;
+ let locSnippet = document.querySelector("#inA11yDOMCode");
+ if (aiInfo.inaccessible_dom === "We are waiting on AI server.") {
+ // formattedHTML = aiInfo.inaccessible_dom;
+ codeSnippet = document.createElement("cds-code-snippet-skeleton");
+ codeSnippet.setAttribute("type", "multi");
+ } else {
+ formattedHTML = formatHTML(aiInfo.inaccessible_dom);
+ codeSnippet = document.createElement("cds-code-snippet");
+ codeSnippet.setAttribute("type", "multi");
+ for (let line of formattedHTML.split("\n")) {
+ codeSnippet.appendChild(document.createTextNode(line+"\n"));
+ }
+ console.log("codeSnippet after content added = ", codeSnippet);
}
- let locSnippet = document.querySelector("#locSnippet");
- locSnippet.innerHTML = `Element location
`;
- locSnippet.appendChild(snipElem);
+ locSnippet.innerHTML = `Detected Inaccessibile HTML DOM code
`;
+ locSnippet.appendChild(codeSnippet);
}
}, 0);
- if (ruleInfo.value) {
- let value = ruleInfo.value;
+ setTimeout(() => {
+ // let a11yDOMCode = "";
+ if (aiInfo.accessible_dom) {
+ console.log("JOHO Accessible code detected");
+ let formattedHTML = "";
+ let codeSnippet = HTMLElement;
+ if (aiInfo.accessible_dom === "We are waiting on AI server.") {
+ // formattedHTML = aiInfo.inaccessible_dom;
+ codeSnippet = document.createElement("cds-code-snippet-skeleton");
+ codeSnippet.setAttribute("type", "multi");
+ } else {
+ formattedHTML = formatHTML(aiInfo.accessible_dom);
+ codeSnippet = document.createElement("cds-code-snippet");
+ codeSnippet.setAttribute("type", "multi");
+ for (let line of formattedHTML.split("\n")) {
+ codeSnippet.appendChild(document.createTextNode(line+"\n"));
+ }
+ console.log("codeSnippet after content added = ", codeSnippet);
+ aiElem = document.createElement("cds-ai-label");
+ aiElem.setAttribute("size","small");
+ aiElem.setAttribute("style", "justify-content: flex-end !important; margin-right: 16px !important;");
+ }
+ let locSnippet = document.querySelector("#a11yDOMCode");
+ locSnippet.innerHTML = `Accessibile HTML DOM code
`;
+ if (aiInfo.accessible_source !== "We are waiting on AI server.") {
+ locSnippet.appendChild(aiElem);
+ }
+ locSnippet.appendChild(codeSnippet);
+ }
+ }, 0);
+ setTimeout(() => {
+ let sourceCode =
+ // `import React from 'react';\n function AccessibleSVG() {\n return (\n \n );\n }\n export default AccessibleSVG`;
+ "import React from 'react'; const ColorFilters = () => { return ( ); }; export default ColorFilters;"
+
+ if (aiInfo.accessible_source) {
+ console.log("JOHO Source code detected");
+ let formattedReact = "";
+ let formattedReactjsCode = "";
+ let codeSnippet = HTMLElement;
+ let aiElem = HTMLElement;
+ if (aiInfo.accessible_source === "We are waiting on AI server.") {
+ // formattedReact = aiInfo.accessible_source;
+ codeSnippet = document.createElement("cds-code-snippet-skeleton");
+ codeSnippet.setAttribute("type", "multi");
+ } else {
+ formattedReact = aiInfo.accessible_source;
+ formattedReact = prettyPrintReactCode(aiInfo.accessible_source);
+ console.log("formattedReact = \n",formattedReact);
+ if (formattedReactjsCode) {
+ // formattedReactjsCode = prettier.format(aiInfo.accessible_source,
+ // {parser: "babel", // Use 'babel' parser for React JSX
+ // plugins: [pluginBabel, pluginEstree, pluginHtml], // Add the Babel plugin
+ // printWidth: 80, // Adjust as needed
+ // tabWidth: 2,
+ // useTabs: false,
+ // semi: true,
+ // singleQuote: false,
+ // trailingComma: "all",
+ // bracketSpacing: true,
+ // jsxBracketSameLine: false,
+ // arrowParens: "always",
+ // });
+ }
+
+ codeSnippet = document.createElement("cds-code-snippet");
+ codeSnippet.setAttribute("type", "multi");
+ for (let line of formattedReact.split("\n")) {
+ codeSnippet.appendChild(document.createTextNode(line+"\n"));
+ }
+ console.log("codeSnippet after content added = ", codeSnippet);
+ aiElem = document.createElement("cds-ai-label");
+ aiElem.setAttribute("size","small");
+ aiElem.setAttribute("style", "justify-content: flex-end !important; margin-right: 16px !important;");
+ }
+
+ let locSnippet = document.querySelector("#sourceCode");
+ locSnippet.innerHTML = `(Reactjs) source code that generates A11y DOM code
`;
+ if (aiInfo.accessible_source !== "We are waiting on AI server.") {
+ locSnippet.appendChild(aiElem);
+ }
+ locSnippet.appendChild(codeSnippet);
+ }
+ }, 0);
+ setTimeout(() => {
+ // let summary = "The original SVG element was inaccessible because it lacked an accessible name. To fix this, an aria-label attribute was added to provide a meaningful label, and a role attribute was added to indicate that the SVG is an image. This allows screen readers to provide a description of the SVG to users with visual impairments.";
+ if (aiInfo.change_summary) {
+ console.log("JOHO summary detected");
+ let codeSnippet = HTMLElement;
+ let aiElem = HTMLElement;
+ if (aiInfo.change_summary === "We are waiting on AI server.") {
+ codeSnippet = document.createElement("cds-code-snippet-skeleton");
+ codeSnippet.setAttribute("type", "multi");
+ } else {
+ const characterLimit = 75;
+ const formattedString = formatString(aiInfo.change_summary, characterLimit);
+ console.log("summary formattedString = \n", formattedString);
+
+ codeSnippet = document.createElement("cds-code-snippet");
+ codeSnippet.setAttribute("type", "multi");
+ codeSnippet.appendChild(document.createTextNode(formattedString));
+
+ aiElem = document.createElement("cds-ai-label");
+ aiElem.setAttribute("size","small");
+ aiElem.setAttribute("style", "justify-content: flex-end !important; margin-right: 16px !important;");
+ }
+ let locSnippet = document.querySelector("#summary");
+ locSnippet.innerHTML = `Summary of changes to fix A11y issues
`;
+ if (aiInfo.change_summary !== "We are waiting on AI server.") {
+ locSnippet.appendChild(aiElem);
+ }
+ locSnippet.appendChild(codeSnippet);
+ }
+ }, 0);
+ if (ruleInfoTemp.value) {
+ let value = ruleInfoTemp.value;
const val = valueMap[value[0]][value[1]];
let icon = "";
if (val === "Violation") icon = `