melsumner / a11y-automation Goto Github PK

Open-source project. Tracking the available automation for accessibility. What a11y failures can be linted & tested for in an automated fashion?

Home Page: https://a11y-automation.dev

JavaScript 55.13% HTML 3.56% Handlebars 36.97% CSS 4.34%

a11y ember hacktoberfest

a11y-automation's Introduction

Hi there 👋

📩 Need to get ahold of me? Discord is probably the fastest (iykyk), or DM on Mastadon!
🔭 I created ember-a11y-refocus so Ember.js would have a solid accessible routing solution, and led other efforts to make the framework more accessible by default and become the most accessible JavaScript framework.
🌱 I’m am the author of Continuous Accessibility and like to talk/write/think about the future of accessibility.
😎 I created and continue to improve the Accessibility Automation Tracker.
⚡ Fun fact: I served in the U.S. Navy for six years as a Cryptologic Technician (Interpretive). I am a decorated, disabled military veteran (5 medals, 2 commendations).
🦚 Find out more about me by visiting melanie.codes.

a11y-automation's People

Contributors

Stargazers

Watchers

a11y-automation's Issues

improve styles: extract variables

further improve the styles by abstracting the colors and fonts into variables.

feature: add dashboard with summary data

it would be useful to see summary data presented in a visual way.

Resolve grid css issue on smaller viewports

Right now, viewing this site on a mobile devices demonstrates some issues with the grid CSS as written.

Resolve this issue by fixing the CSS so viewing the site on a mobile device is pleasant. Ensure that other viewports do not regress.

Write a test for manual testing status

Manual testing status should only have these values:

exists
shouldexist
mustexist

add a unit test to check the values. anything outside these values should fail.

Improvement: tidy up DOM

In order to launch the project quickly, I used Tailwind CSS and UI (I have a license). However, the drawback of this is that the DOM is very cluttered.

It would be good to remove as many of the extra <div> elements as possible and stick with semantic HTML. This will take some work to improve sections of code, but it can be done incrementally.

add blueprint to generate new criteria files

Similar to the blueprint generator in tech-survey, implement a blueprint generator to create a new criteria.md file.

add list of items to `details` template

render the list of items in the details template.

items should link to their dynamic segment.

Add primary WCAG criteria to table on details page

It would be useful to have the primary WCAG criteria on the data table on the details page, that way potential violations could be filtered/sorted on that column.

Add Common Failures 41-60 as tags

Add the Common Failures as tags so that they can be used in the app.

The command ember generate tags failure-1 will generate a failure-1.md file in the tags folder. To this .md file, add the following:

