MokoConsulting/MokoJoomHero
1
0
Fork 0
Code Issues Pull Requests 1 Releases 1 Wiki Activity

feat: respect prefers-reduced-motion for accessibility #49

New Issue
Closed
opened 2026-06-04 12:01:59 +00:00 by jmiller · 1 comment
jmiller commented 2026-06-04 12:01:59 +00:00
Owner
Copy Link
Copy Source

Summary

Honour the prefers-reduced-motion: reduce OS/browser setting by pausing the image slideshow, disabling slide transitions, and stopping Ken Burns zoom animation. This is a WCAG 2.1 AA requirement (Success Criterion 2.3.3).

Requirements

  • CSS: wrap transition/animation rules in @media (prefers-reduced-motion: no-preference)
  • JS: skip setInterval slideshow cycling when reduced motion is preferred; show only the first image
  • Video modes: optionally pause autoplay (configurable)
  • Add a visible pause/play button for slideshows regardless of motion preference

Acceptance Criteria

  • Slideshow stops on first image when reduced-motion is set
  • No CSS transitions or animations fire under reduced-motion
  • Video behaviour is configurable
  • Pause/play button works for slideshows
## Summary Honour the `prefers-reduced-motion: reduce` OS/browser setting by pausing the image slideshow, disabling slide transitions, and stopping Ken Burns zoom animation. This is a WCAG 2.1 AA requirement (Success Criterion 2.3.3). ## Requirements - CSS: wrap transition/animation rules in `@media (prefers-reduced-motion: no-preference)` - JS: skip `setInterval` slideshow cycling when reduced motion is preferred; show only the first image - Video modes: optionally pause autoplay (configurable) - Add a visible pause/play button for slideshows regardless of motion preference ## Acceptance Criteria - [ ] Slideshow stops on first image when reduced-motion is set - [ ] No CSS transitions or animations fire under reduced-motion - [ ] Video behaviour is configurable - [ ] Pause/play button works for slideshows
jmiller added the cssenhancementinvalidjoomla labels 2026-06-04 12:01:59 +00:00
jmiller commented 2026-06-04 12:02:01 +00:00
Author
Owner
Copy Link
Copy Source

Branch created: feature/49-feat-respect-prefers-reduced-motion-for-

git fetch origin
git checkout feature/49-feat-respect-prefers-reduced-motion-for-
Branch created: [`feature/49-feat-respect-prefers-reduced-motion-for-`](https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/src/branch/feature/49-feat-respect-prefers-reduced-motion-for-) ```bash git fetch origin git checkout feature/49-feat-respect-prefers-reduced-motion-for- ```
Sign in to join this conversation.
Labels
Clear labels
automation
Automated processes or scripts
 breaking-change
Breaking API or functionality change
 bug
Something isn't working
 build
Build system changes
 ci-cd
CI/CD pipeline changes
 config
Configuration file changes
 css
CSS/styling changes
 dependencies
Dependency updates
 deploy-failure
Automated deploy failure tracking
 docker
Docker configuration changes
 documentation
Documentation changes
 dolibarr
Dolibarr module or extension
 duplicate
This issue or pull request already exists
 enhancement
New feature or request
 generic
Generic project or library
 good first issue
Good for newcomers
 health-check
Repository health check results
 health: excellent
Health score 90-100
 health: fair
Health score 50-69
 health: good
Health score 70-89
 health: poor
Health score below 50
 help wanted
Extra attention is needed
 html
HTML template changes
 invalid
This doesn't seem right
 javascript
JavaScript code changes
 joomla
Joomla extension or component
 major-release
Major version release (breaking changes)
 minor-release
Minor version release (XX.YY.00)
 mokostandards
MokoStandards compliance
 needs-review
Awaiting code review
 needs-testing
Requires manual or automated testing
 patch-release
Patch version release (XX.YY.ZZ)
 php
PHP code changes
 push-failure
File push failure requiring attention
 python
Python code changes
 question
Further information is requested
 regression
Regression from a previous working state
 release-candidate
Release candidate build
 security
Security-related changes
 size/l
Large change (101-300 lines)
 size/m
Medium change (31-100 lines)
 size/s
Small change (11-30 lines)
 size/xl
Extra large change (301-1000 lines)
 size/xs
Extra small change (1-10 lines)
 size/xxl
Extremely large change (1000+ lines)
 standards-drift
Repository drifted from MokoStandards
 standards-update
MokoStandards sync update
 standards-violation
Standards compliance failure
 status: blocked
Blocked by another issue or dependency
 status: in-progress
Currently being worked on
 status: needs-review
Awaiting code review
 status: on-hold
Temporarily on hold
 status: pending
Pending action or decision
 status: wontfix
This will not be worked on
 sync-failure
Bulk sync failure requiring attention
 sync-report
Bulk sync run report
 template-validation-failure
Template workflow validation failure
 test-failure
Automated test failure
 tests
Test suite changes
 type: bug
Something isn't working
 type: chore
Maintenance tasks
 type: enhancement
Enhancement to existing feature
 type: feature
New feature or request
 type: refactor
Code refactoring
 type: release
Release preparation or tracking
 type: test
Test suite additions or changes
 type: version
Version-related change
 typescript
TypeScript code changes
 version
Version bump or release
 version-branch
Version branch related
 version-drift
Version mismatch detected
 wontfix
This will not be worked on
 work-in-progress
Work in progress, not ready for merge
bug
Something is not working
 chore
Maintenance and housekeeping
 documentation
Documentation improvements
 enhancement
Improvement to existing functionality
 feature
New feature or request
 pending: dependency
Blocked by another issue or external dependency
 pending: deployment
Tested and approved, awaiting deployment to production
 pending: design
Needs UI/UX or architecture design before implementation
 pending: documentation
Feature works, needs documentation/wiki update
 pending: feedback
Awaiting feedback or decision from stakeholder
 pending: review
Implementation complete, awaiting code review
 pending: testing
Feature implemented but not yet tested
 priority: critical
Must fix immediately
 priority: high
Should fix soon
 priority: low
Nice to have
 priority: medium
Fix when convenient
 refactor
Code restructuring without behavior change
 roadmap
Planned feature or enhancement tracked on the roadmap
 scope: client
Client-specific work
 scope: dolibarr
Dolibarr modules and customizations
 scope: infrastructure
Server, CI, backups, monitoring
 scope: joomla
Joomla templates and extensions
 scope: waas
MokoWaaS platform
 security
Security vulnerability or hardening
 status: blocked
Waiting on external dependency
 status: duplicate
Duplicate of another issue
 status: in-progress
Being worked on
 status: needs-review
Ready for review
 status: wontfix
Will not be addressed
No labels css enhancement invalid joomla
Type —
Status —
Priority —
Milestone
No items
No Milestone
Assignees
Clear assignees
jmiller (Jonathan Miller)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoJoomHero#49
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?