Skip to content
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.

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

Removed and/or archived abandoned code #46

Merged
merged 23 commits into from
Aug 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
55e0fee
Merge pull request #1 from Vision-null/dev
artmontinski Jul 1, 2024
545c83b
Update readme
Saagmehta97 Jul 23, 2024
bbd5b25
fix line number anomaly
spencerhezzelwood Jul 24, 2024
1afa78a
style: auto-fix linting and formatting issues
Jul 24, 2024
b8df766
Update readMe, remove text above chart, update command palette titles
Saagmehta97 Jul 24, 2024
bfa01da
Merge pull request #29 from Vision-null/line-number-anomaly
artmontinski Jul 24, 2024
819397c
update readme and changelong
Saagmehta97 Jul 24, 2024
efd39e4
Update readme
Saagmehta97 Jul 23, 2024
1cbac3a
Update readMe, remove text above chart, update command palette titles
Saagmehta97 Jul 24, 2024
d479bf7
update readme and changelong
Saagmehta97 Jul 24, 2024
fec957d
Merge branch 'dev-readMe' of github.com:Vision-null/Ludwig into dev-r…
Saagmehta97 Jul 24, 2024
54588b7
still rebasing
Saagmehta97 Jul 24, 2024
a29320b
update readme and changelong
Saagmehta97 Jul 24, 2024
ee0339b
Merge branch 'dev-readMe' of github.com:Vision-null/Ludwig into dev-r…
Saagmehta97 Jul 24, 2024
a0d97a7
Merge pull request #30 from Vision-null/dev-readMe
kristianschott Jul 24, 2024
711611d
Formula & table for accessiblity score calc. in ReadMe
bensonhpcheng Jul 24, 2024
bb27330
Merge pull request #31 from Vision-null/dev-readMe-formula
artmontinski Jul 25, 2024
9385444
merge dev
artmontinski Jul 26, 2024
2a83dd7
Merge pull request #32 from Vision-null/visuals
artmontinski Jul 27, 2024
6d1467c
restore command activations and cleanup code
artmontinski Jul 27, 2024
a0f0e3d
Merge pull request #33 from Vision-null/final_adjustments
artmontinski Jul 27, 2024
71be939
Merge pull request #34 from Vision-null/dev
artmontinski Jul 27, 2024
5fe71a0
archive abandoned code
artmontinski Aug 1, 2024
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
26 changes: 0 additions & 26 deletions .github/workflows/PULL_REQUEST_TEMPLATE.md

This file was deleted.

7 changes: 4 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/**
3 changes: 3 additions & 0 deletions .vscodeignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,6 @@ vsc-extension-quickstart.md
**/*.map
**/*.ts
**/.vscode-test.*
Summary_Library/**
ludwigReports/**
devTestFiles/**
38 changes: 33 additions & 5 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
118 changes: 96 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Binary file added assets/CommPaletteOptions.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/CompliancePercentage.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/Normalized&Adjusted.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/SeymourOptionsMenu.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/progressionChart.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/showChartSpeed.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading