From e9554417fadcde76932950cbd15694ba6551ff2d Mon Sep 17 00:00:00 2001
From: Bohung <bohung@rulingcom.com>
Date: Thu, 17 Jun 2021 17:48:05 +0800
Subject: [PATCH] Edit for accessibility

---
 app/assets/javascripts/archive/pdf/viewer.css | 32 +++++++++----------
 app/views/archives/_viewer.html.erb           | 15 +++++----
 app/views/archives/download_file.html.erb     |  2 +-
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/archive/pdf/viewer.css b/app/assets/javascripts/archive/pdf/viewer.css
index f25b2e0..77ae0d8 100644
--- a/app/assets/javascripts/archive/pdf/viewer.css
+++ b/app/assets/javascripts/archive/pdf/viewer.css
@@ -118,7 +118,7 @@
   background-color: rgba(0, 54, 255, 0.13);
   border: 1px solid transparent;
   box-sizing: border-box;
-  font-size: 9px;
+  font-size: 0.5625em;
   height: 100%;
   margin: 0;
   padding: 0 3px;
@@ -136,7 +136,7 @@
 
 .annotationLayer .textWidgetAnnotation textarea {
   font: message-box;
-  font-size: 9px;
+  font-size: 0.5625em;
   resize: none;
 }
 
@@ -239,12 +239,12 @@
   margin-left: 5px;
   cursor: pointer;
   font: message-box;
