Skip to content

Commit

Permalink
Error and warning messages on void elements (#81)
Browse files Browse the repository at this point in the history
* Refactored @extend use of content placeholders

* Refactored @extend use of content placeholders

* Split content & vector messages into separate files

* Refactored vector messages

* Refactored old void placeholders

* Refactor

* Fix tests for now

* Update

* Fix broken tabindex="-1" checks

* Ignored linting
  • Loading branch information
jackdomleo7 authored Nov 17, 2020
1 parent 07c0bdd commit 7fe9322
Show file tree
Hide file tree
Showing 29 changed files with 722 additions and 268 deletions.
22 changes: 17 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
![Checka11y.css logo](logo/checkally1.png)
<div align="center">

<a href="https://www.buymeacoffee.com/jackdomleo7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-orange.png" alt="Buy Me A Coffee" style="height: 50px !important;width: 190px !important;" height="50" width="190" ></a>
![Checka11y.css logo](logo/checka11y1.png)

<a href="https://www.producthunt.com/posts/checka11y-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-checka11y-css" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=269866&theme=light" alt="Checka11y.css - A CSS stylesheet to quickly highlight a11y concerns. | Product Hunt" style="width: 200px; height: auto;"/></a>
<a href="https://www.buymeacoffee.com/jackdomleo7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-orange.png" alt="Buy Me A Coffee" style="height: 50px !important;width: 190px !important;" height="50" width="190" ></a>

![Maintenance](https://img.shields.io/maintenance/yes/2020) [![MIT License](https://img.shields.io/badge/License-MIT-important)](https://github.com/jackdomleo7/Checka11y.css/blob/master/LICENSE) [![Brotli size](https://badgen.net/badgesize/brotli/jackdomleo7/Checka11y.css/master/checka11y.css)](https://github.com/jackdomleo7/Checka11y.css/blob/master/checka11y.css)
<a href="https://www.producthunt.com/posts/checka11y-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-checka11y-css" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=269866&theme=light" alt="Checka11y.css - A CSS stylesheet to quickly highlight a11y concerns. | Product Hunt" style="width: 200px; height: auto;"/></a>

[![GitHub stars](https://img.shields.io/github/stars/jackdomleo7/Checka11y.css?style=social)](https://github.com/jackdomleo7/Checka11y.css/stargazers) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/jackdomleo7/Checka11y.css?style=social)](https://github.com/jackdomleo7/Checka11y.css/releases) [![npm](https://img.shields.io/npm/dt/checka11y-css?logo=npm&style=social)](https://www.npmjs.com/package/checka11y-css) ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/checka11y-css?label=JsDelivr&logo=jsdelivr&style=social)
![Maintenance](https://img.shields.io/maintenance/yes/2020) [![MIT License](https://img.shields.io/badge/License-MIT-important)](https://github.com/jackdomleo7/Checka11y.css/blob/master/LICENSE) [![Brotli size](https://badgen.net/badgesize/brotli/jackdomleo7/Checka11y.css/master/checka11y.css)](https://github.com/jackdomleo7/Checka11y.css/blob/master/checka11y.css)

[![GitHub stars](https://img.shields.io/github/stars/jackdomleo7/Checka11y.css?style=social)](https://github.com/jackdomleo7/Checka11y.css/stargazers) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/jackdomleo7/Checka11y.css?style=social)](https://github.com/jackdomleo7/Checka11y.css/releases) [![npm](https://img.shields.io/npm/dt/checka11y-css?logo=npm&style=social)](https://www.npmjs.com/package/checka11y-css) ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/checka11y-css?label=JsDelivr&logo=jsdelivr&style=social)

</div>

---

Expand Down Expand Up @@ -147,3 +151,11 @@ Checka11y.css is licensed under MIT. As a minimum, you are required to KEEP AND
6. To add error/warning styles and messages to your features, `@extend` one of the placeholders and `@include contentMessage()` from `src/_base.scss`.
7. Add tests to your features in Cypress (at `a11y_spec.js`)
8. Run tests: `npm run cypress:open` or `npm run cypress:run` (headless)

---

<div align="center">

[GitHub](https://github.com/jackdomleo7/Checka11y.css "View the GitHub repo and maybe give us a star") &bull; [npm](https://www.npmjs.com/package/checka11y-css "View Checka11y.css on npmjs.com") &bull; [yarn](https://yarnpkg.com/package/checka11y-css "View Checka11y.css on yarnpkg.com") &bull; [docs](https://checka11y.jackdomleo.dev "Read the official documentation") &bull; [CHANGELOG](https://github.com/jackdomleo7/Checka11y.css/releases "Read all the releases") &bull; [License](https://github.com/jackdomleo7/Checka11y.css#license "MIT License")

</div>
503 changes: 463 additions & 40 deletions checka11y.css

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions cypress/integration/a11y_spec.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
describe('CheckA11y.css Tests', () => {
describe('Checka11y.css Tests', () => {
// this is how Cypress reads the CSS. It will need to be changed if colors change!
const ERROR_BOXSHADOW = 'rgb(255, 0, 0) 0px 0px 0px 4px';
const WARNING_BOXSHADOW = 'rgb(255, 255, 102) 0px 0px 0px 4px';
Expand All @@ -22,11 +22,11 @@ describe('CheckA11y.css Tests', () => {
})

describe("[autoplay]", () => {
it('should show outline on elements with autoplay', () => {
it('should show warning outline on elements with autoplay', () => {
cy.get("[autoplay]")
.each(element => {
cy.get(element)
.should('have.css', 'box-shadow', ERROR_BOXSHADOW)
.should('have.css', 'border-color', 'rgb(255, 255, 102)')
});
});
});
Expand All @@ -45,7 +45,7 @@ describe('CheckA11y.css Tests', () => {
cy.get(`button ${el}`)
.each(element => {
cy.get(element)
.should('have.css', 'box-shadow', ERROR_BOXSHADOW)
.should('have.css', 'border-color', 'rgb(255, 0, 0)')
});
});

Expand All @@ -55,7 +55,7 @@ describe('CheckA11y.css Tests', () => {
if (element) {
cy.get(element)
.after('content')
.should('eq', `ERROR: Ensure that <${el}> is not a child of <button> as it is an invalid HTML.`);
.should('eq', `ERROR: Ensure that <${el}> is not a child of <button>.`);
}
});
});
Expand Down
File renamed without changes
File renamed without changes
68 changes: 42 additions & 26 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
],
"devDependencies": {
"autoprefixer": "^9.8.6",
"cypress": "^5.5.0",
"cypress": "^5.6.0",
"node-sass": "^5.0.0",
"postcss-cli": "^8.2.0",
"stylelint": "^13.7.2",
Expand Down
110 changes: 0 additions & 110 deletions src/_base.scss

This file was deleted.

36 changes: 36 additions & 0 deletions src/_helpers.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* -- Replace list value at index --
*
* PARAMS
* - list: the list to edit
* - index: the position of the item you want to replace where the first item is indexed at 1
* - value: the new value you want to replace the value position at $index with
*/
@function replace-nth($list, $index, $value) {
$result: null;

@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `replace-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `replace-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `replace-nth`.";
}
@else {
$result: (); // stylelint-disable-line scss/no-duplicate-dollar-variables
$index: if($index < 0, length($list) + $index + 1, $index);

@for $i from 1 through length($list) {
@if $i == $index {
$result: append($result, $value); // stylelint-disable-line scss/no-duplicate-dollar-variables
}
@else {
$result: append($result, nth($list, $i)); // stylelint-disable-line scss/no-duplicate-dollar-variables
}
}
}

@return $result;
}
4 changes: 4 additions & 0 deletions src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@ $border-error: #f00;
$text-warning: #856404;
$bg-warning: #ffffd8;
$border-warning: #ff6;

$font-family: verdana, geneva, tahoma, sans-serif;
$font-size: 1.2rem;
$font-weight: 700;
4 changes: 3 additions & 1 deletion src/checka11y.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
/*! Checka11y.css v1.1.0 | MIT License | github.com/jackdomleo7/Checka11y.css */

@import "./customisation";
@import "./base";
@import "./helpers";
@import "./messages/content";
@import "./messages/vector";
/* --- */
@import "./features/accesskey";
@import "./features/autoplay";
Expand Down
1 change: 0 additions & 1 deletion src/features/_accesskey.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,5 @@
* Accesskey attribute could interfere and conflict with screen readers and assistive technologies
*/
[accesskey]::after {
@extend %contentWarning;
@include contentMessage(warning, "accesskey attribute could interfere and conflict with screen readers and assistive technologies.");
}
2 changes: 1 addition & 1 deletion src/features/_autoplay.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Media should not autoplay */

[autoplay] {
@extend %voidError;
@include vectorMessage(warning, 350, "Media should", "not autoplay.");
}
Loading

0 comments on commit 7fe9322

Please sign in to comment.