Global Styles: add tooltips to the heading level selectors (#64039)

Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ndiego <[email protected]>
WordPress · Jul 29, 2024 · 27fbbd8 · 27fbbd8 · github-actions · Jul 29, 2024
1 parent 982b68c
commit 27fbbd8
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -67,30 +67,44 @@ function ScreenTypographyElement( { element } ) {
 					>
 						<ToggleGroupControlOption
 							value="heading"
+							showTooltip
+							aria-label={ __( 'All headings' ) }
 							label={ _x( 'All', 'heading levels' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h1"
+							showTooltip
+							aria-label={ __( 'Heading 1' ) }
 							label={ __( 'H1' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h2"
+							showTooltip
+							aria-label={ __( 'Heading 2' ) }
 							label={ __( 'H2' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h3"
+							showTooltip
+							aria-label={ __( 'Heading 3' ) }
 							label={ __( 'H3' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h4"
+							showTooltip
+							aria-label={ __( 'Heading 4' ) }
 							label={ __( 'H4' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h5"
+							showTooltip
+							aria-label={ __( 'Heading 5' ) }
 							label={ __( 'H5' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h6"
+							showTooltip
+							aria-label={ __( 'Heading 6' ) }
 							label={ __( 'H6' ) }
 						/>
 					</ToggleGroupControl>