Merge pull request #37 from khiga8/feat/feedback-panel

Markdown Suggestions

README.md

@@ -27,20 +27,19 @@ This is a browser extension that runs a simple JavaScript snippet on github.com
 
 This extension will only run on GitHub domain and does the following on all markdown bodies on GitHub:
 
-- Creates a text overlay over all images with the alt text. This includes Pull Requests, Issues, Repo READMEs, and Discussions. 
-    - If an image is missing an alt text, it will appear with a red border. 
-    - **If an image has an empty string alt like `""`, it will also appear with a red border**. Typically, an empty string alt indicates that an image is decorative and should be hidden. However, on GitHub, all markdown images are rendered within a link element. Therefore, we recommend that all images in GitHub markdown have an alt text provided or the link will be announced without a bane,
+- Creates a text overlay over all images with the alt text. This includes Pull Requests, Issues, Repo READMEs, and Discussions.
+  - If an image is missing an alt text, it will appear with a red border.
+  - **If an image has an empty string alt like `""`, it will also appear with a red border**. Typically, an empty string alt indicates that an image is decorative and should be hidden. However, on GitHub, all markdown images are rendered within a link element. Therefore, we recommend that all images in GitHub markdown have an alt text provided or the link will be announced without a bane,
 
 <img width="600" alt="Example screenshots of two images that have been posted on a GitHub issue, each appearing with alt text overlay. The first has unhelpful alt text based on the filename, `Screen Shot 2022-02-10` while the second image has a more intentional alt text, `Screenshot of example select menu...`." src="https://user-images.githubusercontent.com/16447748/154407948-1d02f35f-52ce-49ed-b098-e3528018230b.png">
 
 - Appends the heading level that is used after the heading text within markdown bodies. Heading levels are useful for conveying semantics for screenreader, and other assistive technology users. This similarly aims to bring mindfulness particularly for sighted users who may pay less attention to heading level semantics.
 
 <img width="600" alt="Example screenshots of heading levels appended at end of heading text line inside a GitHub markdown, each represented by a different color" src="https://user-images.githubusercontent.com/16447748/154763325-57ad4785-691c-4760-b0ca-b2e3cabacd1f.png">
 
-
 ### Customization note
 
-The styling I've set may not be suitable for all users. Feel free to customize these however you like when you download these files. 
+The styling I've set may not be suitable for all users. Feel free to customize these however you like when you download these files.
 
 You can do this by modifying `styles.css`. There are CSS variables at the top which you may set to your preference. For example, you may choose to set a different color for each heading level or remove the border. If you'd prefer the headings to be positioned at the front, follow the notes in `contentScript.js`. Once changes are made, `Update` on `chrome://extensions/` so changes are reflected in the extension.
 

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
+};

devtools-feedback/contentScript.js

@@ -0,0 +1,53 @@
+const getType = (element) => {
+  if (
+    element.tagName === "TEXTAREA" &&
+    element.getAttribute("name").includes("comment")
+  ) {
+    return "comment";
+  }
+
+  if (
+    element.tagName === "TEXTAREA" &&
+    element.getAttribute("name").includes("issue")
+  ) {
+    return "issue";
+  }
+};
+
+chrome.runtime.onConnect.addListener(function (port) {
+  port.onMessage.addListener(function (msg) {
+    if (msg.request === "getTextAreas") {
+      const markdownTextAreas =
+        Array.from(document.querySelectorAll("textArea")) || [];
+      const results = [];
+
+      const codeMirrors = Array.from(document.querySelectorAll(".CodeMirror"));
+      [...markdownTextAreas, ...codeMirrors].forEach((textArea) => {
+        // ensure that textArea is not hidden and that the user has typed in a value
+        if (textArea.clientWidth && textArea.value) {
+          results.push({
+            textAreaOutput: textArea.value,
+            type: getType(textArea),
+            id: textArea.id,
+          });
+        }
+      });
+
+      port.postMessage({ results: results });
+    } else if (msg.request === "focusComponent") {
+      (
+        Array.from(document.getElementsByClassName("github-a11y-highlight")) ||
+        []
+      ).forEach((element) => {
+        element.classList.remove("github-a11y-highlight");
+      });
+
+      const textArea = document.getElementById(msg.id);
+      if (textArea) {
+        textArea.classList.add("github-a11y-highlight");
+        textArea.focus();
+        textArea.scrollIntoView();
+      }
+    }
+  });
+});

