Merge pull request #46 from Vision-null/main

Removed and/or archived abandoned code

.gitignore

@@ -4,7 +4,8 @@ node_modules
 .vscode-test/
 *.vsix
 resultsLib.json
-ludwigReports/*
+ludwigReports/**
 !ludwigReports/.gitkeep
-Summary_Library/*
-!Summary_Library/persistent
+Summary_Library/**
+!Summary_Library/persistent
+devTestFiles/**

.vscodeignore

@@ -12,3 +12,6 @@ vsc-extension-quickstart.md
 **/*.map
 **/*.ts
 **/.vscode-test.*
+Summary_Library/**
+ludwigReports/**
+devTestFiles/**

CHANGELOG.md

@@ -1,11 +1,39 @@
-# COMING SOON
-
 # Change Log
 
 All notable changes to the "ludwig-es" extension will be documented in this file.
 
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+## [v2.0.0] - 2024-07-24
+### Added
+- Introduced a new dashboard for viewing ESLint results.
+- Added support for multiple files with separate JSON libraries.
+- New command `ludwig.getResults` to save and display lint results.
+- Added progression chart to display lint results over time.
+- Added custom severty metrics for all errors and warnings.
+
+### Changed
+- Refactored `eslintDiagnostics.ts` to use the new JSON library.
+- Updated `createDashboard.ts` to show the progression chart in the bottom panel.
+
+### Removed
+- Deprecated old commands `ludwig.scanFiles`, `ludwig.scanFilesWithCustomConfig`, `Ludwig: Compose`, and `Ludwig: Caesura`
+
+### Fixed
+- Fixed issues with duplicate lint results being added to the chart.
+- Fixed issue with diagnostics not clearing correctly.
+
+## [v1.5.0] - 2024-07-12
+### Added
+- Initial support for highlighting HTML elements.
+- Command `ludwig.highlightElements` to highlight accessibility issues in HTML.
+- Migrated to TypeScript
+
+### Fixed
+- Fixed issue with diagnostics not highlighting correctly.
+- Removed redundant code.
 
-## [Unreleased]
+## [v1.0.0] - 2023-12-30
+### Added
+- Initial release of Ludwig ES extension.
+- Basic linting support for HTML, JavaScript, and TypeScript.
+- Commands `ludwig.toggleLintActiveFile`, `ludwig.toggleLintAllFiles`, `ludwig.clearDiagnostics`.
 
-- Initial release

README.md

@@ -2,46 +2,120 @@
 
 # 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 Visual Studio Code linter designed to help developers write accessible HTML and JSX. Ludwig ensures compliance with WCAG and WAI-ARIA AA standards by providing real-time linting, error annotations, and recommendations for improving code accessibility. Additionally, it offers a dashboard that visualizes the number of accessibility errors and warnings over time, allowing developers to track progress and 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, yet 98% of websites contain accessibility issues, making them challenging for individuals with disabilities to use. Ludwig directly addresses this problem by integrating into the development process, rather than relying solely on post-development accessibility testing. It annotates HTML and JSX accessibility errors in real-time, such as missing ARIA attributes or inaccessible interactive elements via keyboard. The Ludwig dashboard provides a real-time overview of code errors and offers detailed information to help developers enhance 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 against over 100 critical accessibility guidelines outlined by WAI-ARIA. We plan to expand Ludwig’s capabilities to cover all guidelines and provide 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.
 
 # Set-Up
 
 Download Ludwig VS from the VS Code extensions marketplace.
 
-To start a Ludwig session, open the command palette and type <b>> Ludwig: Compose</b>. This will activate Ludwig, display highlights on any existing non-compliant HTML, and offer new highlights and feedback as you write.
-
-To take a break and deactivate the extension, type <b>> Ludwig: Caesura</b> into the command line. This will terminate the current session and deactivate highlighting and recommendations.
-
-<p align="center"><img src="./assets/ludwig-compose-caesura.gif" width='600' style="margin-top: 1em; margin-bottom: 1em;"></p>
-
-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."
-
-<p align="center"><img src="./assets/ludwig-scan-interface.gif" width='600' style="margin-top: 1em; margin-bottom: 1em;"></p>
+To start Ludwig, navigate to the document that you want scanned and click on "Ludwig: Disabled" on the bottom status bar to enable it. This should pop up a drop down menu from the command palette with these options:
+
+<p align="center"><img src="./assets/SeymourOptionsMenu.jpeg" width='600' style="margin-top: 1em; margin-bottom: 1em;"></p>
+
+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. 
+
+
+**In order to populate Dashboard with historical scan results:**
+1. Open HTML/JSX Document where you want to scan for accessibility issues.
+2. Select "Lint Active Files" to save scan results in local JSON library.
+3. Continue editing the file as needed.
+4. Select "Update Dashboard/Generate Report" to see new changes reflected on progression chart. 
+
+**Note:** <br/>
+- If there are no changes between updates to the dashboard, no new plots will appear on the chart. <br/>
+- Each file has its own separate local JSON library, located in the Summary_Library folder created when "Lint Active File" is triggered. This library stores the linting data for that specific file.
+
+<p align="center"><img src="./assets/showChartSpeed.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;" autoplay></p>
+
+# 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. [JSX A11Y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme)
+
+
+**Accessibility Score Calculation:**
+To determine a fair percentage of accessibility for a document, we referenced Google Lighthouse's weighted scoring system that considers the severity and frequency of accessibility issues. On top of that foundation we also considered the size of the document. This approach ensures a balanced and comprehensive measure of accessibility compliance.
+
+The following logic governs how the accessibility score is calculated: <br/>
+1. Assign Weights to Different severities (W)
+2. Count Issues for each severity (C)
+3. Calculate Total Weighted Score: </br>
+
+<p align='center'> Total Score = (W<sub>1</sub>* C<sub>1</sub>) + (W<sub>2</sub>* C<sub>2</sub>)... +(W<sub>n</sub> * C<sub>n</sub>) <p/>
+
+4. Determine the overall compliance percentage by considering the total number of elements and the number of non-compliant elements in the document:
+<p align="center"><img src="./assets/CompliancePercentage.jpg" width='600' style="margin-top: 1em; margin-bottom: 1em;"></p>
+5. Normalize the score to account for the size of the document and adjust the compliance percentage:
+<p align="center"><img src="./assets/Normalized&Adjusted.jpg" width='600' style="margin-top: 1em; margin-bottom: 1em;"></p>
+
+
+**The table below shows the corresponding weights (W) to each accessibility warning/error.**
+
+| JSX Rules | Custom Severity (W) |
+|-----------------|----------------------|
+| 'jsx-a11y/alt-text' | 10 |
+| 'jsx-a11y/anchor-has-content' | 10 |
+| 'jsx-a11y/interactive-supports-focus' | 10 |
+| 'jsx-a11y/heading-has-content' | 9 |
+| 'jsx-a11y/label-has-associated-control' | 9 |
+| 'jsx-a11y/media-has-caption' | 9 |
+| 'jsx-a11y/anchor-is-valid' | 8 |
+| 'jsx-a11y/aria-role' | 8 |
+| 'jsx-a11y/aria-unsupported-elements' | 8 |
+| 'jsx-a11y/no-interactive-element-to-noninteractive-role' | 8 |
+| 'jsx-a11y/role-has-required-aria-props' | 8 |
+| 'jsx-a11y/aria-props' | 7 |
+| 'jsx-a11y/aria-proptypes' | 7 |
+| 'jsx-a11y/iframe-has-title' | 7 |
+| 'jsx-a11y/mouse-events-have-key-events' | 7 |
+| 'jsx-a11y/no-noninteractive-element-interactions' | 7 |
+| 'jsx-a11y/no-noninteractive-element-to-interactive-role' | 7 |
+| 'jsx-a11y/role-supports-aria-props' | 7 |
+| 'jsx-a11y/click-events-have-key-events' | 6 |
+| 'jsx-a11y/aria-activedescendant-has-tabindex' | 6 |
+| 'jsx-a11y/no-distracting-elements' | 6 |
+| 'jsx-a11y/no-noninteractive-tabindex' | 6 |
+| 'jsx-a11y/no-static-element-interactions' | 6 |
+| 'jsx-a11y/scope' | 6 |
+| 'jsx-a11y/tabindex-no-positive' | 6 |
+| 'jsx-a11y/html-has-lang' | 5 |
+| 'jsx-a11y/img-redundant-alt' | 5 |
+| 'jsx-a11y/lang' | 5 |
+| 'jsx-a11y/no-access-key' | 5 |
+| 'jsx-a11y/no-redundant-roles' | 5 |
+| 'jsx-a11y/no-autofocus' | 4 |
+| 'jsx-a11y/no-onchange' | 4 |
 
 # 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 custom severity score | To-Do |
+| Integrate AI tools to help automate error fixing  | To-Do |
+ 
 # Contributors
-
+Version 2.0 Team: <br>
+Anar Gasimov | [LinkedIn](https://www.linkedin.com/in/anargasimov/) <br>
+Benson Cheng | [LinkedIn](https://www.linkedin.com/in/bensonhpcheng/) <br>
+Kristian Schott | [LinkedIn](https://www.linkedin.com/in/kristian-schott/) <br>
+Saagar Mehta | [LinkedIn](https://www.linkedin.com/in/saagar-mehta-a86981110/) <br>
+Spencer Hezzelwood | [LinkedIn](https://www.linkedin.com/in/spencer-lane-hezzelwood-650b9a19/) <br>
+
+Version 1.0 Team: <br>
 Connie Johnson | [LinkedIn](https://www.linkedin.com/in/connie-johnson-7a33152a4) <br>
+Harold Reeves | [LinkedIn](https://www.linkedin.com/in/haroldreeves/) <br>
 Jake Johnson | [LinkedIn](https://www.linkedin.com/in/jake527/) <br>
 Prashay Mehta | [LinkedIn](https://www.linkedin.com/in/prashaymehta/) <br>
-Harold Reeves | [LinkedIn](https://www.linkedin.com/in/haroldreeves/) <br>
 Tyler Spicer | [LinkedIn](https://www.linkedin.com/in/tyler-e-spicer/) <br>
 
 # Licensing Info
@@ -66,4 +140,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.