Add accessibility and keyboard semantics - #26
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 79cca1e9a0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| 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, |
There was a problem hiding this comment.
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 👍 / 👎.
| @media (prefers-reduced-motion: reduce) { | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| animation-duration: 0.01ms !important; |
There was a problem hiding this comment.
.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 👍 / 👎.
| var closeBtn = sf.el('button', { | ||
| className: 'sf-modal-close', | ||
| html: '×', | ||
| ariaLabel: 'Close modal', | ||
| onClick: function () { api.close(); }, |
There was a problem hiding this comment.
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 👍 / 👎.
79cca1e to
b2fa35f
Compare
1 participant
Closes #7.\n\n## Summary\n- add reusable activation helper for click/Enter/Space activation\n- tighten interactive semantics in buttons, table rows, rail blocks, status dots, and modal\n- add reduced-motion fallback for animations/transitions\n- improve accessible labeling for modal/toast/API copy actions\n