From 0dbeea79003258a55edbc7f7f4a5569396d55451 Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Thu, 26 Mar 2026 13:08:41 +0530
Subject: [PATCH] feat: improve keyboard navigation on chart creation screen

---
 classes/Visualizer/Render/Layout.php | 18 ++---
 css/frame.css                        |  9 ++-
 js/frame.js                          | 98 ++++++++++++++++++++++++++++
 3 files changed, 115 insertions(+), 10 deletions(-)

diff --git a/classes/Visualizer/Render/Layout.php b/classes/Visualizer/Render/Layout.php
index 01c59ff0..adb59d1e 100644
--- a/classes/Visualizer/Render/Layout.php
+++ b/classes/Visualizer/Render/Layout.php
@@ -762,7 +762,7 @@ public static function _renderTabBasic( $args ) {
 						<ul class="viz-group-wrapper">
 							<!-- manual -->
 							<li class="viz-group visualizer_source_manual">
-								<h2 class="viz-group-title viz-sub-group visualizer-editor-tab" data-current="chart"><?php _e( 'Manual Data', 'visualizer' ); ?></h2>
+								<h2 class="viz-group-title viz-sub-group visualizer-editor-tab" data-current="chart" role="button" tabindex="0"><?php _e( 'Manual Data', 'visualizer' ); ?></h2>
 								<div class="viz-group-content edit-data-content">
 									<form id="editor-form" action="<?php echo $upload_link; ?>" method="post" target="thehole">
 										<input type="hidden" id="chart-data" name="chart_data">
@@ -807,7 +807,7 @@ public static function _renderTabBasic( $args ) {
 
 							<!-- import from file -->
 							<li class="viz-group visualizer_source_csv <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-file' ); ?> ">
-								<h2 class="viz-group-title viz-sub-group visualizer-src-tab"><?php _e( 'Import data from file', 'visualizer' ); ?><span class="dashicons dashicons-lock"></span></h2>
+								<h2 class="viz-group-title viz-sub-group visualizer-src-tab" role="button" tabindex="0"><?php _e( 'Import data from file', 'visualizer' ); ?><span class="dashicons dashicons-lock"></span></h2>
 								<div class="viz-group-content">
 									<div>
 										<p class="viz-group-description"><?php esc_html_e( 'Select and upload your data file here. Supported formats: CSV, XLSX. The first row should contain the column headings. The second row should contain the series type (string, number, boolean, date, datetime, timeofday).', 'visualizer' ); ?></p>
@@ -837,11 +837,11 @@ public static function _renderTabBasic( $args ) {
 							</li>
 							<!-- import from url -->
 							<li class="viz-group visualizer-import-url visualizer_source_csv_remote visualizer_source_json <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-url' ); ?> ">
-								<h2 class="viz-group-title viz-sub-group visualizer-src-tab"><?php _e( 'Import data from URL', 'visualizer' ); ?><span class="dashicons dashicons-lock"></span></h2>
+								<h2 class="viz-group-title viz-sub-group visualizer-src-tab" role="button" tabindex="0"><?php _e( 'Import data from URL', 'visualizer' ); ?><span class="dashicons dashicons-lock"></span></h2>
 								<ul class="viz-group-content">
 									<!-- import from csv url -->
 									<li class="viz-subsection">
-										<span class="viz-section-title"><?php _e( 'Import from CSV / XLSX', 'visualizer' ); ?></span>
+										<span class="viz-section-title" role="button" tabindex="0"><?php _e( 'Import from CSV / XLSX', 'visualizer' ); ?></span>
 										<div class="only-pro-anchor">	
 											<div class="viz-section-items section-items">
 												<p class="viz-group-description">
@@ -909,7 +909,7 @@ public static function _renderTabBasic( $args ) {
 									</li>
 									<!-- import from json url -->
 									<li class="viz-subsection">
-										<span class="viz-section-title visualizer_source_json"><?php _e( 'Import from JSON', 'visualizer' ); ?></span>
+										<span class="viz-section-title visualizer_source_json" role="button" tabindex="0"><?php _e( 'Import from JSON', 'visualizer' ); ?></span>
 										<div class="only-pro-anchor">	
 											<div class="viz-section-items section-items">
 												<p class="viz-group-description"><?php _e( 'You can choose here to import/synchronize your chart data with a remote JSON source. For more info check <a href="https://docs.themeisle.com/article/1052-how-to-generate-charts-from-json-data-rest-endpoints" target="_blank" >this</a> tutorial', 'visualizer' ); ?></p>
@@ -967,7 +967,7 @@ public static function _renderTabBasic( $args ) {
 							<!-- import from chart -->
 							<li class="viz-group viz-import-from-other <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature' ); ?>">
 								<h2 class="viz-group-title viz-sub-group"
-									data-current="chart"><?php _e( 'Import from other chart', 'visualizer' ); ?><span
+									data-current="chart" role="button" tabindex="0"><?php _e( 'Import from other chart', 'visualizer' ); ?><span
 											class="dashicons dashicons-lock"></span></h2>
 								<div class="viz-group-content edit-data-content">
 									<div>
@@ -1040,7 +1040,7 @@ class="dashicons dashicons-lock"></span></h2>
 							?>
 							<!-- import from WordPress -->
 							<li class="viz-group visualizer_source_query_wp <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wp' ) ); ?> ">
-								<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from WordPress', 'visualizer' ); ?><span
+								<h2 class="viz-group-title viz-sub-group" role="button" tabindex="0"><?php _e( 'Import from WordPress', 'visualizer' ); ?><span
 											class="dashicons dashicons-lock"></span></h2>
 								<div class="viz-group-content edit-data-content">
 									<div>
@@ -1128,7 +1128,7 @@ class="dashicons dashicons-lock"></span></h2>
 								);
 								?>
 							<li class="viz-group visualizer_woocommerce_source<?php echo 'visualizer_source_json_wc' === $source_of_chart ? ' open' : ''; ?> <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wc-report' ); ?> ">
-								<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from WooCommerce Reports', 'visualizer' ); ?><span class="dashicons dashicons-lock"></span></h2>
+								<h2 class="viz-group-title viz-sub-group" role="button" tabindex="0"><?php _e( 'Import from WooCommerce Reports', 'visualizer' ); ?><span class="dashicons dashicons-lock"></span></h2>
 								<div class="viz-group-content edit-data-content">
 									<div>
 										<p class="viz-group-description"><?php _e( 'You can choose here to import/synchronize your chart data with a WooCommerce report API. For more info check <a href="https://woocommerce.github.io/woocommerce-rest-api-docs/?shell#reports" target="_blank" >this</a> tutorial', 'visualizer' ); ?></p>
@@ -1199,7 +1199,7 @@ class="dashicons dashicons-lock"></span></h2>
 							?>
 							<!-- import from db -->
 							<li class="viz-group visualizer_source_query <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'db-query' ) ); ?>">
-							<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from database', 'visualizer' ); ?><span
+							<h2 class="viz-group-title viz-sub-group" role="button" tabindex="0"><?php _e( 'Import from database', 'visualizer' ); ?><span
 								class="dashicons dashicons-lock"></span></h2>
 							<div class="viz-group-content edit-data-content">
 							<div>
diff --git a/css/frame.css b/css/frame.css
index 8b8d9fcd..71edb095 100644
--- a/css/frame.css
+++ b/css/frame.css
@@ -570,6 +570,13 @@ div.viz-group-content .viz-group-description {
 	filter: grayscale(0);
 }
 
+.type-label:focus,
+.viz-group-title:focus,
+.viz-section-title:focus {
+	outline: 2px solid #2271b1;
+	outline-offset: 2px;
+}
+
 .type-box-area .type-label {
 	background-position: -8px -225px;
 }
@@ -1780,4 +1787,4 @@ canvas.chartjs-render-monitor {
 .pro-upsell .pro-upsell-overlay .pro-upsell-action .button{
 	width: 100%;
 	text-align: center;
-}
\ No newline at end of file
+}
diff --git a/js/frame.js b/js/frame.js
index 4d00a46a..e8596dca 100644
--- a/js/frame.js
+++ b/js/frame.js
@@ -36,6 +36,7 @@
     }
 
     function onReady() {
+        initAccessibility();
         initTabs();
 
         // open the correct source tab/sub-tab.
@@ -73,6 +74,7 @@
         $('.type-radio').change(function () {
             $('.type-label-selected').removeClass('type-label-selected');
             $(this).parent().addClass('type-label-selected');
+            updateTypeAriaChecked();
         });
 
         // collapse other open sections of this group
@@ -95,6 +97,7 @@
              * let's close the LHS window and show the chart that is hidden
              */
             $('body').trigger('visualizer:change:action');
+            updateGroupAriaState($(this));
         });
 
         // collapse other open subsections of this section
@@ -103,6 +106,7 @@
             grandparent.find('.viz-section-title.open').not(this).each(function () {
                 $(this).removeClass('open').siblings('.viz-section-items').hide();
             });
+            updateSectionAriaState($(this));
         });
 
         $('#view-remote-file').click(function () {
@@ -156,6 +160,100 @@
 
     }
 
+    function initAccessibility(){
+        // Chart type picker: treat tiles as radios with keyboard support.
+        var $typePicker = $('#type-picker');
+        if($typePicker.length){
+            $typePicker.attr('role', 'radiogroup');
+            $('.type-label').each(function(){
+                var $label = $(this);
+                var $input = $label.find('input[type="radio"]');
+                $label.attr('tabindex', '0').attr('role', 'radio');
+                if($input.length){
+                    $label.attr('aria-checked', $input.is(':checked') ? 'true' : 'false');
+                }else{
+                    $label.attr('aria-disabled', 'true');
+                }
+            });
+            $(document).on('keydown', '.type-label', function(e){
+                if(e.key === 'Enter' || e.key === ' '){
+                    e.preventDefault();
+                    var $label = $(this);
+                    var $input = $label.find('input[type="radio"]');
+                    if($input.length){
+                        $input.prop('checked', true).trigger('change');
+                    }
+                }
+            });
+        }
+
+        // Collapsible groups: add button roles + keyboard activation.
+        $('.viz-group-title').each(function(index){
+            var $title = $(this);
+            $title.attr('role', 'button').attr('tabindex', '0');
+            var $content = $title.siblings('.viz-group-content');
+            if($content.length){
+                if(!$content.attr('id')){
+                    $content.attr('id', 'viz-group-content-' + index);
+                }
+                $title.attr('aria-controls', $content.attr('id'));
+                updateGroupAriaState($title);
+            }
+        });
+        $(document).on('keydown', '.viz-group-title', function(e){
+            if(e.key === 'Enter' || e.key === ' '){
+                e.preventDefault();
+                $(this).trigger('click');
+            }
+        });
+
+        // Subsections in source panel.
+        $('.viz-section-title').each(function(index){
+            var $title = $(this);
+            $title.attr('role', 'button').attr('tabindex', '0');
+            var $items = $title.siblings('.viz-section-items');
+            if($items.length){
+                if(!$items.attr('id')){
+                    $items.attr('id', 'viz-section-items-' + index);
+                }
+                $title.attr('aria-controls', $items.attr('id'));
+                updateSectionAriaState($title);
+            }
+        });
+        $(document).on('keydown', '.viz-section-title', function(e){
+            if(e.key === 'Enter' || e.key === ' '){
+                e.preventDefault();
+                $(this).trigger('click');
+            }
+        });
+    }
+
+    function updateTypeAriaChecked(){
+        $('.type-label').each(function(){
+            var $label = $(this);
+            var $input = $label.find('input[type="radio"]');
+            if($input.length){
+                $label.attr('aria-checked', $input.is(':checked') ? 'true' : 'false');
+            }
+        });
+    }
+
+    function updateGroupAriaState($title){
+        if(!$title || $title.length === 0){
+            return;
+        }
+        var isOpen = $title.parent().hasClass('open');
+        $title.attr('aria-expanded', isOpen ? 'true' : 'false');
+    }
+
+    function updateSectionAriaState($title){
+        if(!$title || $title.length === 0){
+            return;
+        }
+        var isOpen = $title.hasClass('open');
+        $title.attr('aria-expanded', isOpen ? 'true' : 'false');
+    }
+
     /**
      * Initialize/Update the available chart list based on their supported renderer libraries.
      *