Skip to content

feat: improve keyboard navigation on chart creation screen #1293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HardeepAsrani merged 1 commit into from
Mar 26, 2026
+115 −10
Merged

feat: improve keyboard navigation on chart creation screen #1293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions classes/Visualizer/Render/Layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 8 additions & 1 deletion css/frame.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -1780,4 +1787,4 @@ canvas.chartjs-render-monitor {
.pro-upsell .pro-upsell-overlay .pro-upsell-action .button{
width: 100%;
text-align: center;
}
}
98 changes: 98 additions & 0 deletions js/frame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
}

function onReady() {
initAccessibility();
initTabs();

// open the correct source tab/sub-tab.
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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 () {
Expand Down Expand Up @@ -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.
*
Expand Down
Loading