Version 0.2.0 - Reable font button. Closes #1.

mateuswetah · Oct 4, 2022 · a1c62e3 · a1c62e3
1 parent 9a0b78a
commit a1c62e3
Show file tree

Hide file tree

Showing 17 changed files with 85 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ The buttons available are:
 
 -   **Skip-to-content button** - Add a link to any anchored part of your website. You can create and set as many as you want;
 -   **Contrast mode toggle** - Enable a stylesheet with extremely high contrast;
+-   **Readable font toggle** - Forces usage of the [Atkinson Hyperlegible Font](https://brailleinstitute.org/freefont "Braille Institute page about the Atkinson font") for better readability;
 -   **Increase/decrease/restore font-size** - Change your website's root font size. Check the F.A.Q. section about its usage.
 
 All of the buttons have the following features:
@@ -89,3 +90,7 @@ The plugin keeps track of font-size and contrast toggle state preferences across
 ### Can I have accesskey on each button?
 
 Originally, we planned to have a simple feature to add `accesskey` to each button. After reading [this](https://webaim.org/techniques/keyboard/accesskey#spec "WebAIM article about accesskey"), we gave up.
+
+### Can I invert the color of an image in High Contrast mode? =
+
+Yes! If you have an image like a monochromatic logo that would make sense to be inverted, add the class `a11y-invert-on-contrast-mode` to it so it can be inverted.
diff --git a/a11y-buttons.php b/a11y-buttons.php
@@ -4,7 +4,7 @@
  * Description:       A basic list of buttons that may be used to improve your website accessibility.
  * Requires at least: 6.0
  * Requires PHP:      7.0
- * Version:           0.1.2
+ * Version:           0.2.0
  * Author:            wetah
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html

diff --git a/blocks/a11y-button/block.json b/blocks/a11y-button/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "a11y-buttons/a11y-button",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"title": "A11Y Button",
 	"category": "widgets",
 	"icon": "universal-access-alt",

diff --git a/blocks/a11y-button/edit.js b/blocks/a11y-button/edit.js
@@ -33,7 +33,7 @@ import {
 	decreaseFontSizeIcon,
 	resetFontSizeIcon,
 	skipToContentIcon,
-	toggleReadableFontIcon
+	toggleReadableFontIcon,
 } from './icons';
 import './editor.scss';
 

diff --git a/blocks/a11y-button/icons.js b/blocks/a11y-button/icons.js
@@ -80,8 +80,7 @@ export const toggleReadableFontIcon = (
 		width="1.25em"
 		viewBox="0 0 24 24"
 	>
-		<Path
-    		d="m 5,3.2109373 v 2.8007813 h 5.599609 V 20.789063 h 2.800782 V 6.0117186 H 19 V 3.2109373 Z" />
+		<Path d="m 5,3.2109373 v 2.8007813 h 5.599609 V 20.789063 h 2.800782 V 6.0117186 H 19 V 3.2109373 Z" />
 	</SVG>
 );
 
@@ -91,5 +90,5 @@ export default {
 	resetFontSizeIcon,
 	toggleHighContrastIcon,
 	skipToContentIcon,
-	toggleReadableFontIcon
+	toggleReadableFontIcon,
 };
diff --git a/blocks/a11y-button/variations.js b/blocks/a11y-button/variations.js
@@ -100,5 +100,5 @@ export default [
 			'a11y-buttons'
 		),
 		isActive: [ 'action' ],
-	}
+	},
 ];
