Image Navigation Arrows Reversed in Gallery View

[rokokti]

Bug Report: Reversed Image Navigation Arrows in Gallery View

Summary

The image gallery navigation arrows in Nextcloud Files are reversed and counter-intuitive, particularly on the first and last images of a gallery. The directional arrows do not follow standard UI conventions for pagination controls.

---

Environment

Component	Version
Nextcloud	Hub 25 Autumn (32.0.6)
Operating System	Linux 6.8.0-101-generic x86_64
PHP	8.3.6
Database	PostgreSQL 16.13 (Ubuntu 16.13-0ubuntu0.24.04.1)
Browser	Chromium-based (tested on multiple browsers)

---

Issue Description

When viewing images in the Nextcloud Files gallery view (media preview panel), the navigation arrows behave in a counter-intuitive manner:

Current Behavior (Incorrect)

Position	Visible Arrows	Arrow Direction	Expected Action	Actual Action
First Image	Left arrow only	←	Go to previous (disabled)	Goes to next image
Middle Images	Both arrows	← →	Navigate both directions	Works correctly
Last Image	Right arrow only	→	Go to next (disabled)	Goes to previous image

Expected Behavior (Correct)

Position	Visible Arrows	Arrow Direction	Expected Action	Actual Action
First Image	Right arrow only	→	Go to next image	Should go to next
Middle Images	Both arrows	← →	Navigate both directions	Should work both ways
Last Image	Left arrow only	←	Go to previous image	Should go to previous

---

Reproduction Steps

1. Open Nextcloud Files application
2. Navigate to a folder containing multiple images (3+ images)
3. Click on the first image to open the media preview panel
4. Observe the navigation arrows displayed
5. Click the visible arrow to navigate
6. Continue to the last image
7. Observe the arrow behavior

Expected Result

• First image: Right arrow (→) to advance
• Last image: Left arrow (←) to go back
• Arrows should point in the direction of navigation

Actual Result

• First image: Left arrow (←) displayed
• Last image: Right arrow (→) displayed
• Arrows point opposite to the direction of navigation

---

Visual Evidence

Last Image (Incorrect):

• Only right arrow (→) is visible
• Clicking it goes to the previous image
• This is counter-intuitive as the right arrow typically means "next" or "forward"

Middle Image (Correct):

• Both arrows are visible
• Left arrow (←) goes to previous
• Right arrow (→) goes to next
• Navigation works as expected

---

Impact

• Severity: Low to Medium
• User Experience: Confusing and counter-intuitive
• Accessibility: May confuse users with cognitive disabilities or those unfamiliar with the interface
• Scope: Affects all users viewing image galleries in Nextcloud Files

---

Root Cause Analysis

This appears to be a logic error in the image navigation component, likely in:

• JavaScript event handlers for arrow button clicks
• CSS styling that hides/shows arrows based on position
• Or the combination of both

The arrows are likely being positioned based on array index rather than directional intent.

---

Suggested Fix

1. Reverse the arrow directions on first and last images to match user expectations
2. Ensure arrow direction always matches navigation direction:
   • Left arrow (←) = Previous image
   • Right arrow (→) = Next image
3. Disable/hide arrows appropriately:
   • First image: hide left arrow, show right arrow
   • Last image: hide right arrow, show left arrow
   • Middle images: show both arrows

---

Additional Notes

• This behavior is consistent across different browsers (Chromium-based)
• The issue persists after clearing browser cache
• No custom CSS or extensions are modifying this behavior
• This is a vanilla Nextcloud installation

---

Recommended Labels

• bug
• ui
• ux
• files
• accessibility

---

Related Issues

Please check if similar issues have been reported:

• Image gallery navigation
• Media preview arrows
• Files app navigation

---

Steps for Developers

To investigate and fix:

1. Locate the image gallery navigation component (likely in /apps/files/ or /core/)
2. Check the JavaScript event handlers for arrow click events
3. Verify the logic that determines arrow visibility and direction
4. Test with multiple images to ensure correct behavior at all positions
5. Add unit tests to prevent regression

---

Report Generated: 2026-03-09
Reporter: User Infrastructure
Status: Ready for submission to Nextcloud GitHub Issues