resolves #135

BoldGrid · Oct 22, 2024 · ff82375 · ff82375
1 parent 760e126
commit ff82375
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/src/assets/scss/customizer/controls/_sections.scss b/src/assets/scss/customizer/controls/_sections.scss
@@ -6,8 +6,27 @@
 	}
 }
 
+
 // Base Styles.
 #customize-controls {
+	.accordion-section-title {
+		&::before {
+			line-height: 40px;
+		}
+		button.accordion-trigger {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 2;
+			width: calc( 100% - 40px );
+			padding: 0 0 0 35px;
+			&:hover, &:focus, &:active {
+				background: transparent;
+			}
+		}
+	}
 	.control-section-bgtfw_section.open > li.control-section-bgtfw_section {
 		margin-left: -12px;
 		margin-right: -12px;

diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-panel.php b/src/includes/customizer/class-boldgrid-framework-customizer-panel.php
@@ -224,13 +224,14 @@ protected function content_template() {
 		protected function render_template() {
 			?>
 			<li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
-				<h3 class="accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
-					{{ data.title }}
-					<span class="screen-reader-text"><?php esc_html_e( 'Press return or enter to open this panel', 'crio' ); ?></span>
+			<h3 class="accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
+					<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
+						{{ data.title }}
+					</button>
 				</h3>
-				<ul class="accordion-sub-container control-panel-content"></ul>
+				<ul class="accordion-sub-container control-panel-content" id="{{ data.id }}-content"></ul>
 			</li>
-			<?php
+		<?php
 		}
 	}
 }
diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-section.php b/src/includes/customizer/class-boldgrid-framework-customizer-section.php
@@ -154,14 +154,20 @@ protected function render_template() {
 			?>
 			<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
 				<h3 class="accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
-					{{ data.title }}
-					<span class="screen-reader-text"><?php esc_html_e( 'Press return or enter to open this section', 'crio' ); ?></span>
+					<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
+						{{ data.title }}
+					</button>
 				</h3>
-				<ul class="accordion-section-content">
+				<ul class="accordion-section-content" id="{{ data.id }}-content">
 					<li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
 						<div class="customize-section-title">
 							<button class="customize-section-back" tabindex="-1">
-								<span class="screen-reader-text"><?php esc_html_e( 'Back', 'crio' ); ?></span>
+								<span class="screen-reader-text">
+									<?php
+									/* translators: Hidden accessibility text. */
+									_e( 'Back', 'crio' );
+									?>
+								</span>
 							</button>
 							<h3>
 								<span class="customize-action">
@@ -170,15 +176,20 @@ protected function render_template() {
 								<div class="bgtfw-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>">{{ data.title }}</div>
 							</h3>
 							<# if ( data.description && data.description_hidden ) { #>
-								<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Help', 'crio' ); ?></span></button>
+								<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text">
+									<?php
+									/* translators: Hidden accessibility text. */
+									_e( 'Help', 'crio' );
+									?>
+								</span></button>
 								<div class="description customize-section-description">
 									{{{ data.description }}}
 								</div>
 							<# } #>
-
+	
 							<div class="customize-control-notifications-container"></div>
 						</div>
-
+	
 						<# if ( data.description && ! data.description_hidden ) { #>
 							<div class="description customize-section-description">
 								{{{ data.description }}}