Improve info panel focusability (fixes #1069) (#1171)

* Adds a tabindex to the right info panel's main element so it can be focused regardless of whether it has focus-able content

* check for scrolling before setting/unsetting tabindex and aria label. make elements articles so they'll be readable by screenreaders.

Author: LlGC-jop

src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts

@@ -49,7 +49,7 @@ export class MoreInfoDialogue extends Dialogue<
     );
     this.$content.append(this.$title);
 
-    this.$metadata = $('<div class="iiif-metadata-component"></div>');
+    this.$metadata = $('<article class="iiif-metadata-component"></article>');
     this.$content.append(this.$metadata);
 
     this.metadataComponent = new MetadataComponent({
@@ -98,5 +98,18 @@ export class MoreInfoDialogue extends Dialogue<
 
   resize(): void {
     this.setDockedPosition();
+
+    // always put tabindex on, so the metadata is focusable, 
+    // just in case there's something wrong with the height
+    // comparison below
+    this.$metadata.attr('tabindex', 0);
+    this.$metadata.attr('aria-label', this.config.content.title);
+
+    // if metadata's first group's height is lte than metadata (200px fixed I think), 
+    // there's no scroll happening, so no focus needed, and no aria label either
+    if(this.$metadata.find('.groups').first().height() <= this.$metadata.height()) {
+      this.$metadata.removeAttr('tabindex');
+      this.$metadata.removeAttr('aria-label');
+    }
   }
 }

src/content-handlers/iiif/modules/uv-moreinforightpanel-module/MoreInfoRightPanel.ts

@@ -33,7 +33,7 @@ export class MoreInfoRightPanel extends RightPanel<MoreInfoRightPanelConfig> {
 
     this.setTitle(this.config.content.title);
 
-    this.$metadata = $('<div class="iiif-metadata-component"></div>');
+    this.$metadata = $('<article class="iiif-metadata-component"></article>');
     this.$main.append(this.$metadata);
 
     this.metadataComponent = new MetadataComponent({
@@ -141,5 +141,18 @@ export class MoreInfoRightPanel extends RightPanel<MoreInfoRightPanelConfig> {
     this.$main.height(
       this.$element.height() - this.$top.height() - this.$main.verticalMargins()
     );
+
+    // always put tabindex on, so the main is focusable, 
+    // just in case there's something wrong with the height
+    // comparison below
+    this.$main.attr('tabindex', 0);
+    this.$main.attr('aria-label', this.config.content.title);
+
+    // if metadata's height lte main's, no scroll, so no focus needed
+    // and no aria label either
+    if(this.$metadata.height() <= this.$main.height()) {
+      this.$main.removeAttr('tabindex');
+      this.$main.removeAttr('aria-label');
+    }
   }
 }