diff --git a/blocks/a11y-buttons/block.json b/blocks/a11y-buttons/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "a11y-buttons/a11y-buttons",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"title": "A11Y Buttons",
 	"category": "widgets",
 	"keywords": [

diff --git a/build/a11y-button/block.json b/build/a11y-button/block.json
@@ -2,7 +2,7 @@
   "$schema": "https://schemas.wp.org/trunk/block.json",
   "apiVersion": 2,
   "name": "a11y-buttons/a11y-button",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "title": "A11Y Button",
   "category": "widgets",
   "icon": "universal-access-alt",

diff --git a/build/a11y-buttons/block.json b/build/a11y-buttons/block.json
@@ -2,7 +2,7 @@
   "$schema": "https://schemas.wp.org/trunk/block.json",
   "apiVersion": 2,
   "name": "a11y-buttons/a11y-buttons",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "title": "A11Y Buttons",
   "category": "widgets",
   "keywords": [

diff --git a/build/frontend/high-contrast.asset.php b/build/frontend/high-contrast.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '84d7054822093e96858b');
+<?php return array('dependencies' => array(), 'version' => 'b0fa5ef0fd3ef751212b');
diff --git a/build/frontend/high-contrast.css b/build/frontend/high-contrast.css
diff --git a/frontend/frontend.js b/frontend/frontend.js
@@ -83,7 +83,7 @@ function toggleHighContrast() {
  * Adds a class to the root html element to load a
  * more readable font family.
  */
- function toggleReadableFont() {
+function toggleReadableFont() {
 	loadFile( 'frontend/readable-font.css', 'css' );
 
 	const htmlElement = document.getElementsByTagName( 'html' )[ 0 ];

diff --git a/frontend/high-contrast.scss b/frontend/high-contrast.scss
@@ -17,14 +17,18 @@
 	a.has-link-color {
 		color: rgb(0, 225, 255) !important;
 
-		&:hover {
-			color: rgb(251, 255, 0) !important;
+		> * {
+			color: inherit !important;
 		}
 
 		&:active {
 			color: rgb(21, 255, 0) !important;
 		}
 
+		&:hover {
+			color: rgb(251, 255, 0) !important;
+		}
+
 		&:visited {
 			color: rgb(225, 0, 255) !important;
 		}
@@ -50,4 +54,10 @@
 		}
 	}
 
+	figure.a11y-invert-on-contrast-mode > img,
+	img.a11y-invert-on-contrast-mode {
+		-webkit-filter: invert(100%) !important;
+		filter: invert(100%) !important;
+	}
+
 }
diff --git a/frontend/readable-font.scss b/frontend/readable-font.scss
@@ -4,45 +4,49 @@
  * when the readable font mode is active
  */
 @font-face {
-	font-family: 'Atksinson Hyperlegible';
-	src: url('../assets/readable-font/EOT/Atkinson-Hyperlegible-Regular-102.eot'); /* IE9 Compat Modes */
-	src: url('../assets/readable-font/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'), /* Super Modern Browsers */
-		 url('../assets/readable-font/WOFF/Atkinson-Hyperlegible-Regular-102.woff') format('woff'), /* Pretty Modern Browsers */
-		 url('../assets/readable-font/TTF/Atkinson-Hyperlegible-Regular-102.ttf')  format('truetype'); /* Safari, Android, iOS */
-	font-weight: normal;
-    font-style: normal;
+	font-family: "Atksinson Hyperlegible";
+	src: url(../assets/readable-font/EOT/Atkinson-Hyperlegible-Regular-102.eot); /* IE9 Compat Modes */
+	src:
+		url(../assets/readable-font/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2) format("woff2"), /* Super Modern Browsers */
+		url(../assets/readable-font/WOFF/Atkinson-Hyperlegible-Regular-102.woff) format("woff"), /* Pretty Modern Browsers */
+		url(../assets/readable-font/TTF/Atkinson-Hyperlegible-Regular-102.ttf)  format("truetype"); /* Safari, Android, iOS */
+	font-weight: 400;
+	font-style: normal;
 }
 
 @font-face {
-	font-family: 'Atksinson Hyperlegible';
-	src: url('../assets/readable-font/EOT/Atkinson-Hyperlegible-Bold-102.eot'); /* IE9 Compat Modes */
-	src: url('../assets/readable-font/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'), /* Super Modern Browsers */
-		 url('../assets/readable-font/WOFF/Atkinson-Hyperlegible-Bold-102.woff') format('woff'), /* Pretty Modern Browsers */
-		 url('../assets/readable-font/TTF/Atkinson-Hyperlegible-Bold-102.ttf')  format('truetype'); /* Safari, Android, iOS */
-	font-weight: bold;
-    font-style: normal;
+	font-family: "Atksinson Hyperlegible";
+	src: url(../assets/readable-font/EOT/Atkinson-Hyperlegible-Bold-102.eot); /* IE9 Compat Modes */
+	src:
+		url(../assets/readable-font/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2) format("woff2"), /* Super Modern Browsers */
+		url(../assets/readable-font/WOFF/Atkinson-Hyperlegible-Bold-102.woff) format("woff"), /* Pretty Modern Browsers */
+		url(../assets/readable-font/TTF/Atkinson-Hyperlegible-Bold-102.ttf)  format("truetype"); /* Safari, Android, iOS */
+	font-weight: 700;
+	font-style: normal;
 }
 
 @font-face {
-	font-family: 'Atksinson Hyperlegible';
-	src: url('../assets/readable-font/EOT/Atkinson-Hyperlegible-Italic-102.eot'); /* IE9 Compat Modes */
-	src: url('../assets/readable-font/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'), /* Super Modern Browsers */
-		 url('../assets/readable-font/WOFF/Atkinson-Hyperlegible-Italic-102.woff') format('woff'), /* Pretty Modern Browsers */
-		 url('../assets/readable-font/TTF/Atkinson-Hyperlegible-Italic-102.ttf')  format('truetype'); /* Safari, Android, iOS */
-	font-weight: normal;
-    font-style: italic;
+	font-family: "Atksinson Hyperlegible";
+	src: url(../assets/readable-font/EOT/Atkinson-Hyperlegible-Italic-102.eot); /* IE9 Compat Modes */
+	src:
+		url(../assets/readable-font/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2) format("woff2"), /* Super Modern Browsers */
+		url(../assets/readable-font/WOFF/Atkinson-Hyperlegible-Italic-102.woff) format("woff"), /* Pretty Modern Browsers */
+		url(../assets/readable-font/TTF/Atkinson-Hyperlegible-Italic-102.ttf)  format("truetype"); /* Safari, Android, iOS */
+	font-weight: 400;
+	font-style: italic;
 }
 
 @font-face {
-	font-family: 'Atksinson Hyperlegible';
-	src: url('../assets/readable-font/EOT/Atkinson-Hyperlegible-BoldItalic-102.eot'); /* IE9 Compat Modes */
-	src: url('../assets/readable-font/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2'), /* Super Modern Browsers */
-		 url('../assets/readable-font/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff') format('woff'), /* Pretty Modern Browsers */
-		 url('../assets/readable-font/TTF/Atkinson-Hyperlegible-BoldItalic-102.ttf')  format('truetype'); /* Safari, Android, iOS */
-	font-weight: bold;
-    font-style: italic;
+	font-family: "Atksinson Hyperlegible";
+	src: url(../assets/readable-font/EOT/Atkinson-Hyperlegible-BoldItalic-102.eot); /* IE9 Compat Modes */
+	src:
+		url(../assets/readable-font/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2) format("woff2"), /* Super Modern Browsers */
+		url(../assets/readable-font/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff) format("woff"), /* Pretty Modern Browsers */
+		url(../assets/readable-font/TTF/Atkinson-Hyperlegible-BoldItalic-102.ttf)  format("truetype"); /* Safari, Android, iOS */
+	font-weight: 700;
+	font-style: italic;
 }
 
 .a11y-buttons-readable-font-mode *:not([aria-hidden="true"]) {
-	font-family: 'Atksinson Hyperlegible', Arial, Helvetica, sans-serif !important;
+	font-family: "Atksinson Hyperlegible", Arial, Helvetica, sans-serif !important;
 }
diff --git a/package.json b/package.json
@@ -1,11 +1,10 @@
 {
 	"name": "a11y-buttons",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"description": "A basic list of buttons that may be used to improve your website accessibility.",
 	"author": "mateuswetah",
 	"license": "GPL-3.0-or-later",
 	"main": "build/index.js",
-	"files": [ "build/a11y-button", "build/a11y-buttons", "build/frontend", "assets" ],
 	"scripts": {
 		"build": "wp-scripts build --webpack-src-dir=blocks --webpack-copy-php",
 		"format": "wp-scripts format",

diff --git a/readme.txt b/readme.txt
@@ -3,7 +3,7 @@ Author:            wetah, The WordPress Contributors
 Tags:              block, a11y, accessibility
 Tested up to:      6.0
 Requires at least: 6.0
-Stable tag:        0.1.2
+Stable tag:        0.2.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 
@@ -17,6 +17,7 @@ The buttons available are:
 
 * Skip-to-content button - Add a link to any anchored part of your website. You can create and set as many as you want;
 * Contrast mode toggle - Enable a stylesheet with extremely high contrast;
+* Readable font toggle - Forces usage of the [Atkinson Hyperlegible Font](https://brailleinstitute.org/freefont "Braille Institute page about the Atkinson font") for better readability;
 * Increase/decrease/restore font-size - Change your website's root font size. Check the F.A.Q. section about its usage.
 
 All of the buttons have the following features:
@@ -69,6 +70,10 @@ The plugin keeps track of font-size and contrast toggle state preferences across
 
 Originally, we planned to have a simple feature to add `accesskey` to each button. After reading [this](https://webaim.org/techniques/keyboard/accesskey#spec "WebAIM article about accesskey"), we gave up.
 
+= Can I invert the color of an image in High Contrast mode? =
+
+Yes! If you have an image like a monochromatic logo that would make sense to be inverted, add the class `a11y-invert-on-contrast-mode` to it so it can be inverted.
+
 == Screenshots ==
 
 1. The A11Y Buttons parent block, which accepts different buttons inside it with layout settings and icon display options.
@@ -80,6 +85,10 @@ Originally, we planned to have a simple feature to add `accesskey` to each butto
 
 == Changelog ==
 
+= 0.2.0 =
+* Adds "Readable font" button with [Atkinson Hyperlegible Font](https://brailleinstitute.org/freefont "Braille Institute page about the Atkinson font"); 
+* Adds class `a11y-invert-on-contrast-mode` to images and figures that you wish to be have color inverted on contrast mode.
+
 = 0.1.2 =
 * Fixes contrast mode css path;
 * Proper cursor when hovering buttons; 
@@ -91,3 +100,14 @@ Originally, we planned to have a simple feature to add `accesskey` to each butto
 = 0.1.0 =
 * Initial - quite experimental - release, featuring contrast toggle, font size tweak and skip to link buttons.
 
+== Copyright ==
+
+A11y Buttons plugin, Copyright 2022 wetah
+A11y Buttons plugin is distributed under the terms of the GNU GPLv3
+License details: https://github.com/mateuswetah/A11Y-Buttons/blob/main/LICENSE
+
+A11y Buttons plugin bundles the following third-party resource:
+
+Atkinson Hyperlegible Font Copyright 2020 Braille Institute
+License details: http://brailleinstitute.org/wp-content/uploads/2020/11/Atkinson-Hyperlegible-Font-License-2020-1104.pdf
+Source: https://brailleinstitute.org/freefont
diff --git a/webpack.config.js b/webpack.config.js
@@ -28,7 +28,7 @@ config.entry = {
 		process.cwd(),
 		'frontend',
 		'readable-font.scss'
-	)
+	),
 };
 
 module.exports = config;
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,5 +100,5 @@ export default [ @@
     			'a11y-buttons'
     		),
     		isActive: [ 'action' ],
-    	}
+    	},
     ];
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array(), 'version' => '84d7054822093e96858b');
		<?php return array('dependencies' => array(), 'version' => 'b0fa5ef0fd3ef751212b');