the human readable name to the title (Failure 1)
the URL to the failure (in this instance, https://www.w3.org/WAI/WCAG21/Techniques/failures/F1)
finally, add the url page title as the description ("Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS")

For an example of what this looks like, see any of the existing wcag*.md files in the tags folder.

update templates so .md file contents render properly

right now, the markdown content is being rendered as printed code/markup instead of rendering the elements and content appropriately.

example:

fix this, so it renders the elements with the content.

re-style data table

the data table available on the /details (details/index template file) could have its appearance improved.

PRs welcome but there is no guarantee of merge- may be more useful to put a mockup in this thread first, to see if it might resolve the issue, before submitting a PR.

update app's tags configuration to prep for filters

In order to prep for search/filter/dashboards, the tags attribute needs to be updated in order to work properly.

https://github.com/empress/broccoli-static-site-json#relationships

feature: add a blueprint generator for tags

in the same way that details has a blueprint generator, add one for tags.

update README to include the generator.

update font combination

update the font combination.

Requirements:

easy to read
complementary to one another

bonus points for variable fonts that are implemented correctly.

Add Common Failures 61-80 as tags

Add the Common Failures as tags so that they can be used in the app.

The command ember generate tags failure-1 will generate a failure-1.md file in the tags folder. To this .md file, add the following:

the human readable name to the title (Failure 1)
the URL to the failure (in this instance, https://www.w3.org/WAI/WCAG21/Techniques/failures/F1)
finally, add the url page title as the description ("Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS")

For an example of what this looks like, see any of the existing wcag*.md files in the tags folder.

Add `.active` style

Add styling for .active class as it applies to the sidebar (

element).

Cleanup Tailwind Config

Clean up Tailwind config file to only include what's needed.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Improve badge accessibility

The color contrast for the badges are still not sufficient. Any ideas?

feature: add search

Add the ability to search the data and return results

Add Common Failures 81-108 as tags

Add the Common Failures as tags so that they can be used in the app.

The command ember generate tags failure-1 will generate a failure-1.md file in the tags folder. To this .md file, add the following:

the human readable name to the title (Failure 1)
the URL to the failure (in this instance, https://www.w3.org/WAI/WCAG21/Techniques/failures/F1)
finally, add the url page title as the description ("Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS")

For an example of what this looks like, see any of the existing wcag*.md files in the tags folder.

Switch to tailwind ui for component styling

Issue to track switching the app to use tailwind ui for components/styling.

Add sorting to data table

For easier consumption of the information provided in the data table in the violations/index template, the ability for the user to sort the automation status columns should be added.

See https://adrianroselli.com/2021/04/sortable-table-columns.html for advice on implementing accessible sorting for data tables.

TailwindCSS should be used for consistency across the app.

tidy up .scss file

tidy up the app.scss file so that it uses imports and separates concerns logically.

Add a new status shouldexist to the detail model to help differentiate in cases where manual testing should exist even if automated linting and testing already exist (since there are sometimes ways to get around both).

Add linting rule data from other available linters to existing violation data

Add linting data from Deque's new axe accessibility linter extension.

Information should be added to existing violation files first, if possible.

Common

Markdown(MD)

heading-order

Vue

React

deploy site

once there are some styles #11 and there are a respectable number of details #10 , deploy site to Netlify.

Tracking Issue: Add potential violations

Generate a new details template with ember generate violations rule-name where rule-name is the new item to be added
Fill out the front matter information and add info in the content area as appropriate
submit one PR per item on this checklist
tip: existing .md files in the violations folder can be used to see what we're looking for, but the generate command should pre-fill in a lot of things for you.

Add Dark Mode support

Add support for dark mode.

feature: add sorting to potential failures list

The "potential failures" list in the sidebar should be sorted alphabetically.

Add impact severity to each violation

To help prioritize rules to be written or issues to be fixed, each existing detail needs a severity level added.

Severity should be based on impact to the user:

blocker (no workaround, would cause loss of service or loss of critical functionality)
critical (functionality is still available but is severely limited; no acceptable workaround is available)
major (reasonable workaround available; no user-generated data would be lost)
minor (degradation of non-critical functionality; workaround may be available)

To complete:

add severity to the attributes list in lib/content-generator/index.js
add severity to the front-matter list in blueprints/violations/files/details__name__.md
add severity to each existing violations file with the correct severity indicated
add a severity indicator in the templates/violations/violation file, and any supporting CSS necessary.

Consider adding info about testing frameworks

Add information about testing frameworks and the a11y they support

But think about how often this information would need to be reviewed for accuracy and plan for that.

Manual Testing: provide _how_

After becoming aware of https://thisiswcag.com/ - I wonder if there's a way to incorporate both sites?

At the least, consider adding a manual testing list enhancement. Also I think that there are various basic checklists around for manual testing, and since this site tracks what should be tested manually, that information would be useful to have.

Fix data models to avoid async request leaks

Fix this (the way the data is pulled in isn't quite correct)

WARNING: Async Request leaks detected. Add a breakpoint here and set `store.generateStackTracesForTrackedRequests = true;`to inspect traces for leak origins:
         - DS: Handle Adapter#findAll of model:detail
         - DS: Handle Adapter#findRecord of 'detail' with id: 'alt-color-diffs'
         - DS: Handle Adapter#findRecord of 'tag' with id: 'wcag-1-1-1'
         - DS: Handle Adapter#findRecord of 'tag' with id: 'wcag-1-4-1'

update `criteria` to regular singular/plural & remove initializer

the app initializer was added to avoid re-naming everything, but the criterion/criteria (or a different name entirely with an easier singular/plural should be added.

once that is finished the initializer can be removed.

Add Common Failures 1-10 as tags

Add the Common Failures as tags so that they can be used in the app.

The command ember generate tags failure-1 will generate a failure-1.md file in the tags folder. To this .md file, add the following:

the human readable name to the title (Failure 1)
the URL to the failure (in this instance, https://www.w3.org/WAI/WCAG21/Techniques/failures/F1)
finally, add the url page title as the description ("Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS")

For an example of what this looks like, see any of the existing wcag*.md files in the tags folder.

improve styles for status labels

the status labels in their current shape are dreadfully unpleasing to look at. Please implement new styles that make them nicer for our eyes to behold.

Add Common Failures 21-40 as tags

Add the Common Failures as tags so that they can be used in the app.

The command ember generate tags failure-1 will generate a failure-1.md file in the tags folder. To this .md file, add the following:

the human readable name to the title (Failure 1)
the URL to the failure (in this instance, https://www.w3.org/WAI/WCAG21/Techniques/failures/F1)
finally, add the url page title as the description ("Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS")

For an example of what this looks like, see any of the existing wcag*.md files in the tags folder.

add serializer to remove deprecation warning

Right now, there is no serializer in the app- it's depending on the adapter.defaultSerializer property which has been deprecated.

Add a serializer to the app so the deprecation warning is removed.
https://deprecations.emberjs.com/ember-data/v3.x/#toc_ember-data:default-serializers

Resolve issues caused by #270

@mansona I have cleaned up most of the test failure issues, here are the remaining ones introduced in #270 (I think, sorry if that's incorrect)

improve status labels

The status labels could probably use a better solution (than what is currently in the detail.hbs template) to determine what class to add to the template.

These attributes: linting, testing, author, manual all have one of the following values:

exists
couldexist
cannotexist
mustexist

Based on the value, the label then receives a css class:

.status-exists
.status-couldexist
.status-cannotexist
.status-mustexist

The helper should also render the text correctly- couldexist should render as "could exist".

Issue: CSS classes that are needed are getting purged

The status badges should all have background colors and text colors, such as:

But none of these classes are resolving in production- the classes are getting purged from the CSS, even though they exist on the elements, resulting in this:

Here's the template code:

<span
      class="status status-{{cellitem.linting}}">
      {{cellitem.lintingText}}
</span>

And here's and example of the CSS:

.status-exists {
  @apply bg-green-100 text-green-800;
}

To do:
Figure out why and fix it.

Add Common Failures 11-20 as tags

Add the Common Failures as tags so that they can be used in the app.

The command ember generate tags failure-1 will generate a failure-1.md file in the tags folder. To this .md file, add the following:

the human readable name to the title (Failure 1)
the URL to the failure (in this instance, https://www.w3.org/WAI/WCAG21/Techniques/failures/F1)
finally, add the url page title as the description ("Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS")

For an example of what this looks like, see any of the existing wcag*.md files in the tags folder.

Add all automated a11y tool listing

Add a section or page that lists all of the currently available linters and testers, with links to each. Include IDE and browser extensions.

AccessLint
axe tools
ember-a11y-test
Microsoft Accessibility Insights
lighthouse?

Ensure unused CSS isn't included in prod build

Make sure the Tailwind CSS is shaking out what it doesn't need.

(I'm not sure how to do this yet, I haven't looked it up, PRs welcome)

Add data filters for tags

Add filters based on the tags to the violations/index template, so that the content can be filtered appropriately.

The filters should be a dropdown menu that automatically includes all of the filters.
The filter should be above the table element
The tags listed in the dropdown should be alpha-sorted
the filter/dropdown menu component should itself pass accessibility criteria
tailwindcss (https://tailwindcss.com/docs) should be used for styling

See https://github.com/dequelabs/combobo (https://dequelabs.github.io/combobo/demo/) for a good example of an accessible combobox for filters. Note the "submit" button.

Add favicon

A favicon is needed.

Turn the little "A" icon (in the navbar) into a favicon.
put the favicon into /public/assets/images
add it to index.html

feature: active item in list should stay in view

The active item in the sidebar should always stay in the viewport when the sidebar is visible (larger viewports)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4

actions/setup-node v4

actions/checkout v4

actions/setup-node v4

npm

lib/content-generator/package.json

package.json

autoprefixer 10.4.17

broccoli-static-site-json 4.5.0

ember-a11y-refocus 3.0.2

ember-cli-netlify 0.4.1

@ember/optional-features 2.0.0

@fullhuman/postcss-purgecss 5.0.0

@glimmer/component 1.1.2

@glimmer/tracking 1.1.2

@tailwindcss/forms 0.5.7

@tailwindcss/typography 0.5.10

babel-eslint 10.1.0

broccoli-asset-rev 3.0.0

ember-auto-import 1.12.2

ember-cli 4.1.1

ember-cli-app-version 6.0.1

ember-cli-babel 7.26.11

ember-cli-dependency-checker 3.3.2

ember-cli-fastboot 4.1.2

ember-cli-htmlbars 6.3.0

ember-cli-inject-live-reload 2.1.0

ember-cli-postcss 8.2.0

ember-cli-sri 2.1.1

ember-cli-terser 4.0.2

ember-composable-helpers 5.0.0

ember-data 3.28.13

ember-export-application-global 2.0.1

ember-fetch 8.1.2

ember-get-config 2.1.1

ember-load-initializers 2.1.2

ember-maybe-import-regenerator 1.0.0

ember-qunit 4.6.0

ember-resolver 11.0.1

ember-source 3.28.12

ember-template-lint 3.16.0

ember-truth-helpers 3.1.1

eslint 7.32.0

eslint-plugin-ember 10.6.1

eslint-plugin-node 11.1.0

loader.js 4.7.0

npm-run-all2 5.0.0

postcss-import 14.1.0

prember 2.0.0

qunit-dom 2.0.0

tailwindcss 2.2.19

node 14.* || 16.* || >= 18

Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

melsumner / a11y-automation Goto Github PK

a11y-automation's Introduction

Hi there 👋

a11y-automation's People

Contributors

Stargazers

Watchers

Forkers

a11y-automation's Issues

Common

Markdown(MD)

Vue

React

Rate-Limited

Open

Ignored or Blocked

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org