Content structure: Fix Semantics (#15474)

* use list markup * remove extra margin that was added with <ul> usage * remove <li> margin * use h2 for heading * add focusable wrapper with note role, add list role to <ul>
WordPress · May 14, 2019 · 8bc45fa · 8bc45fa
1 parent 8de2ba5
commit 8bc45fa
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 30 deletions.
diff --git a/packages/editor/src/components/table-of-contents/panel.js b/packages/editor/src/components/table-of-contents/panel.js
@@ -12,46 +12,57 @@ import DocumentOutline from '../document-outline';
 
 function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks, hasOutlineItemsDisabled, onRequestClose } ) {
 	return (
+		/*
+		* Disable reason: The `list` ARIA role is redundant but
+		* Safari+VoiceOver won't announce the list otherwise.
+		*/
+		/* eslint-disable jsx-a11y/no-redundant-roles */
 		<>
 			<div
-				className="table-of-contents__counts"
+				className="table-of-contents__wrapper"
 				role="note"
 				aria-label={ __( 'Document Statistics' ) }
 				tabIndex="0"
 			>
-				<div className="table-of-contents__count">
-					{ __( 'Words' ) }
-					<WordCount />
-				</div>
-				<div className="table-of-contents__count">
-					{ __( 'Headings' ) }
-					<span className="table-of-contents__number">
-						{ headingCount }
-					</span>
-				</div>
-				<div className="table-of-contents__count">
-					{ __( 'Paragraphs' ) }
-					<span className="table-of-contents__number">
-						{ paragraphCount }
-					</span>
-				</div>
-				<div className="table-of-contents__count">
-					{ __( 'Blocks' ) }
-					<span className="table-of-contents__number">
-						{ numberOfBlocks }
-					</span>
-				</div>
+				<ul
+					role="list"
+					className="table-of-contents__counts"
+				>
+					<li className="table-of-contents__count">
+						{ __( 'Words' ) }
+						<WordCount />
+					</li>
+					<li className="table-of-contents__count">
+						{ __( 'Headings' ) }
+						<span className="table-of-contents__number">
+							{ headingCount }
+						</span>
+					</li>
+					<li className="table-of-contents__count">
+						{ __( 'Paragraphs' ) }
+						<span className="table-of-contents__number">
+							{ paragraphCount }
+						</span>
+					</li>
+					<li className="table-of-contents__count">
+						{ __( 'Blocks' ) }
+						<span className="table-of-contents__number">
+							{ numberOfBlocks }
+						</span>
+					</li>
+				</ul>
 			</div>
 			{ headingCount > 0 && (
 				<>
 					<hr />
-					<span className="table-of-contents__title">
+					<h2 className="table-of-contents__title">
 						{ __( 'Document Outline' ) }
-					</span>
+					</h2>
 					<DocumentOutline onSelect={ onRequestClose } hasOutlineItemsDisabled={ hasOutlineItemsDisabled } />
 				</>
 			) }
 		</>
+		/* eslint-enable jsx-a11y/no-redundant-roles */
 	);
 }
 

diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss
@@ -17,14 +17,15 @@
 	}
 }
 
+.table-of-contents__wrapper:focus {
+	@include square-style__focus();
+	outline-offset: $grid-size;
+}
+
 .table-of-contents__counts {
 	display: flex;
 	flex-wrap: wrap;
-
-	&:focus {
-		@include square-style__focus();
-		outline-offset: $grid-size;
-	}
+	margin: 0;
 }
 
 .table-of-contents__count {
@@ -33,6 +34,7 @@
 	flex-direction: column;
 	font-size: $default-font-size;
 	color: $dark-gray-300;
+	margin-bottom: 0;
 }
 
 .table-of-contents__number,