-  font-size: 9px;
+  font-size: 0.5625em;
   word-wrap: break-word;
 }
 
 .annotationLayer .popup > * {
-  font-size: 9px;
+  font-size: 0.5625em;
 }
 
 .annotationLayer .popup h1 {
@@ -421,7 +421,7 @@ html {
   height: 100%;
   width: 100%;
   /* Font size is needed to make the activity bar the correct size. */
-  font-size: 10px;
+  font-size: 0.625em;
 }
 
 body {
@@ -812,7 +812,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   padding: 0px 6px 0px 6px;
   margin: 4px 2px 4px 2px;
   color: rgba(217, 217, 217, 1);
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: 14px;
   text-align: left;
   cursor: default;
@@ -1121,7 +1121,7 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 2px;
   color: rgba(255, 255, 255, 0.8);
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: 14px;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1215,7 +1215,7 @@ html[dir='rtl'] .dropdownToolbarButton::after {
 .dropdownToolbarButton > select {
   width: 162px;
   height: 23px;
-  font-size: 12px;
+  font-size: 0.75em;
   color: rgba(242, 242, 242, 1);
   margin: 0;
   padding: 3px 2px 2px;
@@ -1535,7 +1535,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset,
               0 1px 0 rgba(255, 255, 255, 0.05);
   color: rgba(242, 242, 242, 1);
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: 14px;
   outline-style: none;
 }
@@ -1581,7 +1581,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 2px;
   color: rgba(217, 217, 217, 1);
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: 14px;
   text-align: left;
   -webkit-user-select: none;
@@ -1718,7 +1718,7 @@ html[dir='rtl'] .outlineItem > .outlineItems {
   margin-bottom: 1px;
   border-radius: 2px;
   color: rgba(255, 255, 255, 0.8);
-  font-size: 13px;
+  font-size: 0.8125em;
   line-height: 15px;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1811,7 +1811,7 @@ html[dir='rtl'] .outlineItemToggler::before {
 }
 
 .noResults {
-  font-size: 12px;
+  font-size: 0.75em;
   color: rgba(255, 255, 255, 0.8);
   font-style: italic;
   cursor: default;
@@ -1887,7 +1887,7 @@ html[dir='rtl'] .outlineItemToggler::before {
   padding: 15px;
   border-spacing: 4px;
   color: rgba(217, 217, 217, 1);
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: 14px;
   background-color: rgba(71, 71, 71, 1); /* fallback */
   background-image: url(images/texture.png),
@@ -1981,7 +1981,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   top: 32px;
   right: 0;
   bottom: 0;
-  font-size: 10px;
+  font-size: 0.625em;
   padding: 0;
   width: 300px;
 }
@@ -2014,14 +2014,14 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 }
 #PDFBug .stats {
   font-family: courier;
-  font-size: 10px;
+  font-size: 0.625em;
   white-space: pre;
 }
 #PDFBug .stats .title {
     font-weight: bold;
 }
 #PDFBug table {
-  font-size: 10px;
+  font-size: 0.625em;
 }
 
 #viewer.textLayer-visible .textLayer {
diff --git a/app/views/archives/_viewer.html.erb b/app/views/archives/_viewer.html.erb
index c913b68..851d742 100644
--- a/app/views/archives/_viewer.html.erb
+++ b/app/views/archives/_viewer.html.erb
@@ -38,6 +38,7 @@ See https://github.com/adobe-type-tools/cmap-resources
   </head>
 
   <body tabindex="1" class="loadingInProgress" data-url="<%=@url%>">
+    <h1 style="display: none;"><%=@filename%></h1>
     <div id="outerContainer">
 
       <div id="sidebarContainer">
@@ -68,6 +69,7 @@ See https://github.com/adobe-type-tools/cmap-resources
       <div id="mainContainer">
         <div class="findbar hidden doorHanger" id="findbar">
           <div id="findbarInputContainer">
+            <label style="background: transparent;border: none;display: none;" for="findInput">Find in document…</label>
             <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="find_input">
             <div class="splitToolbarButton">
               <button id="findPrevious" class="toolbarButton findPrevious" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
@@ -81,13 +83,13 @@ See https://github.com/adobe-type-tools/cmap-resources
           </div>
 
           <div id="findbarOptionsOneContainer">
-            <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
+            <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94" title="Highlight all">
             <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
-            <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
+            <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95" title="Match case">
             <label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
           </div>
           <div id="findbarOptionsTwoContainer">
-            <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="96">
+            <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="96" title="Whole words">
             <label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole words</label>
             <span id="findResultsCount" class="toolbarLabel hidden"></span>
           </div>
@@ -198,6 +200,7 @@ See https://github.com/adobe-type-tools/cmap-resources
                     <span data-l10n-id="next_label">Next</span>
                   </button>
                 </div>
+                <label style="display: none;" for="pageNumber">PageNumber</label>
                 <input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page">
                 <span id="numPages" class="toolbarLabel"></span>
               </div>
@@ -296,7 +299,7 @@ See https://github.com/adobe-type-tools/cmap-resources
             </button>
           </div>
           <div class="clearBoth"></div>
-          <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
+          <textarea id="errorMoreInfo" hidden='true' readonly="readonly" title="Error More Info"></textarea>
         </div>
       </div> <!-- mainContainer -->
 
@@ -304,10 +307,10 @@ See https://github.com/adobe-type-tools/cmap-resources
         <div id="passwordOverlay" class="container hidden">
           <div class="dialog">
             <div class="row">
-              <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
+              <label id="passwordText" data-l10n-id="password_label" for="password">Enter the password to open this PDF file:</label>
             </div>
             <div class="row">
-              <input type="password" id="password" class="toolbarField">
+              <input type="password" id="password" class="toolbarField" title="PDF password">
             </div>
             <div class="buttonRow">
               <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
diff --git a/app/views/archives/download_file.html.erb b/app/views/archives/download_file.html.erb
index 8e99379..881e0c1 100644
--- a/app/views/archives/download_file.html.erb
+++ b/app/views/archives/download_file.html.erb
@@ -8,7 +8,7 @@
     <link href="/assets/archive/download_file.css" rel="stylesheet" media="all">
 </head>
 <body>
-    <h3 style="display: none;"><%=@filename%></h3>
+    <h1 style="display: none;"><%=@filename%></h1>
     <% if @ext != "png" && @ext != "jpg" && @ext != "bmp" %>
         <object data="<%=@url%>" height="100%" type="application/<%=@ext%>" width="100%">
             <iframe height="100%" src="<%=@url%>" title="<%=@filename%>" width="100%"></iframe>