From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 23 Dec 2025 11:16:14 +0000 (+0100)
Subject: wip #7779
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1486a74742bde475c70c8079723d6ce734ee8c92;p=fluidbook-html5.git

wip #7779
---

diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index 1ea2b587..e7352bfe 100644
--- 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 c3d8f467..4e00dd33 100644
--- 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 c448c9a4..1d345779 100644
--- 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