Skip to content

[Simple Analytics] Accessibility #214

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

Open
alaca wants to merge 1 commit into
base: feature/simple-analytics
Choose a base branch
from
Open

[Simple Analytics] Accessibility #214

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
53 changes: 43 additions & 10 deletions assets/css/analytics.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,39 @@ body.mailchimp_page_mailchimp_sf_analytics {
background-color: #f6f7f7;
}

// -----------------------------------------------------------------------------
// Accessibility utilities
//
// `screen-reader-text` mirrors WP core's utility, visually hides content
// while keeping it readable by assistive tech. Defined locally so the
// styles still apply if WP core's stylesheet load order changes.
// -----------------------------------------------------------------------------
.screen-reader-text {
Copy link
Copy Markdown
Collaborator

@iamdharmesh iamdharmesh May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we scope this to make sure it only apply to screen reader text added by us?

Something like .mailchimp_page_mailchimp_sf_analytics .screen-reader-text

border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}

.mailchimp-sf-analytics-filter-group__label {
color: #1d2327;
font-size: 14px;
font-weight: 400;
}

// Consistent keyboard-only focus ring across every interactive control on the analytics page.
.mailchimp_page_mailchimp_sf_analytics .mailchimp-sf-button:focus-visible,
.mailchimp_page_mailchimp_sf_analytics button:focus-visible {
box-shadow: 0 0 0 2px var(--mailchimp-color-link, #017e89);
outline: none;
Comment on lines +45 to +48
}

// -----------------------------------------------------------------------------
// Filters toolbar
// -----------------------------------------------------------------------------
Expand Down Expand Up @@ -47,9 +80,9 @@ body.mailchimp_page_mailchimp_sf_analytics {
min-width: 180px;
padding: 0 8px;

&:focus {
&:focus-visible {
border-color: var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 2px var(--mailchimp-color-link, #017e89);
outline: none;
}
}
Expand Down Expand Up @@ -92,9 +125,9 @@ body.mailchimp_page_mailchimp_sf_analytics {
border-color: var(--mailchimp-color-link, #017e89);
}

&:focus {
&:focus-visible {
border-color: var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 2px var(--mailchimp-color-link, #017e89);
outline: none;
}

Expand Down Expand Up @@ -197,9 +230,9 @@ body.mailchimp_page_mailchimp_sf_analytics {
height: 36px;
width: 100%;

&:focus {
&:focus-visible {
border-color: var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 2px var(--mailchimp-color-link, #017e89);
outline: none;
}
}
Expand Down Expand Up @@ -378,8 +411,9 @@ body.mailchimp_page_mailchimp_sf_analytics {

&.is-loading &__metric-value,
&.is-error &__metric-value {
color: var(--mc-sa-grey);
opacity: 0.85;
// `#6b7280` (~4.83:1 on white) passes WCAG 1.4.3 for normal text.
// `--mc-sa-grey` × 0.85 opacity rendered as ~2.15:1 which fails AA.
color: #6b7280;
}

&__error-banner {
Expand Down Expand Up @@ -868,8 +902,7 @@ body.mailchimp_page_mailchimp_sf_analytics {
.mailchimp-sf-sa__net,
.mailchimp-sf-sa__legend-label,
.mailchimp-sf-sa__legend-value {
color: var(--mc-sa-grey);
opacity: 0.85;
color: #6b7280;
}

.mailchimp-sf-sa__legend-swatch {
Expand Down
184 changes: 180 additions & 4 deletions assets/js/analytics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@ import '../css/analytics.scss';
import { __ } from '@wordpress/i18n';

(function () {
/**
* `true` when the user has set the OS-level "Reduce motion" preference.
* Used to disable Chart.js animations
*/
const PREFERS_REDUCED_MOTION =
typeof window.matchMedia === 'function' &&
window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const dateRangeSelect = document.getElementById('mailchimp-sf-date-range');
const dateFrom = document.getElementById('mailchimp-sf-date-from');
const dateTo = document.getElementById('mailchimp-sf-date-to');
Expand Down Expand Up @@ -421,6 +429,25 @@ import { __ } from '@wordpress/i18n';
}
});

// Close popover on Escape and return focus to the trigger button
document.addEventListener('keydown', function (e) {
if (e.key !== 'Escape') {
return;
}
if (!popover || !popover.classList.contains('is-open')) {
return;
}

const openCalendar = document.querySelector('.datepicker.active');
if (openCalendar) {
return;
}
closePopover();
if (trigger) {
trigger.focus();
}
Comment on lines +445 to +448
});

/**
* Forms performance over time
*/
Expand All @@ -436,19 +463,24 @@ import { __ } from '@wordpress/i18n';
const errorBannerEl = document.getElementById('mailchimp-sf-fp-error-banner');
const errorMessageEl = document.getElementById('mailchimp-sf-fp-error-message');
const retryBtnEl = document.getElementById('mailchimp-sf-fp-error-retry');
const dataTableEl = document.getElementById('mailchimp-sf-fp-data-table');

const COLORS = {
// Chart palette. Values darkened from the original design tokens
// to meet WCAG 2.1 1.4.11
viewsFill: '#3B82F6',
viewsBorder: '#2563EB',
submissionsFill: '#2DD4BF',
submissionsBorder: '#14B8A6',
rateBorder: '#EAB308',
submissionsFill: '#0E9384',
submissionsBorder: '#0B7A6E',
rateBorder: '#A88008',
gridLine: 'rgba(0, 0, 0, 0.06)',
text: '#6B7280',
// Legend chip fills — translucent version of each bar color so the
// legend markers match the outlined-chip style from the Figma spec.
// Translucent fills for the legend chips. RGB sourced from the
// new WCAG-compliant submissions teal (#0E9384)
viewsLegendFill: 'rgba(59, 130, 246, 0.35)',
submissionsLegendFill: 'rgba(45, 212, 191, 0.35)',
submissionsLegendFill: 'rgba(14, 147, 132, 0.35)',
};

const STRINGS = {
Expand Down Expand Up @@ -489,6 +521,76 @@ import { __ } from '@wordpress/i18n';
}
}

/**
* Build the visually-hidden screen-reader data table for the chart.
*
* @param {Array} rows Bucket rows from the payload.
* @param {string} fromLabel Range start (Y-m-d).
* @param {string} toLabel Range end (Y-m-d).
*/
function renderDataTable(rows, fromLabel, toLabel) {
if (!dataTableEl) {
return;
}

const captionText = __(
'List performance over time: views, submissions, and conversion rate per bucket for %1$s to %2$s.',
'mailchimp',
)
.replace('%1$s', fromLabel)
.replace('%2$s', toLabel);

const headerCells = [
__('Period', 'mailchimp'),
__('Form Views', 'mailchimp'),
__('Submissions', 'mailchimp'),
__('Conversion Rate', 'mailchimp'),
];

const table = document.createElement('table');

const caption = document.createElement('caption');
caption.textContent = captionText;
table.appendChild(caption);

const thead = document.createElement('thead');
const headRow = document.createElement('tr');
headerCells.forEach(function (text) {
const th = document.createElement('th');
th.scope = 'col';
th.textContent = text;
headRow.appendChild(th);
});
thead.appendChild(headRow);
table.appendChild(thead);

const tbody = document.createElement('tbody');
rows.forEach(function (row) {
const tr = document.createElement('tr');

const rowHeader = document.createElement('th');
rowHeader.scope = 'row';
rowHeader.textContent = row.label || '';
tr.appendChild(rowHeader);

[
String(row.views || 0),
String(row.submissions || 0),
`${Number(row.conversion_rate || 0).toFixed(2)}%`,
].forEach(function (text) {
const td = document.createElement('td');
td.textContent = text;
tr.appendChild(td);
});

tbody.appendChild(tr);
});
table.appendChild(tbody);

dataTableEl.innerHTML = '';
dataTableEl.appendChild(table);
}

function destroyCharts() {
if (chart) {
chart.destroy();
Expand Down Expand Up @@ -624,6 +726,7 @@ import { __ } from '@wordpress/i18n';
options: {
responsive: true,
maintainAspectRatio: false,
animation: PREFERS_REDUCED_MOTION ? false : undefined,
interaction: { mode: 'index', intersect: false },
plugins: {
legend: {
Expand Down Expand Up @@ -724,6 +827,7 @@ import { __ } from '@wordpress/i18n';
setOverlay('');
setState('ready');
renderChart(rows);
renderDataTable(rows, fromLabel, toLabel);
}

/**
Expand Down Expand Up @@ -847,6 +951,7 @@ import { __ } from '@wordpress/i18n';
const errorBannerEl = document.getElementById('mailchimp-sf-sa-error-banner');
const errorMessageEl = document.getElementById('mailchimp-sf-sa-error-message');
const retryBtnEl = document.getElementById('mailchimp-sf-sa-error-retry');
const dataTableEl = document.getElementById('mailchimp-sf-sa-data-table');

const COLORS = {
newFill: '#2b72fb',
Expand Down Expand Up @@ -928,6 +1033,74 @@ import { __ } from '@wordpress/i18n';
}
}

/**
* Build the visually-hidden screen-reader data table for the
* subscriber activity chart
*
* @param {Array} rows Bucket rows from the payload.
* @param {string} fromLabel Range start (Y-m-d).
* @param {string} toLabel Range end (Y-m-d).
*/
function renderDataTable(rows, fromLabel, toLabel) {
if (!dataTableEl) {
return;
}

const captionText = __(
'Subscriber change over time: new subscribers and unsubscribes per bucket for %1$s to %2$s.',
'mailchimp',
)
.replace('%1$s', fromLabel)
.replace('%2$s', toLabel);

const headerCells = [
__('Period', 'mailchimp'),
__('New Subscribers', 'mailchimp'),
__('Unsubscribes', 'mailchimp'),
];

const table = document.createElement('table');

const caption = document.createElement('caption');
caption.textContent = captionText;
table.appendChild(caption);

const thead = document.createElement('thead');
const headRow = document.createElement('tr');
headerCells.forEach(function (text) {
const th = document.createElement('th');
th.scope = 'col';
th.textContent = text;
headRow.appendChild(th);
});
thead.appendChild(headRow);
table.appendChild(thead);

const tbody = document.createElement('tbody');
rows.forEach(function (row) {
const tr = document.createElement('tr');

const rowHeader = document.createElement('th');
rowHeader.scope = 'row';
rowHeader.textContent = row.label || '';
tr.appendChild(rowHeader);

[String(row.new_subscribers || 0), String(row.unsubscribes || 0)].forEach(
function (text) {
const td = document.createElement('td');
td.textContent = text;
tr.appendChild(td);
},
);

tbody.appendChild(tr);
});
table.appendChild(tbody);

dataTableEl.innerHTML = '';
dataTableEl.appendChild(table);
}

function destroyCharts() {
if (barChart) {
barChart.destroy();
Expand Down Expand Up @@ -1045,6 +1218,7 @@ import { __ } from '@wordpress/i18n';
options: {
responsive: true,
maintainAspectRatio: false,
animation: PREFERS_REDUCED_MOTION ? false : undefined,
interaction: { mode: 'index', intersect: false },
plugins: {
legend: {
Expand Down Expand Up @@ -1130,6 +1304,7 @@ import { __ } from '@wordpress/i18n';
options: {
responsive: true,
maintainAspectRatio: false,
animation: PREFERS_REDUCED_MOTION ? false : undefined,
plugins: {
legend: { display: false },
tooltip: { enabled: total > 0 },
Expand Down Expand Up @@ -1175,6 +1350,7 @@ import { __ } from '@wordpress/i18n';
renderBar(rows);
renderDonut(totalNew, totalUnsubs);
renderTotals(payload);
renderDataTable(rows, fromLabel, toLabel);
}

function fetchActivity(detail) {
Expand Down
Loading
Loading