feat: accessibility fixes; description field; allow classes on tabs

CloudCatch · Apr 27, 2022 · 147b589 · 147b589
1 parent 07c22e6
commit 147b589
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 42 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,4 @@ node_modules/
 
 # Build files
 dist
+build
diff --git a/src/tab/block.json b/src/tab/block.json
@@ -17,6 +17,14 @@
 		"label": {
 			"type": "string",
 			"default": "Title"
+		},
+		"showDescription": {
+			"type": "boolean",
+			"default": false
+		},
+		"description": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"usesContext": [

diff --git a/src/tab/edit.js b/src/tab/edit.js
@@ -4,25 +4,30 @@
 import classnames from 'classnames';
 
 import { __ } from '@wordpress/i18n';
-import { PanelBody, TextControl } from '@wordpress/components';
+import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
 import { useInnerBlocksProps, useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import './editor.scss';
 
 export default function Edit({ attributes, setAttributes, className, clientId, context }) {
 	const {
 		index,
-		label
+		label,
+		showDescription,
 	} = attributes;
 
 	const blockProps = useBlockProps( {
-		tabId: index,
+		tabid: index,
 		style: {
 			'display': clientId === context['cloudcatch/tabs/activeTab'] ? 'block' : 'none'
 		}
 	} );
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-
+	const innerBlocksProps = useInnerBlocksProps( {
+		tabid: index,
+		className: 'wp-block-cloudcatch-tab',
+		style: {
+			'display': clientId === context['cloudcatch/tabs/activeTab'] ? 'block' : 'none'
+		}
 	} );
 
 	return (
@@ -34,11 +39,14 @@ export default function Edit({ attributes, setAttributes, className, clientId, c
 						value={ label }
 						onChange={ ( value ) => setAttributes( { label: value } ) }
 					/>
+					<ToggleControl
+						label={ __( 'Show description' ) }
+						checked={ showDescription }
+						onChange={ () => setAttributes( { showDescription: ! showDescription } ) }
+					/>
 				</PanelBody>
 			</InspectorControls>
-			<div {...blockProps}>
-				<div { ...innerBlocksProps } />
-			</div>
+			<div { ...innerBlocksProps } />
 		</>
 	);
 }
diff --git a/src/tab/save.js b/src/tab/save.js
@@ -1,14 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { index } = attributes;
 
+	const innerBlocksProps = useInnerBlocksProps.save( {
+		tabid: index,
+		className: 'wp-block-cloudcatch-tab'
+	} );
+
 	return (
-		<div { ...useBlockProps.save( { tabId: index } ) }>
-			<InnerBlocks.Content />
-		</div>
+		<div { ...innerBlocksProps } />
 	);
 }
diff --git a/src/tabs/edit.js b/src/tabs/edit.js
@@ -80,27 +80,42 @@ function Edit({ attributes, setAttributes, className, innerBlocks, clientId, upd
 					<div className="wp-block-cloudcatch-tabs__tabs" role="tablist" aria-orientation={ orientation }>
 						{
 							tabs.map((innerBlock, key) => {
+								console.log( innerBlock?.attributes?.className );
 
 								return (
-									<RichText
-										aria-label={__('Title')}
-										placeholder={__('Add text…')}
-										value={innerBlock.label ?? __('Title')}
-										onChange={(value) => {
-											updateBlockAttributes( innerBlock.clientId, {
-												label: value,
-											} );
-										}}
-										key={ key }
-										role="tab"
-										// aria-controls={ uuid + '-tab' }
-										tabid={ key }
-										tabIndex="0"
-										withoutInteractiveFormatting
-										identifier="label"
-										className={ classnames( 'wp-block-cloudcatch-tab__label', { 'active': activeTab === innerBlock.clientId } ) }
-										unstableOnFocus={ (e) => changeTab( innerBlock.clientId ) }
-									/>
+									<div key={key}>
+										<RichText
+											aria-label={__('Title')}
+											placeholder={__('Add text…')}
+											value={innerBlock.attributes.label ?? __('Title')}
+											onChange={(value) => {
+												updateBlockAttributes( innerBlock.clientId, {
+													label: value,
+												} );
+											}}
+											role="tab"
+											tabid={ key }
+											tabIndex="0"
+											withoutInteractiveFormatting
+											identifier="label"
+											className={ classnames( 'wp-block-cloudcatch-tab__label', innerBlock?.attributes?.className, { 'active': activeTab === innerBlock.clientId } ) }
+											unstableOnFocus={ (e) => changeTab( innerBlock.clientId ) }
+										/>
+										{ innerBlock?.attributes?.showDescription && (
+											<RichText
+												aria-label={__('Description')}
+												placeholder={__('Add text…')}
+												value={innerBlock.attributes.description}
+												onChange={(value) => {
+													updateBlockAttributes( innerBlock.clientId, {
+														description: value,
+													} );
+												}}
+												identifier="div"
+												className="wp-block-cloudcatch-tab__description"
+											/>
+										) }
+									</div>
 								);
 							})
 						}
@@ -148,7 +163,7 @@ export default compose(
 						index: n,
 					} );
 
-					tabs.push( { "clientId": block.innerBlocks[ n ].clientId, "label": block.innerBlocks[ n ].attributes.label } );
+					tabs.push( { "clientId": block.innerBlocks[ n ].clientId, "attributes": block.innerBlocks[ n ].attributes } );
 				} );
 
 				updateBlockAttributes( clientId, {

diff --git a/src/tabs/save.js b/src/tabs/save.js
@@ -33,15 +33,24 @@ export default function save( { attributes } ) {
 				<div className="wp-block-cloudcatch-tabs__tabs" role="tablist" aria-orientation={ orientation }>
 					{
 						tabs.map((innerBlock, key) => 
-							<RichText.Content
-								value={innerBlock.label ?? __('Title')}
-								tagName="label"
-								tabIndex="0"
-								role="tab"
-								key={ key } 
-								tabid={ key }
-								className={ classnames( 'wp-block-cloudcatch-tab__label', { 'active': key === defaultTab } ) }
-							/>
+							<div key={key}>
+								<RichText.Content
+									value={innerBlock.attributes.label ?? __('Title')}
+									tagName="label"
+									tabIndex="0"
+									role="tab"
+									key={ key } 
+									tabid={ key }
+									className={ classnames( 'wp-block-cloudcatch-tab__label', innerBlock?.attributes?.className, { 'active': key === defaultTab } ) }
+								/>
+								{ innerBlock?.attributes?.showDescription && (
+									<RichText.Content
+										value={innerBlock.attributes.description ?? __('Description')}
+										tagName="div"
+										className="wp-block-cloudcatch-tab__description"
+									/>
+								) }
+							</div>
 						)
 					}
 				</div>

diff --git a/src/tabs/view.js b/src/tabs/view.js
@@ -40,6 +40,17 @@
                     setActiveTab(tabLabel.getAttribute('tabid'));
                 });
 
+                tabLabel.addEventListener('keydown', (e) => {
+                    var key = e.keyCode;
+
+                    switch (key) {
+                        case keys.up:
+                        case keys.down:
+                            determineOrientation(e);
+                            break;
+                    }
+                });
+
                 tabLabel.addEventListener('keyup', (e) => {
                     var key = e.keyCode;
 
@@ -58,7 +69,7 @@
                 tab.style.display = 'none';
             });
 
-            tabLabelsContainer.querySelectorAll(':scope > *').forEach(label => {
+            tabLabels.forEach(label => {
                 label.classList.remove('active');
                 label.setAttribute( 'aria-selected', 'false' );
             });
@@ -100,6 +111,8 @@
                 tabLabels[x].addEventListener('focus', focusEventHandler);
             }
 
+            console.log( direction[pressed] );
+
             if (direction[pressed]) {
                 var desiredIndex = activeIndex + direction[pressed];
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,3 +31,4 @@ node_modules/

		# Build files
		dist
		build