Skip to content

Buttons for moving Kanban boards and items on mobile #1727

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

Jump to bottom
Merged
merged 40 commits into from
Mar 18, 2025
Merged

Buttons for moving Kanban boards and items on mobile #1727

merged 40 commits into from
Mar 18, 2025

Conversation

zuzanna-maria
Copy link
Contributor

@zuzanna-maria zuzanna-maria self-assigned this Dec 3, 2024
@davidbenque davidbenque added this to the Spring Release (2025.3.0) milestone Dec 4, 2024
@zuzanna-maria zuzanna-maria marked this pull request as draft December 5, 2024 12:36
@davidbenque davidbenque mentioned this pull request Dec 5, 2024
Open
This was linked to issues Dec 18, 2024
Kanban items in a column are not fully scrollable on mobile browsers #1694
Closed
Kanban lists difficult to drag on mobile #1372
Closed
@zuzanna-maria zuzanna-maria marked this pull request as ready for review January 3, 2025 17:01
@zuzanna-maria zuzanna-maria added the Ready to Review This PR is ready to be checked by another team member label Jan 3, 2025
@zuzanna-maria zuzanna-maria changed the title Buttons for moving Kanban boards and items on mobile (WIP) Buttons for moving Kanban boards and items on mobile Jan 3, 2025
@dariiing dariiing self-requested a review January 31, 2025 11:38
dariiing
dariiing requested changes Jan 31, 2025
View reviewed changes
Copy link
Contributor

@dariiing dariiing left a comment

Choose a reason for hiding this comment

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

Currently, scrolling through the boards is only possible on mobile devices. It should be adjusted to have the same behavior across all devices. Similarly, dragging boards and items should also be consistently available on all devices. The new arrow functionality can be a solution, but I assumed it's primarily intended for keyboard users.

@dariiing dariiing added Accessibility Make software available to everyone UI/UX Interfaces & user experience Kanban Related to Kanban app and removed Ready to Review This PR is ready to be checked by another team member labels Jan 31, 2025
@dariiing
Copy link
Contributor

dariiing commented Mar 6, 2025

While testing:

  • the edit board title/ edit item buttons don't work as intended when navigating via keyboard (they are focusable, but when I press Enter nothing happens, it should mimic clicking)
  • the newly added buttons ( Move left/right/up down) also don't work as previously mentioned
  • the tooltip of some buttons is undefined
  • the buttons introduced this release are not described/announced correctly when using screen readers
  • the keyboard navigation doesn't follow the visual order for the newly added buttons
Screen.Recording.2025-03-06.112845.mp4

@davidbenque
Copy link
Contributor

davidbenque commented Mar 6, 2025 •
edited
Loading

Applied some fixes to this branch

  • Corrected markup from h('.button' ... to h('button' ... to actually create buttons instead of <div class="button" this restores a lot of the default accessibility
  • Moved icons to their own i element and applied aria-hidden only to that
  • Corrected some typos in translation key names that caused them to be undefined

@davidbenque
Copy link
Contributor

  • added labels to the buttons for screen readers

The one thing that remains to fix is the dome order, somehow the up/down arrows in the center of a card have their order swapped.

@yflory yflory force-pushed the kanban_mobile_move_boards branch from 3f8c260 to 9cc11d5 Compare March 10, 2025 11:04
@davidbenque davidbenque removed Kanban Related to Kanban app Accessibility Make software available to everyone UI/UX Interfaces & user experience Ready to Test This PR is ready to be tested Keyboard navigation labels Mar 12, 2025
@yflory yflory added Ready to Test This PR is ready to be tested and removed Ready to Review This PR is ready to be checked by another team member labels Mar 12, 2025
@yflory yflory requested a review from dariiing March 12, 2025 17:15
@yflory yflory merged commit b553793 into staging Mar 18, 2025
@davidbenque davidbenque removed the Ready to Test This PR is ready to be tested label Mar 25, 2025
@yflory yflory deleted the kanban_mobile_move_boards branch March 31, 2025 10:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yflory yflory yflory approved these changes

@dariiing dariiing dariiing approved these changes

Assignees

@zuzanna-maria zuzanna-maria

Labels
None yet
Projects
None yet
Milestone
Spring Release (2025.3.0)
Development

Successfully merging this pull request may close these issues.

Kanban items in a column are not fully scrollable on mobile browsers Kanban lists difficult to drag on mobile
4 participants
@zuzanna-maria @dariiing @davidbenque @yflory