Hide doc outline if there are no headings and use screen reader text.

WordPress · Sep 25, 2017 · 7c35f64 · 7c35f64
1 parent c739a20
commit 7c35f64
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/editor/document-outline/item.js b/editor/document-outline/item.js
@@ -26,7 +26,6 @@ const TableOfContentsItem = ( {
 		<button
 			className="document-outline__button"
 			onClick={ onClick }
-			title={ __( 'Click to focus this heading' ) }
 		>
 			<span className="document-outline__emdash" aria-hidden="true"></span>
 			<strong className="document-outline__level">
@@ -35,6 +34,7 @@ const TableOfContentsItem = ( {
 			<span className="document-outline__item-content">
 				{ children }
 			</span>
+			<span className="screen-reader-text">{ __( '(Click to focus this heading)' ) }</span>
 		</button>
 	</li>
 );

diff --git a/editor/table-of-contents/index.js b/editor/table-of-contents/index.js
@@ -60,9 +60,13 @@ class TableOfContents extends Component {
 							{ __( 'Headings' ) }
 						</div>
 					</div>
-					<hr />
-					<span className="table-of-contents__title">{ __( 'Table of Contents' ) }</span>
-					<DocumentOutline />
+					{ headings.length > 0 &&
+						<div>
+							<hr />
+							<span className="table-of-contents__title">{ __( 'Table of Contents' ) }</span>
+							<DocumentOutline />
+						</div>
+					}
 				</Popover>
 			</div>
 		);