A11y updates #9
Merged
A11y updates #9
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e fig. 18 options keyboard focusable.
…n the toolbar and the figure.
…visually hidden caption. The animated caption, even with role="text", was being read out letter by letter. Resources for the current approach: - https://css-irl.info/how-to-accessibly-split-text/ - https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/?ref=uxcollective
Fig. 18 was quite hard to read on a large desktop screen.
aria-selected implies role=tab and role=tablist, which, in turn, required each tab item to aria-control a specific tab. We don't render each figure immediately and switch visibility via tabbing, so it's not possible to add the correct aria roles. In any case, since these are anchor tags that change the URL, aria-selected may be more appropriate anyway.
Reasons not to go with this: - Smooth option not supported on Safari - Not in sync with the arrow drawing, so does it actually help? - Interferes with manual scrolling?
This reverts commit e1a9c93. Too much effort to get to work nicely.
elisehein
added a commit
that referenced
this pull request
Jun 18, 2021
* Bump version to 1.0.1 * Minify CSS and JS in production (#4) * Add CSS minification step to production build. * Add terser and JS compression script using foreach-cli * Update CHANGELOG. * * Add CSS minification step to production build. (#6) * Add terser and JS compression script using foreach-cli * Update CHANGELOG. Co-authored-by: Elise Hein <elisehein@gmail.com> * GH Actions workflow for linting and testing (#7) * Add lint and test GH workflow. * Add .eslintignore to ignore test files. * Fix some eslint errors. * Fix some stylelint issues. * Duration helper class (#8) * Add a Duration helper object and make a start with conversions. * Add shortcut properties for 1, 2, 3 second durations. * Update CHANGELOG. * Fix date in CHANGELOG. * Fix links in CHANGELOG. * A11y updates (#9) * Adjust outline offsets. * Use a different ARIA label for thumbnail diagram SVGs. * Make pendulum arm keyboard focusable and clickable. * Improve keyboard focusability by preventing outline on click, and make fig. 18 options keyboard focusable. * Add fill animation to pendulum click overlay to better indicate clickability. * Add aria-live, aria-selected and aria-current to the semantics between the toolbar and the figure. * Hide the animated caption from screen readers and add an accessible, visually hidden caption. The animated caption, even with role="text", was being read out letter by letter. Resources for the current approach: - https://css-irl.info/how-to-accessibly-split-text/ - https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/?ref=uxcollective * Bump up max diagram size. Fig. 18 was quite hard to read on a large desktop screen. * Use aria-current instead of aria-selected for figure toolbar. aria-selected implies role=tab and role=tablist, which, in turn, required each tab item to aria-control a specific tab. We don't render each figure immediately and switch visibility via tabbing, so it's not possible to add the correct aria roles. In any case, since these are anchor tags that change the URL, aria-selected may be more appropriate anyway. * Try out native scrollIntoView for fig. 18 boxes. Reasons not to go with this: - Smooth option not supported on Safari - Not in sync with the arrow drawing, so does it actually help? - Interferes with manual scrolling? * Revert "Try out native scrollIntoView for fig. 18 boxes." This reverts commit e1a9c93. Too much effort to get to work nicely. * Update CHANGELOG. * Loop fig. 42 in reverse after caption appears. (#10) * Loop fig. 42 in reverse infinitely. * Reuse existing star animations instead of infinitely creating new ones. Fix beginAnimation() done handler not being cleaned up. * Use passed in onLightUp instead of keeping a reference on this. * Add jitter just before reverse animation in fig. 42. * Reduce blur on fig. 42 thumbnail. * Update CHANGELOG. * Light up fig. 18 when new boxes are drawn. (#11) * Light up fig. 18 when new boxes are drawn. * Update CHANGELOG. * An approach to fig. 18 where the caption also disappears during the reverse loop. * Erratic rotation in fig. 43. Distinguish between SVG and HTML diagrams. (#12) * Split Diagram into SVGDiagram and HTMLDiagram in prep for HTML+CSS version of fig. 43. This also includes removing (buggy) attribute mirroring from Diagram, as we don't use it. * Replace SVG cube with rotating CSS keyframes cube. * Different styling in fig. 43 for thumbnail diagram. * Fix fig. 43 keyframes on Safari by explicitly defining rotation 0 > 90 > 180 > 270. Separate scale animation from rotation. * Add random fuzziness to fig. 43. * Move fuzziness handling to SchematicsFigure to include figcaption. Fine-tune fig. 43 animations. * Add zero-case test to Duration. * Clean up fuzzy and light up on figure change. * Add svg and html variation classnames to diagram and use for positioning. * Reduce repetition in positioning the diagram custom element and its children. * Adjust fig. 43 timing. * Attach figure behavior callbacks to diagram element after init instead of passing with draw functions. * Implement DiagramFactory to take care of passing figureBehaviors on init. * Update CHANGELOG. * Add quick offset drop shadow to hiding duration and light up fig. 14 on start. * Update CHANGELOG. * Move some things out of main.css * Small CSS tidy-ups. * Fix figure toolbar breakpoints for showing active vs all links. Also show all links on tablets if they fit. * Disable transition and animation durations if @prefers-reduced-motion. This doesn't include the actual figure SVG animations, only CSS. * Revert "Disable transition and animation durations if @prefers-reduced-motion." Will do it properly all in one go along with the figures themselves. Also need to research acceptable levels of motion instead of disabling everything. This reverts commit 1066454. * Update CHANGELOG and versions. Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.