Skip to content

Add accessibility and keyboard semantics #26

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
blackopsrepl merged 1 commit into from
Mar 21, 2026
Merged

Add accessibility and keyboard semantics #26

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
14 changes: 14 additions & 0 deletions css-src/14-animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,3 +165,17 @@
.sf-toast-close:hover {
color: var(--sf-gray-700);
}

@media (prefers-reduced-motion: reduce) {
[class^="sf-"],
[class*=" sf-"],
[class^="sf-"]::before,
[class*=" sf-"]::before,
[class^="sf-"]::after,
[class*=" sf-"]::after {
animation-duration: 0.01ms !important;
Comment on lines +169 to +176

@chatgpt-codex-connector chatgpt-codex-connector Bot Mar 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Limit reduced-motion overrides to .sf- UI only

This rule targets *, *::before, and *::after, so including sf.css now disables animations/transitions and overrides scroll-behavior for the entire host page whenever the user prefers reduced motion. Because the rest of the stylesheet is scoped to SolverForge classes, this introduces a cross-app side effect for any page that embeds the bundle; the selectors should be narrowed to the library's own DOM subtree instead of globally resetting the document.

Useful? React with 👍 / 👎.

animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
13 changes: 13 additions & 0 deletions js-src/00-core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,19 @@ const SF = (function () {
return (prefix || 'sf') + '-' + uidCounter;
};

sf.bindActivation = function (el, onActivate) {
if (!el || typeof onActivate !== 'function') return;

function handleActivate(e) {
if (!e || e.type === 'keydown' && e.key !== 'Enter' && e.key !== ' ') return;
if (e.type === 'keydown') e.preventDefault();
onActivate(e);
}

el.addEventListener('click', handleActivate);
el.addEventListener('keydown', handleActivate);
};

if (typeof window !== 'undefined') window.SF = sf;
return sf;
})();
6 changes: 6 additions & 0 deletions js-src/03-buttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@
btn.title = config.tooltip;
}

if (config.ariaLabel) {
btn.setAttribute('aria-label', config.ariaLabel);
} else if (config.icon && !config.text) {
btn.setAttribute('aria-label', config.icon.replace(/fa-/, '').replace(/-/g, ' '));
}

if (config.id) {
btn.id = config.id;
}
Expand Down
18 changes: 17 additions & 1 deletion js-src/04-header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
};