devtools-feedback/contentScriptStyles.css

@@ -0,0 +1,3 @@
+.github-a11y-highlight {
+  border: 4px solid #58a6ff !important;
+}

devtools-feedback/devtools.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mona's Markdown a11y</title>
+</head>
+<body>
+    <script src="devtools.js"></script>
+</body>
+</html> 

devtools-feedback/devtools.js

@@ -0,0 +1,6 @@
+// Create a tab in the devtools area
+chrome.devtools.panels.create(
+  "Mona's Markdown a11y",
+  "./devtools-feedback/toast.png",
+  "./devtools-feedback/panel.html"
+);

devtools-feedback/panel.css

@@ -0,0 +1,116 @@
+:root {
+  /* Feel free to customize colors to your preference */
+  --github-a11y-light-blue: rgb(88, 166, 255);
+  --github-a11y-blue: rgb(13, 65, 157);
+  --github-a11y-blue-grey: rgba(88, 166, 255, 0.5);
+  --github-a11y-light-grey: rgb(33, 38, 45);
+  --github-a11y-background: rgb(13, 17, 23);
+  --github-a11y-font-color: rgb(201, 209, 217);
+  --github-a11y-border-color: rgba(240, 246, 252, 0.1);
+  --github-a11y-background-accent: rgba(33, 38, 45, 0.5);
+}
+
+body {
+  background-color: var(--github-a11y-background);
+  color: var(--github-a11y-font-color);
+  font-family: "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji";
+  font-size: 14px;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+.divider {
+  border-top: 1px solid var(--github-a11y-border-color);
+  margin-bottom: 12px;
+}
+
+.feedbackGroup {
+  background-color: var(--github-a11y-background-accent);
+  padding: 16px;
+  border-radius: 4px;
+  margin-top: 12px;
+}
+
+a {
+  color: var(--github-a11y-light-blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.topSection {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.heading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--github-a11y-light-blue);
+}
+
+.options {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.monaLisa {
+  width: 65px;
+}
+
+.validationButton {
+  margin: 24px 0;
+}
+
+button {
+  text-decoration: none;
+  padding: 0.75em 1.25em;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  display: inline-block;
+  cursor: pointer;
+  color: var(--github-a11y-light-blue);
+  background-color: var(--github-a11y-light-grey);
+  border: 1px solid var(--github-a11y-border-color);
+}
+
+button:hover {
+  background-color: var(--github-a11y-border-color);
+  text-decoration: none;
+  color: var(--github-a11y-light-blue);
+  border: 1px solid var(--github-a11y-border-color);
+}
+
+button:active {
+  color: rgb(255, 255, 255);
+  background-color: var(--github-a11y-blue);
+  border: 1px solid var(--github-a11y-blue);
+}
+
+button:disabled {
+  cursor: default;
+  color: var(--github-a11y-blue-grey);
+  background-color: var(--github-a11y-background);
+  border-color: var(--github-a11y-border-color);
+}
+
+.instructions {
+  font-size: 16px;
+}
+
+.main {
+  display: flex;
+  justify-content: center;
+}

devtools-feedback/panel.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="panel.css" />
+    <title>Mona's Markdown a11y</title>
+  </head>
+  <body>
+    <div class="topSection">
+      <div class="heading">
+        <img class="monaLisa" alt="" src="./toast.png" />
+        <h1>Mona's Markdown A11y</h1>
+      </div>
+      <p>Get feedback on the Markdown you're writing in GitHub</p>
+      <div class="options">
+        <button id="mona-validate-markdown" class="validationButton">
+          Validate Markdown
+        </button>
+        <button id="mona-reset" class="validationButton">Reset</button>
+      </div>
+    </div>
+    <main id="main" class="main"></main>
+    <script type="module" src="utils.js"></script>
+    <script type="module" src="panel.js"></script>
+  </body>
+</html>