Fixes #4180, Closes #4177 - Unable to scroll ticket image view when using arrow keys.

app/assets/javascripts/app/controllers/ticket_zoom.coffee

@@ -337,7 +337,7 @@ class App.TicketZoom extends App.Controller
 
   hide: =>
     @activeState = false
-    $('body > .modal').modal('hide')
+    $('body > .modal').modal('hide') if @shown
     @positionPageHeaderStop()
     @autosaveStop()
     @shortcutNavigationstop()

app/assets/javascripts/app/controllers/ticket_zoom/article_image_view.coffee

@@ -5,6 +5,7 @@ class App.TicketZoomArticleImageView extends App.ControllerModal
   buttonClass: 'btn--success'
   head: ''
   veryLarge: true
+  nextElement: null
 
   events:
     'submit form':      'submit'
@@ -20,16 +21,14 @@ class App.TicketZoomArticleImageView extends App.ControllerModal
     )
 
   nextRight: =>
-    nextElement = @parentElement.closest('.attachment').next('.attachment.attachment--preview')
-    return if nextElement.length is 0
+    @nextElement = @parentElement.closest('.attachment').next('.attachment.attachment--preview')
+    return if @nextElement.length is 0
     @close()
-    nextElement.find('img').trigger('click')
 
   nextLeft: =>
-    prevElement = @parentElement.closest('.attachment').prev('.attachment.attachment--preview')
-    return if prevElement.length is 0
+    @nextElement = @parentElement.closest('.attachment').prev('.attachment.attachment--preview')
+    return if @nextElement.length is 0
     @close()
-    prevElement.find('img').trigger('click')
 
   content: ->
     @image = @image.replace(/view=preview/, 'view=inline')
@@ -40,8 +39,15 @@ class App.TicketZoomArticleImageView extends App.ControllerModal
     url = "#{$(@image).attr('src')}?disposition=attachment"
     window.open(url, '_blank')
 
+  onShow: =>
+    @el.attr('tabindex', '-1')
+    $('.modal').focus()
+
   onClose: =>
     @unbindAll()
 
+  onClosed: =>
+    @nextElement.find('img').trigger('click') if @nextElement
+
   unbindAll: ->
     $(document).off('keydown.image_preview')

spec/system/ticket/zoom/article_image_view_spec.rb

@@ -3,41 +3,68 @@
 require 'rails_helper'
 
 RSpec.describe 'Article Image View', type: :system do
-  describe 'Switching the photos displayed in the preview does not work with the arrow keys #4030' do
+  describe 'Switching the photos displayed in the preview' do
     let(:ticket) { create(:ticket, group: Group.first) }
     let(:article) do
       create(:ticket_article, ticket: ticket, attachments: [
                {
-                 data:        File.read(Rails.root.join('spec/fixtures/files/image/squares.png')),
-                 filename:    'squares.png',
+                 data:        File.read(Rails.root.join('spec/fixtures/files/image/large.png')),
+                 filename:    'large.png',
                  preferences: { 'Content-Type' => 'image/png', 'resizable' => true, 'content_preview' => true },
                },
                {
-                 data:        File.read(Rails.root.join('spec/fixtures/files/image/squares2.png')),
-                 filename:    'squares2.png',
+                 data:        File.read(Rails.root.join('spec/fixtures/files/image/large2.png')),
+                 filename:    'large2.png',
                  preferences: { 'Content-Type' => 'image/png', 'resizable' => true, 'content_preview' => true },
                },
                {
-                 data:        File.read(Rails.root.join('spec/fixtures/files/image/squares3.png')),
-                 filename:    'squares3.png',
+                 data:        File.read(Rails.root.join('spec/fixtures/files/image/large3.png')),
+                 filename:    'large3.png',
                  preferences: { 'Content-Type' => 'image/png', 'resizable' => true, 'content_preview' => true },
                },
              ])
     end
 
+    def current_scroll_position
+      find('div.modal').evaluate_script('this.scrollTop')
+    end
+
     before do
       visit "#ticket/zoom/#{article.ticket.id}"
     end
 
+    # https://github.com/zammad/zammad/issues/4030
     it 'does switch images via arrow keys' do
       first('.ticket-article-item .js-preview').click
       images = Store.last(3)
       wait.until { page.find('div.imagePreview img')[:src].include?("/#{images[0].id}") }
       find('body').send_keys :arrow_right
+      wait.until { page.find('div.imagePreview img')[:src].include?("/#{images[1].id}") }
       find('body').send_keys :arrow_right
       wait.until { page.find('div.imagePreview img')[:src].include?("/#{images[2].id}") }
       find('body').send_keys :arrow_left
       wait.until { page.find('div.imagePreview img')[:src].include?("/#{images[1].id}") }
     end
+
+    # https://github.com/zammad/zammad/issues/4180
+    it 'does scroll down and up properly' do
+      first('.ticket-article-item .js-preview').click
+      wait.until { expect(page).to have_css('div.modal') }
+
+      initial_scroll_value = current_scroll_position
+      expect(initial_scroll_value).to be >= 0
+
+      find('div.modal').send_keys :arrow_down
+      current_scroll_value = current_scroll_position
+      expect(current_scroll_value).to be > initial_scroll_value
+
+      find('div.modal').send_keys :arrow_right
+      wait.until { expect(page).to have_css('div.imagePreview img') }
+      initial_scroll_value = current_scroll_position
+      expect(initial_scroll_value).to be < current_scroll_value
+
+      find('div.modal').send_keys :arrow_down
+      expect(current_scroll_position).to be > initial_scroll_value
+    end
   end
 end