From ce0f6248b05bae205c48eb7dd023d92f16b92b42 Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@xwiki.com>
Date: Thu, 17 Oct 2024 17:51:18 +0200
Subject: [PATCH 1/4] XWIKI-22581: FocusCatcher input has no label * Replaced
 the FocusCatcher artificial input with a semantically better span. * Updated
 the style of the gallery to use css grid instead of hackish solutions all
 around. * Improved accessibility by changing the div interactive controllers
 with buttons.

TODO: Check further the half screen large picture maximized gallery behavior bug and find a fix for it.
---
 .../uicomponents/widgets/gallery/gallery.css  | 76 +++++++++----------
 .../uicomponents/widgets/gallery/gallery.js   | 18 ++---
 2 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
index a4c2d77501a1..0f8b36d4b7bd 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
@@ -10,13 +10,9 @@
   /* Those width/height values can be overridden by the inline styling added with the macro parameters */
   width: 620px;
   height: 349px;
-}
-
-.xGallery:before {
-  content: "";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
+  display: grid;
+  grid-template-columns: 1fr 10fr 1fr;
+  grid-template-rows: 1fr 10fr 1fr;
 }
 
 .xGallery.maximized {
@@ -28,26 +24,32 @@
   width: 100% !important;
 }
 
-.xGallery .currentImage {
-  max-height: 100%;
-  max-width: 100%;
-  padding: 22px;
-  vertical-align: middle;
+.xGallery .image-container {
+  grid-area: 2 / 2 / 3 / 3;
+  display: inline-flex;
+  align-content: center;
+  justify-content: center;
+}
+.xGallery .image-container .currentImage {
+  object-fit: scale-down;
+}
+
+/* Transparent buttons that should fill the space they've been given on the grid*/
+.xGallery .previous, .xGallery .next,
+.xGallery .maximize, .xGallery .minimize {
+  background-color: transparent;
+  border-color: transparent;
+  width: 100%;
+  height: 100%;
 }
 
 .xGallery .previous, .xGallery .next {
   color: #A0A0A0;
-  cursor: pointer;
   font-family: courier,monospace;
   font-size: 32px;
   font-weight: 100;
-  height: 124px;
   line-height: 124px;
-  margin-top: -64px;
-  position: absolute;
   text-align: center;
-  top: 50%;
-  width: 32px;
 }
 
 .xGallery .previous:hover, .xGallery .next:hover {
@@ -55,54 +57,48 @@
 }
 
 .xGallery .previous {
-  left: 0;
+  grid-area: 2 / 1 / 3 / 2;
 }
 
 .xGallery .next {
-  right: 0;
+  grid-area: 2 / 3 / 3 / 4;
 }
 
 .xGallery .index {
-  bottom: 10px;
   color: #C0C0C0;
   font-family: sans-serif;
   font-size: smaller;
-  left: 10px;
   line-height: 1;
-  position: absolute;
+  grid-area: 3 / 1 / 4 / 2;
+  align-content: end;
 }
 
 .xGallery .loading {
   background-image: url('loading.gif') !important;
 }
 
-.xGallery .focusCatcher {
-  background-color: black;
-  border: 0 none;
-  color: black;
-  height: 1px;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  width: 1px;
-  z-index: -1;
-}
-
 .xGallery .maximize, .xGallery .minimize {
-  cursor: pointer;
   height: 16px;
   opacity: .5;
-  position: absolute;
-  right: 10px;
-  top: 10px;
   width: 16px;
+  grid-area: 1 / 3 / 2 / 4;
+  justify-self: end;
 }
 
 .xGallery .maximize:hover, .xGallery .minimize:hover {
   opacity: 1;
 }
 
+/* Elements on the left of the grid are left aligned*/
+.xGallery .index, .xGallery .previous {
+  text-align: start;
+}
+
+/* Elements on the right of the grid are right aligned*/
+.xGallery .maximize, .xGallery .minimize, .xGallery .next {
+  text-align: end;
+}
+
 .xGallery .maximize {
   background: transparent url('maximize.gif') no-repeat scroll center;
 }
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
index e50e1bfe3af8..67415ea0bb2a 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
@@ -24,25 +24,23 @@ XWiki.Gallery = Class.create({
     this.images = this._collectImages(container);
 
     this.container = container.update(
-      '<input type="text" tabindex="-1" class="focusCatcher"/>' +
+      '<button class="maximize" title="${escapetool.xml($services.localization.render("core.widgets.gallery.maximize"))}"></button>' +
+      '<button class="previous" title="${escapetool.xml($services.localization.render("core.widgets.gallery.previousImage"))}">&lt;</button>' +
+      '<span class="focusCatcher image-container" role="group" aria-roledescription="slide" tabindex="0">' +
       '<img class="currentImage" alt="${escapetool.xml($services.localization.render("core.widgets.gallery.currentImage"))}"/>' +
-      '<div class="previous" title="${escapetool.xml($services.localization.render("core.widgets.gallery.previousImage"))}">&lt;</div>' +
-      '<div class="next" title="${escapetool.xml($services.localization.render("core.widgets.gallery.nextImage"))}">&gt;</div>' +
-      '<div class="index">0 / 0</div>' +
-      '<div class="maximize" title="${escapetool.xml($services.localization.render("core.widgets.gallery.maximize"))}"></div>'
+      '</span>' +
+      '<button class="next" title="${escapetool.xml($services.localization.render("core.widgets.gallery.nextImage"))}">&gt;</button>' +
+      '<div class="index">0 / 0</div>'
     );
-    this.container.addClassName('xGallery');
+    this.container.addClassName('xGallery');    
 
     this.focusCatcher = this.container.down('.focusCatcher');
     this.focusCatcher.observe('keydown', this._onKeyDown.bindAsEventListener(this));
-    this.container.observe('click', function() {
-      this.focusCatcher.focus();
-    }.bind(this));
 
     this.container.down('.previous').observe('click', this._onPreviousImage.bind(this));
     this.container.down('.next').observe('click', this._onNextImage.bind(this));
 
-    this.currentImage = this.container.down('.currentImage');
+    this.currentImage = this.focusCatcher.down('.currentImage');
     this.currentImage.observe('load', this._onLoadImage.bind(this));
     this.currentImage.observe('error', this._onErrorImage.bind(this));
     this.currentImage.observe('abort', this._onAbortImage.bind(this));

From 0bfc2fbb48e64e19a6d660d4b8225bc0f5b3c7ce Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@xwiki.com>
Date: Fri, 18 Oct 2024 13:47:56 +0200
Subject: [PATCH 2/4] XWIKI-22581: FocusCatcher input has no label * Fixed the
 full screen display vertical overflow issue.

---
 .../resources/ApplicationResources.properties |  1 +
 .../uicomponents/widgets/gallery/gallery.css  | 19 ++++++++++--------
 .../uicomponents/widgets/gallery/gallery.js   | 20 ++++++++++++-------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
index 5e39c4ab3554..ab39f17febe6 100644
--- a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
+++ b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
@@ -1396,6 +1396,7 @@ core.widgets.gallery.previousImage=Show previous image
 core.widgets.gallery.nextImage=Show next image
 core.widgets.gallery.maximize=Maximize
 core.widgets.gallery.minimize=Minimize
+core.widgets.gallery.index.description=Press the right and left arrow keys to quickly navigate through the images.
 
 core.widgets.suggest.noResults=No results!
 core.widgets.suggest.showResults=Go to search page\u2026
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
index 0f8b36d4b7bd..4cc0924d51a4 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
@@ -2,6 +2,7 @@
   background-color: black;
   max-width: 100%;
   padding: 10px;
+  border-radius: 7px; /* Same value as @border-radius-base from Flamingo. */
   /* Position relative is required because some of the inner elements have position absolute and the gallery container
   must be their offset parent. */
   position: relative;
@@ -22,16 +23,19 @@
   top: 0;
   z-index: 1001;
   width: 100% !important;
+  border-radius: 0;
 }
 
-.xGallery .image-container {
+.xGallery .currentImage {
   grid-area: 2 / 2 / 3 / 3;
-  display: inline-flex;
-  align-content: center;
-  justify-content: center;
-}
-.xGallery .image-container .currentImage {
+  align-self: center;
+  justify-self: center;
   object-fit: scale-down;
+  max-width: 100%;
+  max-height: 100%;
+  /* Address an issue with the CSS Grid blowing out with large pictures */
+  height: auto;  
+  width: 100%;
 }
 
 /* Transparent buttons that should fill the space they've been given on the grid*/
@@ -48,7 +52,6 @@
   font-family: courier,monospace;
   font-size: 32px;
   font-weight: 100;
-  line-height: 124px;
   text-align: center;
 }
 
@@ -70,7 +73,7 @@
   font-size: smaller;
   line-height: 1;
   grid-area: 3 / 1 / 4 / 2;
-  align-content: end;
+  align-self: end;
 }
 
 .xGallery .loading {
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
index 67415ea0bb2a..9cd242d81732 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
@@ -22,25 +22,31 @@ var XWiki = (function (XWiki) {
 XWiki.Gallery = Class.create({
   initialize : function(container) {
     this.images = this._collectImages(container);
-
     this.container = container.update(
       '<button class="maximize" title="${escapetool.xml($services.localization.render("core.widgets.gallery.maximize"))}"></button>' +
       '<button class="previous" title="${escapetool.xml($services.localization.render("core.widgets.gallery.previousImage"))}">&lt;</button>' +
-      '<span class="focusCatcher image-container" role="group" aria-roledescription="slide" tabindex="0">' +
       '<img class="currentImage" alt="${escapetool.xml($services.localization.render("core.widgets.gallery.currentImage"))}"/>' +
-      '</span>' +
       '<button class="next" title="${escapetool.xml($services.localization.render("core.widgets.gallery.nextImage"))}">&gt;</button>' +
-      '<div class="index">0 / 0</div>'
+      '<div class="index" tabindex="0" title="${escapetool.xml($services.localization.render("core.widgets.gallery.index.description"))}" aria-description="${escapetool.xml($services.localization.render("core.widgets.gallery.index.description"))}">0 / 0</div>'
     );
     this.container.addClassName('xGallery');    
-
-    this.focusCatcher = this.container.down('.focusCatcher');
+    
+    /* Instead of an arbitrary element to catch focus, we use the index.
+    * This index already stores the current image state, might as well be responsible for providing quick controls and
+    * explanations about these quick controls.
+    * Note that wrapping the image in an interactive container to handle this would have been a good solution too.
+    * However, this wrapping caused the image to overflow the CSS grid vertically when in maximized mode. 
+    * Technically I couldn't find a CSS solution to prevent this, so I decided to make do without wrapping. */
+    this.focusCatcher = this.container.down('.index');
     this.focusCatcher.observe('keydown', this._onKeyDown.bindAsEventListener(this));
 
     this.container.down('.previous').observe('click', this._onPreviousImage.bind(this));
     this.container.down('.next').observe('click', this._onNextImage.bind(this));
+    this.container.observe('click', function() {
+      this.focusCatcher.focus();
+    }.bind(this));
 
-    this.currentImage = this.focusCatcher.down('.currentImage');
+    this.currentImage = this.container.down('.currentImage');;
     this.currentImage.observe('load', this._onLoadImage.bind(this));
     this.currentImage.observe('error', this._onErrorImage.bind(this));
     this.currentImage.observe('abort', this._onAbortImage.bind(this));

From e1d9c84cd84942e6892acc4610cafe2a27904b25 Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@xwiki.com>
Date: Fri, 18 Oct 2024 14:07:29 +0200
Subject: [PATCH 3/4] XWIKI-22581: FocusCatcher input has no label * Fixed a
 typo

---
 .../webapp/resources/uicomponents/widgets/gallery/gallery.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
index 9cd242d81732..4ea7ef063bd7 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.js
@@ -46,7 +46,7 @@ XWiki.Gallery = Class.create({
       this.focusCatcher.focus();
     }.bind(this));
 
-    this.currentImage = this.container.down('.currentImage');;
+    this.currentImage = this.container.down('.currentImage');
     this.currentImage.observe('load', this._onLoadImage.bind(this));
     this.currentImage.observe('error', this._onErrorImage.bind(this));
     this.currentImage.observe('abort', this._onAbortImage.bind(this));

From 471d22505b5e675d7328dafd3062aaa90b823e49 Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@xwiki.com>
Date: Fri, 18 Oct 2024 14:13:03 +0200
Subject: [PATCH 4/4] XWIKI-22581: FocusCatcher input has no label * Cleanup

---
 .../webapp/resources/uicomponents/widgets/gallery/gallery.css  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
index 4cc0924d51a4..4fcc123ac955 100644
--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/gallery/gallery.css
@@ -33,9 +33,6 @@
   object-fit: scale-down;
   max-width: 100%;
   max-height: 100%;
-  /* Address an issue with the CSS Grid blowing out with large pictures */
-  height: auto;  
-  width: 100%;
 }
 
 /* Transparent buttons that should fill the space they've been given on the grid*/