Fix i18n, a11y and scrolling

CHANGES

@@ -2,6 +2,13 @@
 Changes
 =======
 
+1.0.2 (*2021-07-13*)
+====================
+
+- Fix scroll computation
+- Translation of ignored elements
+- Improve accessibility
+
 1.0.1 (*2021-06-03*)
 ====================
 

setup.py

@@ -7,7 +7,7 @@ with open("README.rst", "r") as fh:
 
 setup(
     name="sphinx_galleria",
-    version="1.0.1",
+    version="1.0.2",
     url="https://procrastinator.nerv-project.eu/nerv-project/sphinx_galleria",
     license="EUPL 1.2",
     author="Kujiu",

sphinx_galleria/__init__.py

@@ -14,7 +14,7 @@ from PIL import Image
 from . import directive
 from . import collector
 
-__version_info__ = (1, 0, 1)
+__version_info__ = (1, 0, 2)
 __version__ = '.'.join([str(val) for val in __version_info__])
 
 

sphinx_galleria/directive.py

@@ -7,6 +7,7 @@ Galleria directive
 
 import uuid
 import json
+from typing import Sequence
 
 from docutils import nodes
 from docutils.parsers.rst import Directive
@@ -19,6 +20,7 @@ from sphinx.writers.text import TextTranslator
 from sphinx.writers.manpage import ManualPageTranslator
 from sphinx.util.osutil import relative_uri
 from sphinx.locale import _
+from sphinx.addnodes import translatable
 
 
 def length_or_percentage_or_unitless(argument: str):
@@ -32,8 +34,33 @@ def length_or_percentage_or_unitless(argument: str):
     return directives.get_measure(argument, length_units)
 
 
-class galleria(nodes.General, nodes.Element):
+class galleria(nodes.General, nodes.Element, translatable):
-    pass
+    def preserve_original_messages(self) -> None:
+        for image in self.get('images', []):
+            if image.get('title'):
+                image['rawtitle'] = image['title']
+            if image.get('alt'):
+                image['rawalt'] = image['alt']
+
+    def extract_original_messages(self) -> Sequence[str]:
+        messages = []
+        for image in self.get('images', []):
+            if image.get('rawalt'):
+                messages.append(image['rawalt'])
+            if image.get('rawtitle'):
+                messages.append(image['rawtitle'])
+
+        return messages
+
+    def apply_translated_message(
+            self, original_message: str,
+            translated_message: str) -> None:
+        for image in self.get('images', []):
+            if image.get('rawtitle') == original_message:
+                image['title'] = translated_message
+
+            if image.get('rawalt') == original_message:
+                image['alt'] = translated_message
 
 
 def html_visit_galleria(self: HTMLTranslator, node: galleria) -> None:

sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css

@@ -313,6 +313,8 @@
 .sphinxgalleria-core ul.thumbnails li img {
     margin: 0.5rem;
     cursor: pointer;
-    object-fit: cover;
+    object-fit: contain;
     max-width: unset;
+    width: auto;
+    height: auto;
 }

sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs

@@ -18,13 +18,14 @@ export class SphinxGalleria {
         self.node_caption = document.createElement('figcaption');
         self.node_alt = document.createElement('p');
         self.node_alt.setAttribute('id', self.target+'-'+'alt');
-        self.node_image.setAttribute('aria-describedby', self.target+'-'+'alt');
+        self.node_image.setAttribute('aria-labelledby', self.target+'-'+'alt');
         self.node_thumbnails = document.createElement('ul');
         self.node_thumbnails.classList.add('thumbnails');
         self.node_dialog = document.createElement('dialog');
         self.node_mask = document.createElement('div');
         self.node_mask.classList.add('mask');
         self.node_mask.hidden = true;
+        self.node_mask.setAttribute('aria-hidden', true);
         var node_submask = document.createElement('div');
         node_submask.classList.add('submask');
 
@@ -41,7 +42,7 @@ export class SphinxGalleria {
         self.dialog_button_close_icon.setAttribute('aria-label', self.options.label_close);
 
         self.dialog_image = document.createElement('img');
-        self.dialog_image.setAttribute('aria-describedby', self.target+'-'+'alt');
+        self.dialog_image.setAttribute('aria-labelledby', self.target+'-'+'alt');
 
         self.dialog_title = document.createElement('h1');
         var dialog_header = document.createElement('header');
@@ -320,9 +321,12 @@ export class SphinxGalleria {
                 self.node_slider.value = idx + 1;
             }
             var current_img = current.nextSibling.childNodes[0];
-            current_img.scrollIntoView({
+            var offset = current_img.offsetLeft - self.node_thumbnails.offsetLeft;
+            offset -= self.node_thumbnails.offsetWidth / 2;
+            offset += current_img.offsetWidth / 2;
+            self.node_thumbnails.scrollTo({
+                left: offset,
                 behavior: 'smooth',
-                inline: 'center',
             });
         }
 
@@ -331,17 +335,20 @@ export class SphinxGalleria {
             self.node_caption.hidden = false;
             self.dialog_title.innerHTML = title;
             self.dialog_title.hidden = false;
+            self.dialog_title.removeAttribute('aria-hidden');
             hide_caption = false;
         } else if(title) {
             self.node_caption.innerHTML = '';
             self.node_caption.hidden = true;
             self.dialog_title.innerHTML = title;
             self.dialog_title.hidden = false;
+            self.dialog_title.removeAttribute('aria-hidden');
         } else {
             self.node_caption.innerHTML = '';
             self.node_caption.hidden = true;
             self.dialog_title.innerHTML = '';
             self.dialog_title.hidden = true;
+            self.dialog_title.setAttribute('aria-hidden', true);
         }
 
         if(!hide_alt && alt) {
@@ -376,6 +383,7 @@ export class SphinxGalleria {
 
     showModal() {
         this.node_mask.hidden = false;
+        this.node_mask.removeAttribute('aria-hidden');
         if(this.node_dialog.showModal) {
             this.node_dialog.showModal();
         } else {
@@ -383,6 +391,7 @@ export class SphinxGalleria {
             this.node_dialog.setAttribute('open', true);
             this.node_dialog.setAttribute('aria-modal', true);
             this.node_dialog.hidden = false;
+            this.node_dialog.removeAttribute('aria-hidden');
         }
     }
 
@@ -394,7 +403,9 @@ export class SphinxGalleria {
             this.node_dialog.removeAttribute('open');
             this.node_dialog.removeAttribute('aria-modal');
             this.node_dialog.hidden = true;
+            this.node_dialog.setAttribute('aria-hidden', true);
         }
         this.node_mask.hidden = true;
+        this.node_mask.setAttribute('aria-hidden', true);
     }
 }