From 545c83ba02e8669849ea289a875e53eee6076423 Mon Sep 17 00:00:00 2001 From: Saagar Mehta Date: Tue, 23 Jul 2024 19:53:33 -0400 Subject: [PATCH 01/13] Update readme --- README.md | 53 +- Summary_Library/persistent/.info | 3 - .../persistent/JSX_Medium.jsx.json | 1046 ------------ Summary_Library/persistent/JSX_Short.jsx.json | 1484 ----------------- 4 files changed, 37 insertions(+), 2549 deletions(-) delete mode 100644 Summary_Library/persistent/.info delete mode 100644 Summary_Library/persistent/JSX_Medium.jsx.json delete mode 100644 Summary_Library/persistent/JSX_Short.jsx.json diff --git a/README.md b/README.md index 3090b9fd..28532092 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@ # Ludwig VS -Ludwig VS is a VS Code linter that makes writing accessible HTML easier for developers. Ludwig offers in-line highlighting of HTML that is not in compliance with WCAG and WAI-ARIA standards and provides recommendations to enhance the accessibility of your HTML code. +Ludwig VS is a VS Code linter that makes writing accessible HTML and JSX easier for developers. Ludwig offers linting of HTML and JSX files that are not in compliance with WCAG and WAI-ARIA AA standards and provides recommendations to enhance the accessibility of your code. Additionally, it creates a chart in a dashboard to show the number of accessibilty errors and warnings over time with real-time updates to track progress save historical data. -One sixth of the world’s population will experience a disability at some point in their lifetime, but 98% of websites contain inaccessibility issues, making them challenging for individuals with disabilities to use. Ludwig tackles this problem directly by providing a reliable tool that developers can leverage during the development process, rather than relying solely on post-development accessibility testing. Ludwig highlights HTML accessibility errors in real-time, such as missing ARIA-attributes or empty tags. When a developer hovers over the highlighted code, a hover message will display the root issue and provide further documentation for reference. Additionally, the Ludwig dashboard panel offers a comprehensive overview of the errors in a developer’s HTML and provides a custom accessibility score for the developer to gauge and improve their web content’s accessibility. +One sixth of the world’s population will experience a disability at some point in their lifetime, but 98% of websites contain inaccessibility issues, making them challenging for individuals with disabilities to use. Ludwig tackles this problem directly by providing a reliable tool that developers can leverage during the development process, rather than relying solely on post-development accessibility testing. Ludwig annotates HTML and JSX accessibility errors in real-time, such as missing ARIA-attributes or ensuring all interactive elements are accessible via keyboard. As well, the Ludwig dashboard panel offers a real-time overview of the errors in a developer’s code and provides line by line information for the developer to gauge and improve their web content’s accessibility. -Ludwig tests HTML for over 85 of the most critical and common accessibility guidelines outlined by WAI-ARIA. We still plan on expanding Ludwig’s capabilities to provide coverage for all guidelines as well as by providing testing for JSX. If you or someone you know would like to contribute to Ludwig, please contact us! +Ludwig tests HTML and JSX for over 100 of the most critical and common accessibility guidelines outlined by WAI-ARIA. We still plan on expanding Ludwig’s capabilities to provide coverage for all guidelines as well as by providing more robust data visualizations. If you or someone you know would like to contribute to Ludwig, please contact us! Visit the [Ludwig](https://www.ludwigvs.com) website to learn more. @@ -14,34 +14,55 @@ Visit the [Ludwig](https://www.ludwigvs.com) website to learn more. Download Ludwig VS from the VS Code extensions marketplace. -To start a Ludwig session, open the command palette and type > Ludwig: Compose. This will activate Ludwig, display highlights on any existing non-compliant HTML, and offer new highlights and feedback as you write. +To start Ludwig, navigate to the document that you want scanned and click on "Ludwig: Disabled" to enable it. This should pop up a drop down menu from the command palette with these options: -To take a break and deactivate the extension, type > Ludwig: Caesura into the command line. This will terminate the current session and deactivate highlighting and recommendations. +___________________________add picture of commands in palette------------------------------------- +

Lint Active File (Toggle)
Lint All Files (Toggle)
Disable Linting (Toggle)
Update Dashboard / Generate Report
Reset Library
+ +Errors and warnings found in current active editor will be reported in the 'Problems' tab in the bottom panel, in addition to highlighting the line where the error was found. + +--------------need to update with gifs of finished product:---------------------------------------

-To scan your document and generate your accessibility score, press the Ludwig logo on the activity bar (sidebar to the left), then press "Scan Document." +To scan your document and generate your accessibility score,run the command "Update Dashboard / Generate Report", then press "Scan Document."

