wip #7779

diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index 1ea2b587c0544b849a8e88e78a909614308f164a..e7352bfe1aaff9ad8be1d6a2930f0530e7b82bfd 100644 (file)
--- a/js/libs/fluidbook/fluidbook.accessibility.js
+++ b/js/libs/fluidbook/fluidbook.accessibility.js
@@ -197,7 +197,8 @@ FluidbookAccessibility.prototype = {
             },
         ];
 
-        var t = '<div class="content">';
+        var t = '<div class="caption "><a href="#/closeview" role="button" aria-label="Close" aria-keyshortcuts="Escape" class="button back">'+ getSpriteIcon('interface-close') +'</div>'
+        t += '<div class="content">';
         t += '<header>';
         t += '<h1>' + this.fluidbook.l10n.__('A user experience optimized for accessibility') + '</h1>';
         t += '<p>' + this.fluidbook.l10n.__('This interactive Fluidbook has been thoughtfully designed to support accessibility and inclusivity. We are actively working towards compliance with the WCAG 2.2 accessibility standards, aiming to meet both Level A and AA criteria.') + '</p>';

diff --git a/style/accessibility.less b/style/accessibility.less
index c3d8f467ad6e14577a45983bf620d9a4a9f580e8..4e00dd332d98899990b85c31e8ac74bf4f6ff9cd 100644 (file)
--- a/style/accessibility.less
+++ b/style/accessibility.less
@@ -77,13 +77,57 @@
     left: 50% !important;
     transform: translateX(-50%) !important;
   }
+
+  @media @smartphone {
+    width: 100% !important;
+    max-height: 100% !important;
+    top: 0 !important;
+  }
+
+  .caption {
+    background-color: #fff;
+
+    a.back, a.back:hover, a.back:focus {
+      background-color: #000;
+    }
+  }
+
   .content {
     background-color: #fff;
     color: #000;
     text-align: left;
     padding: 65px;
+
     @media @small {
-      padding: 35px;
+      padding: 15px;
+    }
+
+    @media @smartphone {
+      max-height: calc(100vh - 40px) !important;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: #000;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #fff;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    scrollbar-color: #000 #fff;
+
+    .ps__rail-y {
+      background-color: #fff;
+      opacity: 1;
+
+      .ps__thumb-y {
+        background-color: #000;
+        width: 11px;
+      }
     }
 
     section {
@@ -113,7 +157,7 @@
         margin-bottom: 64px;
 
         @media @small {
-          font-size: 60px;
+          font-size: 50px;
           word-break: break-word;
         }
       }

diff --git a/style/variables.less b/style/variables.less
index c448c9a4c8df713c837173ed96aa693203c6edd2..1d34577902c1398bba954fb21b0a45edf8d366fe 100644 (file)
--- a/style/variables.less
+++ b/style/variables.less
@@ -1,5 +1,6 @@
 @import "book-variables";
 
+@smartphone: ~"screen and (max-width: 334px)";
 @small: ~"screen and (max-width: 640px)";
 @medium: ~"screen and (max-width: 800px)";
 @large: ~"screen and (min-width: 1280px)";
\ No newline at end of file