👌 IMPROVE: a11y example with Styled Components

Author: ahmadawais

examples/05-a11y-input/README.md

@@ -16,6 +16,8 @@ This example includes a WordPress Gutenberg plugin called `a11y-input` which cre
 
 - [Run `npx create-guten-block a11y-input` →](https://github.com/ahmadawais/create-guten-block#getting-started)
 - Write code in `a11y-input/src/block/block.js`.
+- OPTIONAL: Installed styled-components `npm i -D styled-components`
+
 
 _That's about it._
 >🌟 Star for updates or to appreciate [create-guten-block →](https://github.com/ahmadawais/create-guten-block)
@@ -100,9 +102,9 @@ There are a number of tools we can use to assist in the creation of accessible w
 By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
 
 1. Plugging out your mouse.
-1. Using `Tab` and `Shift+Tab` to browse.
-1. Using `Enter` to activate elements.
-1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
+2. Using `Tab` and `Shift+Tab` to browse.
+3. Using `Enter` to activate elements.
+4. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
 
 ### Development assistance
 

examples/05-a11y-input/dist/blocks.build.js

@@ -6,14 +6,22 @@
  */
 
 //  Import CSS.
+import styled from 'styled-components';
 import './editor.scss';
 import './style.scss';
 
 const { __ } = wp.i18n; // Import __() from wp.i18n
 const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
 
 const labelText = 'NAME (Accessible Text Input)';
-const inputValue = 'Ahmad Awais (Accessible Input Value)';
+
+const Input = styled.input`
+	display: table;
+	width: 50%;
+	border: 1px solid !important;
+	box-shadow: 0.1rem 0.1rem 0 !important;
+	padding: 1rem !important;
+`;
 
 /**
  * Register: aa Gutenberg Block.
@@ -46,7 +54,9 @@ registerBlockType( 'cgb/block-a11y-input', {
 	 */
 	edit: function() {
 		// Creates a <p class='wp-block-cgb-block-a11y-input'></p>.
-		return <input type="text" aria-label={ labelText } aria-required="true" value={ inputValue } name="name" />;
+		return (
+			<Input type="text" placeholder="Enter something…" aria-label={ labelText } aria-required="true" name="name" />
+		);
 	},
 
 	/**
@@ -60,6 +70,8 @@ registerBlockType( 'cgb/block-a11y-input', {
 	 */
 	save: function() {
 		// Creates a <p class='wp-block-cgb-block-a11y-input'></p>.
-		return <input type="text" aria-label={ labelText } aria-required="true" value={ inputValue } name="name" />;
+		return (
+			<Input type="text" placeholder="Enter something…" aria-label={ labelText } aria-required="true" name="name" />
+		);
 	},
 } );