Added dialog titles in the Windows and Dialogs and Sync Clippings set…

…tings dialogs in the extension preferences page (part of issue #450)
aecreations · Aug 1, 2024 · ab94ea6 · ab94ea6
1 parent df76f35
commit ab94ea6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 29 deletions.
diff --git a/wx-src/pages/options.css b/wx-src/pages/options.css
@@ -525,7 +525,7 @@ body[data-locale="fr"] #skip-backup-label {
 
 .lightbox .dlg-subhead {
     font-size: 15px;
-    font-weight: bold;
+    font-weight: 600;
 }
 
 .lightbox .dlg-subhead:first-of-type {
@@ -579,7 +579,7 @@ body[data-locale="fr"] #skip-backup-label {
 #wnds-dlgs-opts-dlg {
     top: 160px;
     --width: 500px;
-    --height: 225px;
+    --height: 234px;
 }
 
 body[data-locale="fr"] #wnds-dlgs-opts-dlg {
@@ -595,8 +595,8 @@ body[data-locale="uk"] #wnds-dlgs-opts-dlg {
     --width: 560px;
 }
 
-#wnds-dlgs-opts-dlg fieldset {
-    padding-bottom: 14px;
+#wnds-dlgs-opts-dlg .dlg-content {
+    padding-bottom: 12px;
     border-bottom: 1px solid var(--color-fieldset-border);
 }
 
@@ -619,7 +619,7 @@ body[data-os="mac"] #wnds-dlgs-opts-dlg #wnds-dlgs-opts-exp-warn .warning-icon {
 }
 
 #wnds-dlgs-opts-dlg #wnds-dlgs-opts-exp-warn-msg {
-    height: 82px;
+    height: 64px;
     margin: 8px 0 12px 38px;
     padding: 12px;
     border-radius: 4px;
@@ -698,7 +698,7 @@ body[data-locale|="es"] #wnds-dlgs-opts-dlg #clpmgr-save-wnd-pos-label {
 #sync-clippings-dlg {
     top: 128px;
     --width: 530px;
-    --height: 270px;
+    --height: 312px;
 }
 
 body[data-os="mac"] #sync-clippings-dlg {
@@ -719,7 +719,7 @@ body[data-locale="uk"] #sync-clippings-dlg {
 }
 
 #sync-clippings-dlg.expanded {
-    height: 300px;
+    height: 334px;
 }
 
 #sync-clippings-dlg fieldset {
@@ -741,6 +741,7 @@ body[data-locale="uk"] #sync-clippings-dlg {
     display: none;
     font-size: 13px;
     margin-top: 2px;
+    margin-bottom: 4px;
     margin-left: 27px;
 }
 
@@ -793,6 +794,7 @@ body[data-os="mac"] #sync-clippings-dlg #sync-cxn-error .msgbox-icon {
 #wnds-dlgs-opts-dlg #wnds-dlgs-opts-exp-warn-msg,
 #request-native-app-conxn-perm-dlg .error-msg,
 #sync-clippings-dlg #sync-cxn-error .error-msg {
+    line-height: 1.23;
     background-color: #fbfb77;
     color: black;
 }

diff --git a/wx-src/pages/options.html b/wx-src/pages/options.html
@@ -184,27 +184,24 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
 
     <!-- Dialog boxes -->
     <div id="lightbox-bkgrd-ovl" class="lightbox-bkgrd"></div>
-    <div id="wnds-dlgs-opts-dlg" class="lightbox" role="dialog">
+    <div id="wnds-dlgs-opts-dlg" class="lightbox" role="dialog" aria-labelledby="wnds-dlgs-opts-dlg-hdg">
       <div class="dlg-content">
-        <fieldset>
-          <legend data-i18n="wndsDlgsOptsTitle"></legend>
-
-	  <div id="wnds-dlgs-opts-exp-warn">
-            <div class="warning-icon"></div>
-	    <div id="wnds-dlgs-opts-exp-warn-msg"></div>
-	  </div>
+        <p id="wnds-dlgs-opts-dlg-hdg" class="dlg-subhead" role="heading" data-i18n="wndsDlgsOptsTitle"></p>
+	<div id="wnds-dlgs-opts-exp-warn">
+	  <div class="warning-icon"></div>
+	  <div id="wnds-dlgs-opts-exp-warn-msg"></div>
+	</div>
 
-          <div class="row browser-style">
-            <input type="checkbox" id="auto-pos-wnds"/><label for="auto-pos-wnds" data-i18n="autoPosWnds"></label>
-          </div>
-          <div class="row browser-style">
-            <input type="checkbox" id="clpmgr-save-wnd-pos"/><label id="clpmgr-save-wnd-pos-label" for="clpmgr-save-wnd-pos" data-i18n="clpMgrSaveWndPos"></label>
-          </div>
-          <div class="row browser-style">
-            <button id="reset-clpmgr-wnd-pos" class="indent dlg-btn" data-i18n="btnReset"></button>
-            <img id="reset-clpmgr-wnd-pos-ack" src="../img/success.svg"/>
-          </div>
-        </fieldset>
+	<div class="row browser-style">
+	  <input type="checkbox" id="auto-pos-wnds"/><label for="auto-pos-wnds" data-i18n="autoPosWnds"></label>
+	</div>
+	<div class="row browser-style">
+	  <input type="checkbox" id="clpmgr-save-wnd-pos"/><label id="clpmgr-save-wnd-pos-label" for="clpmgr-save-wnd-pos" data-i18n="clpMgrSaveWndPos"></label>
+	</div>
+	<div class="row browser-style">
+	  <button id="reset-clpmgr-wnd-pos" class="indent dlg-btn" data-i18n="btnReset"></button>
+	  <img id="reset-clpmgr-wnd-pos-ack" src="../img/success.svg"/>
+	</div>
       </div>
       <div class="dlg-btns">
 	<button class="dlg-accept default" data-i18n="btnOK"></button>
@@ -252,9 +249,9 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
       </div>
     </div>
 
-    <div id="sync-clippings-dlg" class="lightbox" role="dialog">
+    <div id="sync-clippings-dlg" class="lightbox" role="dialog" aria-labelledby="sync-clippings-dlg-hdg">
       <div class="dlg-content">
-	<!-- TO DO: Put dialog title here -->
+	<p id="sync-clippings-dlg-hdg" class="dlg-subhead" role="heading" data-i18n="syncClippings"></p>
         <div id="sync-connection-check" class="deck">
 	  <p class="label" data-i18n="syncConnect"><p>
 	  <progress></progress>

diff --git a/wx-src/pages/options.js b/wx-src/pages/options.js
@@ -728,7 +728,7 @@ function initDialogs()
   {
     if (gOS != "win") {
       let os = gOS == "mac" ? browser.i18n.getMessage("macOS") : capitalize(gOS);
-      $("#wnds-dlgs-opts-dlg").css({height: "320px"});
+      $("#wnds-dlgs-opts-dlg").css({height: "308px"});
       $("#wnds-dlgs-opts-exp-warn-msg").text(browser.i18n.getMessage("wndsDlgsOptsExpWarn", os));
       $("#wnds-dlgs-opts-exp-warn").show();
     }