Fix (accessibility): accessibility of blocks (#3593)

* fix accessibility

- carousel
- horizontal scroller
- notification
- posts
- progress bar
- progress circle

* update version

* fix save and deprecated

* remove props

* fix props

* updated save.js

* fix block validation error for progress circle

* pass props

Author: kaeizen

src/block/carousel/deprecated.js

@@ -7,6 +7,19 @@ import { Save } from './save'
 import { attributes } from './schema'
 
 import { withVersion } from '~stackable/higher-order'
+import { addFilter } from '@wordpress/hooks'
+import { semverCompare } from '~stackable/util'
+
+addFilter( 'stackable.carousel.save.slider-props', 'stackable/3.19.0', ( sliderProps, props ) => {
+	if ( semverCompare( props.version, '<', '3.19.0' ) ) {
+		return {
+			...sliderProps,
+			tabIndex: undefined,
+		}
+	}
+
+	return sliderProps
+} )
 
 const deprecated = [
 	{

src/block/carousel/save.js

@@ -81,6 +81,8 @@ export const Save = props => {
 							role="list"
 							data-autoplay={ attributes.autoplay ? ( attributes.autoplaySpeed || '4000' ) : undefined }
 							data-label-slide-of={ attributes.ariaLabelPrev || 'Slide %%d of %%d' }
+							tabIndex={ 0 }
+							{ ...applyFilters( 'stackable.carousel.save.slider-props', {}, props ) }
 						>
 							<InnerBlocks.Content />
 						</div>

src/block/horizontal-scroller/deprecated.js

@@ -8,6 +8,18 @@ import {
 } from '~stackable/block-components'
 import { addFilter } from '@wordpress/hooks'
 import compareVersions from 'compare-versions'
+import { semverCompare } from '~stackable/util'
+
+addFilter( 'stackable.horizontal-scroller.save.scroller-props', 'stackable/3.19.0', ( scrollerProps, props ) => {
+	if ( semverCompare( props.version, '<', '3.19.0' ) ) {
+		return {
+			...scrollerProps,
+			tabIndex: undefined,
+		}
+	}
+
+	return scrollerProps
+} )
 
 // Previously, our horizontal scroller always had the stk--fit-content class (which was wrong).
 addFilter( 'stackable.horizontal-scroller.save.contentClassNames', 'stackable/3_8_0', ( classes, props ) => {

src/block/horizontal-scroller/save.js

@@ -54,7 +54,11 @@ export const Save = props => {
 		 >
 			 { attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			 <CustomCSS.Content attributes={ attributes } />
-			<div className={ contentClassNames }>
+			<div
+				className={ contentClassNames }
+				tabIndex={ 0 }
+				{ ...applyFilters( 'stackable.horizontal-scroller.save.scroller-props', {}, props ) }
+			>
 				<InnerBlocks.Content />
 			</div>
 		 </BlockDiv.Content>

src/block/notification/deprecated.js

@@ -14,12 +14,26 @@ import {
 	deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateBlockHeight,
 	deprecateInnerBlockRowGapAndContainerHeight,
 } from '~stackable/block-components'
+import { semverCompare } from '~stackable/util'
 
 /**
  * WordPress dependencies
  */
+
+import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 
+addFilter( 'stackable.notification.save.close-button-props', 'stackable/3.19.0', ( buttonProps, props ) => {
+	if ( semverCompare( props.version, '<', '3.19.0' ) ) {
+		return {
+			...buttonProps,
+			'aria-label': undefined,
+		}
+	}
+
+	return buttonProps
+} )
+
 // Version 3.8 added horizontal flex, this changes the stk--block-orientation-* to stk--block-horizontal-flex.
 addFilter( 'stackable.notification.save.innerClassNames', 'stackable/3.8.0', ( output, props ) => {
 	if ( compareVersions( props.version, '3.8.0' ) >= 0 ) {

src/block/notification/save.js

@@ -6,7 +6,7 @@ import SVGCloseIcon from './images/close-icon.svg'
 /**
  * External dependencies
  */
-import { version as VERSION } from 'stackable'
+import { version as VERSION, i18n } from 'stackable'
 import { withVersion } from '~stackable/higher-order'
 import classnames from 'classnames/dedupe'
 import {
@@ -22,6 +22,7 @@ import {
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
 import { applyFilters } from '@wordpress/hooks'
@@ -78,6 +79,8 @@ export const Save = props => {
 				{ attributes.isDismissible &&
 					<button
 						className="stk-block-notification__close-button"
+						aria-label={ __( 'Close', i18n ) }
+						{ ...applyFilters( 'stackable.notification.save.close-button-props', {}, props ) }
 					>
 						<SVGCloseIcon
 							width={ attributes.dismissibleSize || 16 }

src/block/posts/deprecated.js

@@ -22,6 +22,7 @@ import {
 import { createHigherOrderComponent } from '@wordpress/compose'
 import { addFilter } from '@wordpress/hooks'
 import { select } from '@wordpress/data'
+import { semverCompare } from '~stackable/util'
 
 // Version 3.0.2 Deprecations
 const addUndefinedAttributes = ( attributes, version ) => {
@@ -36,10 +37,35 @@ const determineFeatureImage = ( featuredImage, version ) => {
 	return ( compareVersions( '3.6.3', version ) === -1 ) ? featuredImage : <Image.Content />
 }
 
+const fixMetaAccessibility = ( output, metaProps, version ) => {
+	const {
+		authorShow,
+		dateShow,
+		commentsShow,
+		author,
+		date,
+		comments,
+		separator,
+		metaClassNames,
+	} = metaProps
+	if ( semverCompare( version, '<', '3.19.0' ) ) {
+		return ( authorShow || dateShow || commentsShow ) && <aside className={ metaClassNames }>
+			{ authorShow && author }
+			{ authorShow && author && ( ( dateShow && date ) || ( commentsShow && comments ) ) && separator }
+			{ dateShow && date }
+			{ ( ( authorShow && author ) || ( dateShow && date ) ) && commentsShow && comments && separator }
+			{ commentsShow && comments }
+		</aside>
+	}
+
+	return output
+}
+
 addFilter( 'stackable.posts.title.typography-content', 'stackable/3_0_2', addUndefinedAttributes )
 addFilter( 'stackable.posts.title.category-content', 'stackable/3_0_2', addUndefinedAttributes )
 addFilter( 'stackable.posts.title.readmore-content', 'stackable/3_0_2', addUndefinedAttributes )
 addFilter( 'stackable.posts.feature-image', 'stackable/3_6_3', determineFeatureImage )
+addFilter( 'stackable.posts.meta', 'stackable/3.19.0', fixMetaAccessibility )
 
 const deprecated = [
 	{

src/block/posts/util.js

@@ -225,13 +225,13 @@ export const generateRenderPostItem = ( attributes, { isHovered } ) => {
 		)
 
 		const meta = ( authorShow || dateShow || commentsShow ) && (
-			<aside className={ metaClassNames }>
+			<div className={ metaClassNames }>
 				{ authorShow && author }
 				{ authorShow && author && ( ( dateShow && date ) || ( commentsShow && comments ) ) && separator }
 				{ dateShow && date }
 				{ ( ( authorShow && author ) || ( dateShow && date ) ) && commentsShow && comments && separator }
 				{ commentsShow && comments }
-			</aside>
+			</div>
 		)
 
 		const contentFactory = {
@@ -382,15 +382,25 @@ generateRenderPostItem.save = ( attributes, version = VERSION ) => {
 		/>
 	)
 
-	const meta = ( authorShow || dateShow || commentsShow ) && (
-		<aside className={ metaClassNames }>
+	let meta = ( authorShow || dateShow || commentsShow ) && (
+		<div className={ metaClassNames }>
 			{ authorShow && author }
 			{ authorShow && author && ( ( dateShow && date ) || ( commentsShow && comments ) ) && separator }
 			{ dateShow && date }
 			{ ( ( authorShow && author ) || ( dateShow && date ) ) && commentsShow && comments && separator }
 			{ commentsShow && comments }
-		</aside>
+		</div>
 	)
+	meta = applyFilters( 'stackable.posts.meta', meta, {
+		authorShow,
+		dateShow,
+		commentsShow,
+		author,
+		date,
+		comments,
+		separator,
+		metaClassNames,
+	}, version )
 
 	const contentFactory = {
 		'featured-image': imageShow && featuredImage,

src/block/progress-bar/deprecated.js

@@ -7,6 +7,22 @@ import {
 	deprecateTypographyShadowColor, deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateTypographyFontSize,
 	deprecateBlockHeight,
 } from '~stackable/block-components'
+import { semverCompare } from '~stackable/util'
+
+import { addFilter } from '@wordpress/hooks'
+
+const addAriaLabel = ( divProps, props ) => {
+	if ( semverCompare( props.version, '<', '3.19.0' ) ) {
+		return {
+			...divProps,
+			'aria-label': undefined,
+		}
+	}
+
+	return divProps
+}
+
+addFilter( 'stackable.progress-bar.div-props', 'stackable/3.19.0', addAriaLabel )
 
 const deprecated = [
 	{

src/block/progress-bar/save.js

@@ -14,6 +14,7 @@ import classnames from 'classnames'
 import striptags from 'striptags'
 
 import { compose } from '@wordpress/compose'
+import { applyFilters } from '@wordpress/hooks'
 
 export const Save = props => {
 	const { className, attributes } = props
@@ -75,6 +76,8 @@ export const Save = props => {
 					aria-valuemax="100"
 					aria-valuenow={ progressValue }
 					aria-valuetext={ derivedAriaValue ? striptags( derivedAriaValue ) : undefined }
+					aria-label={ derivedAriaValue ? striptags( derivedAriaValue ) : undefined }
+					{ ...applyFilters( 'stackable.progress-bar.div-props', {}, props ) }
 				>
 					<div className={ barClassNames }>
 						{ attributes.showText && (