+-------------------------------------------------------------------------------------------------- + +# Deep Dive +Powered by ESlint:
+Ludwig utilizes the JSX a11y ESLint plugin to parse through the user's codebase and extract accessibility errors/warnings using a custom formatter. [Read More](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) + +Logic behind Accessibility Score:
+Referenced Google Lighthouse's accessibility severity weighting and implemented the + # User Best Practices -Please note that Ludwig is currently in Beta and functions best when used with proper HTML formatting. Therefore, to ensure proper formatting, please use a well-established linting tool such as [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). +Please note that Ludwig is currently in Beta and functions best when used with proper HTML and JSX formatting. Therefore, to ensure proper formatting, please use a well-established linting tool such as [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). # Open Source Work -| Feature / Bug | Status | -| -------------------------------------------------- | ----------- | -| Fix inconsistent highlights on parent elements | In Progress | -| Expand coverage to JSX | To-Do | -| Expand coverage to non-serious/critical guidelines | To-Do | - +| Feature / Bug | Status | +| -------------------------------------------------- | ----------- | +| Create further dashboard tools for data visulizations | In progress | +| Prioritize errors and warnings based on severity score | To-Do | +| Integrate AI tools to help automate error fixing | To-Do | + # Contributors - +Version 2.0 Team:
+Anar Gasimov | [LinkedIn](https://www.linkedin.com/in/anargasimov/)
+Benson Cheng | [LinkedIn](https://www.linkedin.com/in/bensonhpcheng/)
+Kristian Schott | [LinkedIn](https://www.linkedin.com/in/kristian-schott/)
+Saagar Mehta | [LinkedIn](https://www.linkedin.com/in/saagar-mehta-a86981110/)
+Spencer Hezzelwood | [LinkedIn](https://www.linkedin.com/in/spencer-lane-hezzelwood-650b9a19/)
+ +Version 1.0 Team:
Connie Johnson | [LinkedIn](https://www.linkedin.com/in/connie-johnson-7a33152a4)
+Harold Reeves | [LinkedIn](https://www.linkedin.com/in/haroldreeves/)
Jake Johnson | [LinkedIn](https://www.linkedin.com/in/jake527/)
Prashay Mehta | [LinkedIn](https://www.linkedin.com/in/prashaymehta/)
-Harold Reeves | [LinkedIn](https://www.linkedin.com/in/haroldreeves/)
Tyler Spicer | [LinkedIn](https://www.linkedin.com/in/tyler-e-spicer/)
# Licensing Info @@ -66,4 +87,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +SOFTWARE. \ No newline at end of file diff --git a/Summary_Library/persistent/.info b/Summary_Library/persistent/.info deleted file mode 100644 index 084e6a77..00000000 --- a/Summary_Library/persistent/.info +++ /dev/null @@ -1,3 +0,0 @@ -# Whitelisted in .gitignore - -# Add report files and etc. you would like to persist across commits here diff --git a/Summary_Library/persistent/JSX_Medium.jsx.json b/Summary_Library/persistent/JSX_Medium.jsx.json deleted file mode 100644 index 1a6b0dad..00000000 --- a/Summary_Library/persistent/JSX_Medium.jsx.json +++ /dev/null @@ -1,1046 +0,0 @@ -[ - { - "summary": { - "dateCreated": "2024-07-21", - "timeCreated": "23:06:57", - "activeWorkspace": "devTestFiles [WSL: Ubuntu-24.04]", - "filepath": "/home/anar/Projects/Ludwig/devTestFiles/JSX/Medium.jsx", - "errors": 4, - "warnings": 3 - }, - "details": [ - { - "ruleId": "jsx-a11y/no-distracting-elements", - "severity": 1, - "message": "Do not use elements as they can create visual accessibility issues and are deprecated.", - "line": 10, - "column": 7, - "endLine": 10, - "endColumn": 16, - "nodeType": "JSXOpeningElement", - "customSeverity": 6 - }, - { - "ruleId": "jsx-a11y/html-has-lang", - "severity": 2, - "message": " elements must have the lang prop.", - "line": 12, - "column": 7, - "endLine": 12, - "endColumn": 13, - "nodeType": "JSXOpeningElement", - "customSeverity": 5 - }, - { - "ruleId": "jsx-a11y/iframe-has-title", - "severity": 2, - "message": " - -
Access key
- -

Incorrect heading level

-

Should be h2

-
Missing tabindex
-
Redundant role
- - ); -} - -export default LongTest; diff --git a/devTestFiles/JSX/Medium.jsx b/devTestFiles/JSX/Medium.jsx deleted file mode 100644 index b76f2f4d..00000000 --- a/devTestFiles/JSX/Medium.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -function LongTest() { - return ( -
-

Long Test with Multiple Errors

- - Non-interactive button -
{}}>Mouse event only
- Distracting element -
Positive tabindex
- - -

Missing lang attribute

- - - - - - - -

Incorrect heading level

-

Should be h2

-
Missing tabindex
-
Redundant role
-
-) -} - -export default LongTest; \ No newline at end of file diff --git a/devTestFiles/JSX/Short.jsx b/devTestFiles/JSX/Short.jsx deleted file mode 100644 index bd6366ce..00000000 --- a/devTestFiles/JSX/Short.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; - -function ShortTest() { - return ( -
-

Short Test

- -
{}} - role="button" - > - Click me -
- sing onClick handler on clickable div */ sing key events on clickable element */ -
- {/* Heading with no content */} -

- {/* HTML element without lang attribute */} - - {/* Iframe without title */} -