Fix image buttons.

UniversalViewer · Aug 25, 2020 · bf9f073 · bf9f073
1 parent 187ee2a
commit bf9f073
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 65 deletions.
diff --git a/src/modules/uv-pagingheaderpanel-module/PagingHeaderPanel.ts b/src/modules/uv-pagingheaderpanel-module/PagingHeaderPanel.ts
@@ -76,14 +76,16 @@ export class PagingHeaderPanel extends HeaderPanel {
 
     this.$firstButton = $(`
           <button class="btn imageBtn first" tabindex="0" title="${this.content.first}">
-            <i class="uv-icon-first" aria-hidden="true"></i><span>${this.content.first}</span>
+            <i class="uv-icon-first" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.first}</span>
           </button>
         `);
     this.$prevOptions.append(this.$firstButton);
 
     this.$prevButton = $(`
           <button class="btn imageBtn prev" tabindex="0" title="${this.content.previous}">
-            <i class="uv-icon-prev" aria-hidden="true"></i><span>${this.content.previous}</span>
+            <i class="uv-icon-prev" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.previous}</span>
           </button>
         `);
     this.$prevOptions.append(this.$prevButton);
@@ -214,14 +216,16 @@ export class PagingHeaderPanel extends HeaderPanel {
 
     this.$nextButton = $(`
           <button class="btn imageBtn next" tabindex="0" title="${this.content.next}">
-            <i class="uv-icon-next" aria-hidden="true"></i><span>${this.content.next}</span>
+            <i class="uv-icon-next" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.next}</span>
           </button>
         `);
     this.$nextOptions.append(this.$nextButton);
 
     this.$lastButton = $(`
           <button class="btn imageBtn last" tabindex="0" title="${this.content.last}">
-            <i class="uv-icon-last" aria-hidden="true"></i><span>${this.content.last}</span>
+            <i class="uv-icon-last" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.last}</span>
           </button>
         `);
     this.$nextOptions.append(this.$lastButton);
@@ -244,8 +248,9 @@ export class PagingHeaderPanel extends HeaderPanel {
     }
 
     this.$galleryButton = $(`
-          <button class="btn imageBtn gallery" title="${this.content.gallery}" tabindex="0">
-            <i class="uv-icon-gallery" aria-hidden="true"></i>${this.content.gallery}
+          <button class="btn imageBtn gallery" title="${this.content.gallery}">
+            <i class="uv-icon-gallery" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.gallery}</span>
           </button>
         `);
     this.$rightOptions.prepend(this.$galleryButton);
@@ -254,14 +259,16 @@ export class PagingHeaderPanel extends HeaderPanel {
     this.$rightOptions.prepend(this.$pagingToggleButtons);
 
     this.$oneUpButton = $(`
-          <button class="btn imageBtn one-up" title="${this.content.oneUp}" tabindex="0">
-            <i class="uv-icon-one-up" aria-hidden="true"></i>${this.content.oneUp}
+          <button class="btn imageBtn one-up" title="${this.content.oneUp}">
+            <i class="uv-icon-one-up" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.oneUp}</span>
           </button>`);
     this.$pagingToggleButtons.append(this.$oneUpButton);
 
     this.$twoUpButton = $(`
-          <button class="btn imageBtn two-up" title="${this.content.twoUp}" tabindex="0">
-            <i class="uv-icon-two-up" aria-hidden="true"></i>${this.content.twoUp}
+          <button class="btn imageBtn two-up" title="${this.content.twoUp}">
+            <i class="uv-icon-two-up" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.twoUp}</span>
           </button>
         `);
     this.$pagingToggleButtons.append(this.$twoUpButton);

diff --git a/src/modules/uv-shared-module/FooterPanel.ts b/src/modules/uv-shared-module/FooterPanel.ts
@@ -46,57 +46,65 @@ export class FooterPanel extends BaseView {
     this.$element.append(this.$options);
 
     this.$feedbackButton = $(`
-          <button class="feedback btn imageBtn" title="${this.content.feedback}" tabindex="0">
-            <i class="uv-icon uv-icon-feedback" aria-hidden="true"></i>${this.content.feedback}
+          <button class="feedback btn imageBtn" title="${this.content.feedback}">
+            <i class="uv-icon uv-icon-feedback" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.feedback}</span>
           </button>
         `);
     this.$options.prepend(this.$feedbackButton);
 
     this.$openButton = $(`
-          <button class="open btn imageBtn" title="${this.content.open}" tabindex="0">
-            <i class="uv-icon-open" aria-hidden="true"></i>${this.content.open}
+          <button class="open btn imageBtn" title="${this.content.open}">
+            <i class="uv-icon-open" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.open}</span>
           </button>
         `);
     this.$options.prepend(this.$openButton);
 
     this.$bookmarkButton = $(`
-          <button class="bookmark btn imageBtn" title="${this.content.bookmark}" tabindex="0">
-            <i class="uv-icon uv-icon-bookmark" aria-hidden="true"></i>${this.content.bookmark}
+          <button class="bookmark btn imageBtn" title="${this.content.bookmark}">
+            <i class="uv-icon uv-icon-bookmark" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.bookmark}</span>
           </button>
         `);
     this.$options.prepend(this.$bookmarkButton);
 
     this.$shareButton = $(`
-          <button class="share btn imageBtn" title="${this.content.share}" tabindex="0">
-            <i class="uv-icon uv-icon-share" aria-hidden="true"></i>${this.content.share}
+          <button class="share btn imageBtn" title="${this.content.share}">
+            <i class="uv-icon uv-icon-share" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.share}</span>
           </button>
         `);
     this.$options.append(this.$shareButton);
 
     this.$embedButton = $(`
-          <button class="embed btn imageBtn" title="${this.content.embed}" tabindex="0">
-            <i class="uv-icon uv-icon-embed" aria-hidden="true"></i>${this.content.embed}
+          <button class="embed btn imageBtn" title="${this.content.embed}">
+            <i class="uv-icon uv-icon-embed" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.embed}</span>
           </button>
         `);
     this.$options.append(this.$embedButton);
 
     this.$downloadButton = $(`
-          <button class="download btn imageBtn" title="${this.content.download}" tabindex="0">
-            <i class="uv-icon uv-icon-download" aria-hidden="true"></i>${this.content.download}
+          <button class="download btn imageBtn" title="${this.content.download}">
+            <i class="uv-icon uv-icon-download" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.download}</span>
           </button>
         `);
     this.$options.prepend(this.$downloadButton);
 
     this.$moreInfoButton = $(`
-          <button class="moreInfo btn imageBtn" title="${this.content.moreInfo}" tabindex="0">
-            <i class="uv-icon uv-icon-more-info" aria-hidden="true"></i>${this.content.moreInfo}
+          <button class="moreInfo btn imageBtn" title="${this.content.moreInfo}">
+            <i class="uv-icon uv-icon-more-info" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.moreInfo}</span>
           </button>
         `);
     this.$options.prepend(this.$moreInfoButton);
 
     this.$fullScreenBtn = $(`
-          <button class="fullScreen btn imageBtn" title="${this.content.fullScreen}" tabindex="0">
-            <i class="uv-icon uv-icon-fullscreen" aria-hidden="true"></i>${this.content.fullScreen}
+          <button class="fullScreen btn imageBtn" title="${this.content.fullScreen}">
+            <i class="uv-icon uv-icon-fullscreen" aria-hidden="true"></i>
+            <span class="sr-only">${this.content.fullScreen}</span>
           </button>
         `);
     this.$options.append(this.$fullScreenBtn);

diff --git a/src/modules/uv-shared-module/HeaderPanel.ts b/src/modules/uv-shared-module/HeaderPanel.ts
@@ -54,7 +54,7 @@ export class HeaderPanel extends BaseView {
 
     this.$settingsButton = $(`
           <button class="btn imageBtn settings" tabindex="0" title="${this.content.settings}">
-            <i class="uv-icon-settings" aria-hidden="true"></i>${this.content.settings}
+            <i class="uv-icon-settings" aria-hidden="true"></i>
           </button>
         `);
     this.$settingsButton.attr("title", this.content.settings);

diff --git a/src/modules/uv-shared-module/css/header-panel.less b/src/modules/uv-shared-module/css/header-panel.less
@@ -10,10 +10,6 @@
                 height: 30px;
                 width: 30px;
             }
-
-            span {
-                .sr-only();
-            }
         }
 
         &.showInformation {

diff --git a/src/modules/uv-shared-module/css/mixins.less b/src/modules/uv-shared-module/css/mixins.less
@@ -80,32 +80,6 @@
     border: 0;
 }
 
-// Screen reader only text hiding
-// https://tailwindcss.com/docs/screen-readers/
-.sr-only() {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-.not-sr-only() {
-    position: static;
-    width: auto;
-    height: auto;
-    padding: 0;
-    margin: 0;
-    overflow: visible;
-    clip: auto;
-    white-space: normal;
-}
-
-
-
 // CSS3 PROPERTIES
 // --------------------------------------------------
 

diff --git a/src/modules/uv-shared-module/css/scaffolding.less b/src/modules/uv-shared-module/css/scaffolding.less
@@ -129,19 +129,27 @@
     }
 
 
-    // Only display content to screen readers
-    //
-    // See: http://a11yproject.com/posts/how-to-hide-content/
-
+    // Screen reader only text hiding
+    // https://tailwindcss.com/docs/screen-readers/
     .sr-only {
         position: absolute;
         width: 1px;
         height: 1px;
-        margin: -1px;
         padding: 0;
+        margin: -1px;
         overflow: hidden;
-        clip: rect(0 0 0 0);
-        border: 0;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+    }
+    .not-sr-only {
+        position: static;
+        width: auto;
+        height: auto;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
     }
-
 }