// Logo
if (config.logo) {
if (config.logo) {
var logo = sf.el('img', {
className: 'sf-header-logo',
src: config.logo,
Expand Down Expand Up @@ -48,10 +48,26 @@
sf.assert(typeof tab.label === 'string', 'createHeader tab entries require a label');
var btn = sf.el('button', {
className: 'sf-nav-btn' + (tab.active ? ' active' : ''),
role: 'tab',
'aria-selected': !!tab.active,
tabIndex: 0,
dataset: { tab: tab.id },
onKeyDown: function (e) {
if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
var buttons = nav.querySelectorAll('.sf-nav-btn');
var list = Array.prototype.slice.call(buttons);
var nextIndex = e.key === 'ArrowRight'
? (list.indexOf(btn) + 1) % list.length
: (list.length + list.indexOf(btn) - 1) % list.length;
var next = list[nextIndex];
if (next && next.focus) next.focus();
},
onClick: function () {
nav.querySelectorAll('.sf-nav-btn').forEach(function (b) { b.classList.remove('active'); });
btn.classList.add('active');
nav.querySelectorAll('.sf-nav-btn').forEach(function (b) {
b.setAttribute('aria-selected', b === btn ? 'true' : 'false');
});
if (config.onTabChange) config.onTabChange(tab.id);
},
});
Expand Down
8 changes: 7 additions & 1 deletion js-src/05-statusbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

// Score display
var scoreEl = sf.el('span', { className: 'sf-statusbar-score' }, '\u2014');
var scoreEl = sf.el('span', { className: 'sf-statusbar-score', id: 'sfScoreDisplay', 'aria-live': 'polite' }, '\u2014');
bar.appendChild(scoreEl);

// Separator
Expand All @@ -33,6 +34,7 @@
// Separator + status text
bar.appendChild(sf.el('span', { className: 'sf-statusbar-sep' }, '|'));
var statusEl = sf.el('span');
var statusEl = sf.el('span', { id: 'sfStatusText', role: 'status', 'aria-live': 'polite' });
bar.appendChild(statusEl);

// Build initial constraint dots
Expand Down Expand Up @@ -129,12 +131,16 @@
constraints.forEach(function (c, i) {
var dot = sf.el('div', {
className: 'sf-constraint-dot',
id: 'sf-cdot-' + i,
title: c.name || ('Constraint ' + i),
role: onClick ? 'button' : null,
tabIndex: onClick ? '0' : null,
'aria-label': onClick ? ('Open constraint ' + (c.name || ('Constraint ' + i))) : null,
Comment on lines 133 to +138

@chatgpt-codex-connector chatgpt-codex-connector Bot Mar 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P1 Badge Keep IDs on rebuilt constraint dots

colorDotsFromAnalysis() still looks up each rendered dot via document.getElementById('sf-cdot-' + i), but buildDots() no longer assigns that id. In the stop/analyze flow (js-src/11-solver.js:62-65), every lookup now returns null, so violated hard/soft constraints are never highlighted after analysis. Restoring the id or switching the lookup to the new dataset would preserve the existing behavior.

Useful? React with 👍 / 👎.

dataset: { type: c.type || 'hard', index: String(i) },
});
if (onClick) {
dot.style.cursor = 'pointer';
dot.addEventListener('click', function () { onClick(i); });
sf.bindActivation(dot, function () { onClick(i); });
}
container.appendChild(dot);
});
Expand Down
27 changes: 21 additions & 6 deletions js-src/06-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,25 @@
sf.assert(!config.footer || Array.isArray(config.footer), 'createModal(config.footer) must be an array');

var overlay = sf.el('div', { className: 'sf-modal-overlay' });
var dialog = sf.el('div', { className: 'sf-modal' });
var dialogId = sf.uid('sf-modal');
var dialog = sf.el('div', {
className: 'sf-modal',
id: dialogId,
role: 'dialog',
'aria-modal': 'true',
'aria-labelledby': dialogId + '-title',
});
var body = sf.el('div', { className: 'sf-modal-body' });

// Header
var header = sf.el('div', { className: 'sf-modal-header' });
header.appendChild(sf.el('div', { className: 'sf-modal-title' }, config.title || ''));
var titleEl = sf.el('div', { className: 'sf-modal-title', id: dialogId + '-title' }, config.title || '');
header.appendChild(titleEl);

var closeBtn = sf.el('button', {
className: 'sf-modal-close',
html: '×',
'aria-label': 'Close modal',
onClick: function () { api.close(); },
Comment on lines 28 to 32

@chatgpt-codex-connector chatgpt-codex-connector Bot Mar 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Pass aria-label instead of unsupported ariaLabel

sf.el() only special-cases className, style, dataset, html, and on* before falling back to setAttribute(key, value) (js-src/00-core.js:21-33), so this addition creates an arialabel attribute instead of the required aria-label. The same pattern is used for the toast and API-guide copy buttons, leaving these icon-only controls unnamed to assistive technology and defeating the accessibility change.

Useful? React with 👍 / 👎.

}, '×');
header.appendChild(closeBtn);
Expand All @@ -40,6 +50,8 @@

overlay.appendChild(dialog);

var previousFocus = null;

// Close on backdrop click
overlay.addEventListener('click', function (e) {
if (e.target === overlay) api.close();
Expand All @@ -53,15 +65,18 @@
var api = { el: overlay, body: body };

api.open = function () {
document.body.appendChild(overlay);
overlay.classList.add('open');
document.addEventListener('keydown', onKeyDown);
};
previousFocus = document.activeElement;
document.body.appendChild(overlay);
if (closeBtn.focus) closeBtn.focus();
overlay.classList.add('open');
document.addEventListener('keydown', onKeyDown);
};

api.close = function () {
overlay.classList.remove('open');
document.removeEventListener('keydown', onKeyDown);
if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
if (previousFocus && previousFocus.focus) previousFocus.focus();
if (config.onClose) config.onClose();
};

Expand Down
4 changes: 3 additions & 1 deletion js-src/08-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@
});
if (config.onRowClick) {
tr.style.cursor = 'pointer';
tr.addEventListener('click', function () { config.onRowClick(rowIdx, row); });
tr.setAttribute('role', 'button');
tr.tabIndex = 0;
sf.bindActivation(tr, function () { config.onRowClick(rowIdx, row); });
}
tbody.appendChild(tr);
});
Expand Down
8 changes: 7 additions & 1 deletion js-src/09-toast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@
ensureContainer();

var variant = config.variant || 'danger';
var toast = sf.el('div', { className: 'sf-toast sf-toast--' + variant + ' sf-toast-enter' });
var toast = sf.el('div', {
className: 'sf-toast sf-toast--' + variant + ' sf-toast-enter',
role: 'status',
'aria-live': 'polite',
});

var msg = sf.el('div', { className: 'sf-toast-message' });
if (config.title) {
Expand All @@ -38,6 +42,8 @@

var closeBtn = sf.el('button', {
className: 'sf-toast-close',
html: '×',
'aria-label': 'Dismiss toast',
onClick: function () { dismiss(); },
}, '×');
toast.appendChild(closeBtn);
Expand Down
1 change: 1 addition & 0 deletions js-src/12-api-guide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
block.appendChild(sf.el('code', null, ep.curl));
var copyBtn = sf.el('button', {
className: 'sf-copy-btn',
'aria-label': 'Copy command',
onClick: function () {
navigator.clipboard.writeText(ep.curl).then(function () {
copyBtn.textContent = 'Copied!';
Expand Down
4 changes: 3 additions & 1 deletion js-src/13-rail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,9 @@
block.addEventListener('mouseleave', function () { config.onLeave(); });
}
if (config.onClick) {
block.addEventListener('click', function (e) { config.onClick(e, config); });
block.setAttribute('role', 'button');
block.tabIndex = 0;
sf.bindActivation(block, function (e) { config.onClick(e, config); });
}

rail.appendChild(block);
Expand Down
14 changes: 14 additions & 0 deletions static/sf/sf.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1225,6 +1225,20 @@ body {
.sf-toast-close:hover {
color: var(--sf-gray-700);
}

@media (prefers-reduced-motion: reduce) {
[class^="sf-"],
[class*=" sf-"],
[class^="sf-"]::before,
[class*=" sf-"]::before,
[class^="sf-"]::after,
[class*=" sf-"]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================================
SolverForge UI — Timeline Rail: Resources
Header, resource cards, gauges, stats.
Expand Down
Loading
Loading