Update horizontal slider and image to be more accessible. (#294)

WordPress · Oct 19, 2022 · 7186a8a · 7186a8a
1 parent 2e08cd1
commit 7186a8a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 25 deletions.
diff --git a/mu-plugins/blocks/horizontal-slider/postcss/style.pcss b/mu-plugins/blocks/horizontal-slider/postcss/style.pcss
@@ -78,6 +78,7 @@ button[disabled]::after {
 	gap: 12px;
 	padding-bottom: 24px;
 	padding-top: 6px;
+	list-style: none;
 
 	/* So item focus states are not clipped */
 	margin-left: -4px;

diff --git a/mu-plugins/blocks/horizontal-slider/src/block.js b/mu-plugins/blocks/horizontal-slider/src/block.js
@@ -97,9 +97,7 @@ function Block( { items, title } ) {
 	return (
 		<div>
 			<div className="horizontal-slider-header">
-				<span>
-					<h3 className="horizontal-slider-title">{ title }</h3>
-				</span>
+				<h3 className="horizontal-slider-title">{ title }</h3>
 				{ ( canNext || canPrevious ) && (
 					<span className="horizontal-slider-controls">
 						<Handle
@@ -115,19 +113,25 @@ function Block( { items, title } ) {
 					</span>
 				) }
 			</div>
-			<div className="horizontal-slider-wrapper" ref={ outerRef }>
+			<ul className="horizontal-slider-wrapper" ref={ outerRef } role="tablist">
 				{ items.map( ( item ) => (
-					<ScreenShot
-						key={ item.title }
-						{ ...item }
-						width={ `${ width }px` }
-						height={ `${ height }px` }
-						aspectRatio={ aspectRatio }
-						queryString={ `?vpw=${ initialWidth * 10 }&vph=${ initialHeight * 10 }` }
-						isReady={ true }
-					/>
+					<li key={ item.title } role="presentation">
+						<ScreenShot
+							{ ...item }
+							width={ `${ width }px` }
+							height={ `${ height }px` }
+							aspectRatio={ aspectRatio }
+							queryString={ `?vpw=${ initialWidth * 10 }&vph=${ initialHeight * 10 }` }
+							isReady={ true }
+							anchorTagProps={ {
+								'aria-controls': item.title,
+								'aria-selected': false,
+								role: 'tab',
+							} }
+						/>
+					</li>
 				) ) }
-			</div>
+			</ul>
 		</div>
 	);
 }

diff --git a/mu-plugins/blocks/screenshot-preview/src/block.js b/mu-plugins/blocks/screenshot-preview/src/block.js
@@ -13,13 +13,14 @@ import ScreenShot from './screenshot';
 /**
  *
  * @param {Object} props
- * @param {string} props.link        Url for anchor tag.
- * @param {string} props.previewLink Url used for the screenshot preview.
- * @param {string} props.caption     Text for screen readers.
- * @param {string} props.height      Initial height for the preview, include unit.
- * @param {string} props.width       Desired with of the preview element, include unit.
- * @param {number} props.aspectRatio Aspect ratio for the preview element.
- * @param {string} props.queryString Arguments passed to screenshot service.
+ * @param {string} props.link           Url for anchor tag.
+ * @param {string} props.previewLink    Url used for the screenshot preview.
+ * @param {string} props.caption        Text for screen readers.
+ * @param {string} props.height         Initial height for the preview, include unit.
+ * @param {string} props.width          Desired with of the preview element, include unit.
+ * @param {number} props.aspectRatio    Aspect ratio for the preview element.
+ * @param {string} props.queryString    Arguments passed to screenshot service.
+ * @param {Object} props.anchorTagProps HTMLAnchorElement attributes to be added to the block anchor tag.
  *
  * @return {Object} React element
  */
@@ -31,6 +32,7 @@ function Block( {
 	width = '100%',
 	aspectRatio = 2 / 3,
 	queryString = '?vpw=1200&vph=800',
+	anchorTagProps = {},
 } ) {
 	const wrapperRef = useRef();
 	const [ frameHeight, setFrameHeight ] = useState( height );
@@ -68,9 +70,9 @@ function Block( {
 				width: width,
 			} }
 			href={ link }
+			{ ...anchorTagProps }
 		>
-			{ caption && <span className="screen-reader-text">{ caption }</span> }
-			<ScreenShot queryString={ queryString } src={ previewLink } isReady={ shouldLoad } />
+			<ScreenShot queryString={ queryString } src={ previewLink } isReady={ shouldLoad } alt={ caption } />
 		</a>
 	);
 }

diff --git a/mu-plugins/blocks/screenshot-preview/src/screenshot.js b/mu-plugins/blocks/screenshot-preview/src/screenshot.js
@@ -42,13 +42,14 @@ function useInterval( callback, delay ) {
  * we need to do some custom handling.
  *
  * @param {Object}  props
+ * @param {string}  props.alt         Alternate text for image.
  * @param {string}  props.queryString Arguments that are passed to mShots.
  * @param {string}  props.src         The url of the screenshot.
  * @param {boolean} props.isReady     Whether we should start try to show the image.
  *
  * @return {Object} React component
  */
-function ScreenShotImg( { queryString, src, isReady = false } ) {
+function ScreenShotImg( { alt = '', queryString, src, isReady = false } ) {
 	const fullUrl = `https://s0.wp.com/mshots/v1/${ encodeURIComponent( src ) }${ queryString }`;
 
 	const [ attempts, setAttempts ] = useState( 0 );
@@ -112,7 +113,7 @@ function ScreenShotImg( { queryString, src, isReady = false } ) {
 		return <div className="wporg-screenshot wporg-screenshot__has-error">{ __( 'error', 'wporg' ) }</div>;
 	}
 
-	return <img src={ base64Img } alt="" />;
+	return <img src={ base64Img } alt={ alt } />;
 }
 
 export default ScreenShotImg;