Feature/cloud sync accessibility kanban#3205
Merged
marcelfolaron merged 24 commits intomasterfrom Jan 20, 2026
Merged
Conversation
This commit enhances WCAG 2.1 AA compliance for low vision users by: - Adding mode-aware grayscale color schemes that automatically adjust for dark/light modes - Implementing visible keyboard focus indicators throughout the application - Improving link hover states with high contrast colors and thick underlines - Adding support for prefers-contrast, prefers-reduced-motion, and forced-colors - Ensuring dashboard task links are readable in dark mode with grayscale (8.5:1 contrast ratio) Key changes: - Theme.php: Added getColorSchemeForMode() for dynamic color adjustment - New accessibility.css: Additional support for user preferences - Enhanced focus styles for light and dark modes - Link colors change from blue→black (light) or gray→white (dark) on hover 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
….1 AA compliance - Fix grey label text contrast: white to black (#fff → #000) for 7.0:1 ratio - Fix pink label text contrast: white to black for 5.5:1 ratio - Fix yellow label text in minimal theme: white to black for 8.5:1 ratio - Fix dark mode menu hover: accent1 to white for 16.8:1 ratio - Fix grayscale2 color scheme in dark mode: #4a4a4a → #a0a0a0 for 5.0:1 ratio - Add --focus-ring-color CSS variable for consistent focus indicators - Use softer focus indicators (Option B) for default theme - Use minimal focus indicators (Option C) for minimal/Less theme - Add Redis PHP extension to Docker dev environment - Fix Docker network configuration for acceptance tests - Fix test.env database password and cache configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replaced vertical sidebar swimlane headers with modern horizontal row headers featuring: - Visual status breakdown with micro progress bars - Design token system for consistent colors and labels - Reusable Blade icon components (thermometer, t-shirt, avatar, etc.) - Time alert indicators (overdue, due soon, stale) - Expandable/collapsible states with smooth animations - Full keyboard navigation (Tab, Enter, Space, Arrow keys) - WCAG AA accessibility compliance New Components: - TicketDesignTokens model for centralized design tokens - swimlane-row-header.blade.php - main composed component - micro-progress-bar.blade.php - status breakdown visualization - Icon components: thermometer, tshirt, user-avatar, milestone, sprint, type, time-indicator Service Layer: - Added getStatusBreakdownBySwimlane() method to Tickets service - Calculates status counts and time alerts per swimlane JavaScript: - kanbanController.js with toggle, keyboard support, and tooltip initialization - Session persistence for collapse/expand state Test Page: - componentTest.blade.php for isolated component testing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Quick-Add Form Enhancements: - New quick-add form template with improved UX - Keyboard shortcuts (Enter, Shift+Enter, Esc) - Swimlane context inheritance - auto-populate groupBy fields - Tooltip help with keyboard shortcuts - Auto-focus and click-outside behavior - Toast notification styling Card Movement Optimizations: - Smooth card transitions when changing grouped fields (no page reload) - moveCardToSwimlane() function for animated card movement - Integration with all dropdown handlers (priority, effort, milestone, user, sprint) - Empty column state management after drag-and-drop - Sortable refresh after programmatic card moves Files: - quickadd-form.inc.php - Enhanced quick-add form template - quickadd.less - Quick-add form styling - toast-notifications.css - Toast notification styles - ticketsController.js - Card movement and empty state logic 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit implements WCAG 2.1 AA compliant accessibility enhancements for JavaScript-powered input components throughout the application. Key Changes: - Added new accessibility.js module with comprehensive ARIA support - Enhanced Chosen.js dropdowns with proper ARIA attributes and roles - Added keyboard navigation support for all custom dropdowns - Implemented visible focus indicators for all interactive elements - Fixed keyboard event handling on kanban cards to prevent conflicts - Added focus states for datepickers, time pickers, and form controls - Ensured proper label associations for all form inputs Components Enhanced: - Chosen.js multi-select and single-select dropdowns - SlimSelect dropdowns - jQuery UI Datepickers - Time picker inputs - TagsInput fields - TinyMCE editors - Kanban card interactive elements Technical Implementation: - Created public/assets/js/app/core/accessibility.js - Updated forms.css with improved focus states and removed problematic outline:none - Added comprehensive focus indicators to light.css and dark.css theme files - Updated webpack.mix.js to include accessibility.js in build pipeline - Fixed event delegation to prevent keyboard event conflicts on kanban cards Accessibility Features: - All custom inputs now have proper ARIA labels and roles - Keyboard navigation works correctly (Enter/Space to activate, Escape to close) - Visible focus indicators with sufficient contrast (3:1 minimum) - Screen reader compatible with proper announcements - No keyboard traps - all elements are keyboard accessible - Dynamic content (HTMX, modals) automatically enhanced on load 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add collapsed view showing compact ticket cards in horizontal row - Sidebar displays: expand toggle, chevron, groupBy indicator, count badge - Compact tickets show: ID, type icon, title, user avatar - Toggle between expanded kanban columns and collapsed compact view - Update JS toggleSwimlane() to handle both views - Fix CSS overflow for tooltip visibility - Align column headers with sidebar width (78px) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix collapsed state to show compact ticket cards instead of hiding content - Add quick-add form to all columns, not just empty ones - Balance sidebar header height and spacing in collapsed state - Add proper padding between compact tasks - Clean up duplicate blade files and caches - Simplify swimlane toggle to two states (expanded/collapsed) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Change sidebar from 70px vertical to 150px horizontal layout - Implement two-row structure: Row 1 (chevron, icon, label), Row 2 (progress bar, count) - Add FontAwesome icons for status and default groupBy types - Sidebar stretches to full row height with top alignment to first ticket - Add subtle bottom border between swimlane sections for visual separation - Make empty column states more subtle (2% tint, no borders) - Increase progress bar size to 'lg' for better visibility - Fix dark mode count badge colors (olive tones) - Update column headers offset to align with new sidebar width 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Implement transform-based sticky sidebars that keep element in document flow to avoid layout shifts (replaces failed CSS position:sticky attempt) - Add subtle transparent hover state for dark mode (rgba white overlay) - Improve count badge accessibility with dark background and white text - Fix duplicate avatar appearing in User groupBy view - Fix "No Effort" incorrectly showing "XXS" on hover tooltip - Reduce swimlane margins and remove border lines between sections 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add effort -> storypoints field mapping for groupBy support - Move help icon inside textarea input (right-aligned, centered) - Reduce input height and padding for compact appearance - Remove textarea resize for consistent layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix status breakdown lookup by using consistent string keys in service - Use service-calculated totalCount to ensure progress bar fills 100% - Add collapsed/expanded header states with inline count badge - Change count badge to darkened accent2 teal (WCAG AA compliant 4.9:1) - Progress bar always shows (gray when empty, colored when tasks exist) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix swimlane row to auto-fit content height (no extra whitespace) - Show counts on all progress bar segments regardless of size - Change "Waiting for Approval" color from amber to orange for distinction - Add borders between progress bar segments for visual separation - Use consistent 11px font size for all segment counts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Skip collapsed swimlanes in setUpKanbanColumns() height equalization - Clear both height and minHeight in resetColumnHeights() on collapse - Add CSS auto-height rules for collapsed state columns 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add cross-swimlane drag-drop with instant visual feedback - Update card visuals immediately for all groupBy types (milestone, priority, user, effort, sprint) - Hide redundant "Status" option from Kanban groupBy dropdown - Auto-reset groupBy=status to "all" when navigating to Kanban view - Fix empty column state updates after drag-drop 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Due Date groupBy with time-based buckets (Overdue, Due This Week, Due Next Week, Due Later, No Due Date) - Fix priority groupBy sorting (Critical to Lowest, No Priority at bottom) - Alphabetize groupBy dropdown options - Update swimlane counts when tickets are moved between groups - Convert swimlane tooltips to Tippy.js with 500ms delay - Remove icons from Due Date swimlane headers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add dueDate support for cross-swimlane drag-drop with date calculation - Fix null check errors preventing ticket saves when moving cards - Sort effort groupBy from highest to lowest (no effort last) - Fix progress bar sub-pixel rendering bumping with overlap technique - Add mobile tap-to-reveal column counts - Move progress bar segment styling to CSS for consistency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use flex-grow proportionally based on percentage instead of fixed flex-basis - Only render segments with count > 0 to avoid empty segment issues - Remove negative margin hack that caused gray gaps at edges 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Sort named milestones first alphabetically, "No Milestone" last - Fix collapsed swimlane columns to shrink to content height - Add equalizeContentInnerHeights JS function for future use 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Reverse keyboard shortcuts: Enter now saves and closes, Shift+Enter saves and adds another (more intuitive default behavior) - Add visible tooltip on help icon showing keyboard shortcuts - Fix progress bar not updating after card drag-drop by rendering all status segments (including empty ones) so JavaScript can update them 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace custom toast system with existing setNotification() - Remove unused componentTest() method from controller - Remove empty initQuickAddHelp() method and all calls - Combine duplicate column height methods into equalizeColumnHeights() 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Collapsed swimlanes now properly equalize column heights so all .contentInner containers align to the tallest column visually. Changes: - Call equalizeColumnHeights() instead of resetColumnHeights() when collapsing swimlanes and on page load for collapsed swimlanes - Remove CSS !important overrides that were blocking JS height control - Remove flex-start alignment rules that prevented column stretching 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fixes Laravel Pint style issues in: - TicketDesignTokens.php - phpdoc_align - showKanban.tpl.php - unary_operator_spaces, statement_indentation - ticketFilter.sub.php - statement_indentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added the 'iframe_aria_text' property with an empty string to all TinyMCE editor initializations to improve accessibility configuration.
Removed extra spaces in the concatenation of version components for consistency and code style.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Description
Please include a short description of the suggested change and the reasoning behind the approach you have chosen.
Link to ticket
Please add a link to the GitHub issue being addressed by this change.
Type
Screenshot of the result
If your change affects the user interface, you should include a screenshot of the result with the pull request.