5.3: accessibility and css polish

src/modules/pageRender/elements.js

@@ -10,6 +10,8 @@ export function switcher(obj) {
             items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
         }
     }
+
+    if (obj.noParent) return `<div class="switches">${items}</div>`;
     return `<div id="${obj.name}-switcher" class="switch-container">
             ${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
             <div class="switches">${items}</div>

src/modules/pageRender/onDemand.js

@@ -7,9 +7,9 @@ export function changelogHistory() { // blockId 0
     let history = changelogManager("history");
     let render = ``;
     
-    let historyLen = history.length
+    let historyLen = history.length;
     for (let i in history) {
-        let separator = (i !== 0 && i !== historyLen) ? '<div class="separator"></div>' : ''
+        let separator = (i !== 0 && i !== historyLen) ? '<div class="separator"></div>' : '';
         render += `${separator}${history[i]["banner"] ? `<div class="changelog-banner"><img class="changelog-img" src="${history[i]["banner"]}" onerror="this.style.display='none'"></img></div>` : ''}<div id="popup-desc" class="changelog-subtitle">${history[i]["title"]}</div><div id="popup-desc" class="desc-padding">${history[i]["content"]}</div>`
     }
     cache['0'] = render;

src/modules/pageRender/page.js

@@ -314,7 +314,7 @@ export default function(obj) {
                             "action": "light",
                             "text": t('SettingsThemeLight')
                         }]
-                    }) + checkbox("alwaysVisibleButton", t('SettingsKeepDownloadButton'), 4, t('AccessibilityKeepDownloadButton')) + checkbox("leftHandedLayout", t('LeftHanded'), 4)
+                    }) + checkbox("alwaysVisibleButton", t('SettingsKeepDownloadButton'), 4, t('AccessibilityKeepDownloadButton'))
                 }) + settingsCategory({
                     name: "miscellaneous",
                     title: t('Miscellaneous'),
@@ -362,16 +362,26 @@ export default function(obj) {
         })}
         <div id="popup-backdrop" style="visibility: hidden;" onclick="hideAllPopups()"></div>
         <div id="cobalt-main-box" class="center" style="visibility: hidden;">
-            <div id="logo-area">${appName}</div>
-            <div id="download-area" class="mobile-center">
+            <div id="logo">${appName}</div>
+            <div id="download-area">
                 <div id="top">
                     <input id="url-input-area" class="mono" type="text" autocorrect="off" maxlength="128" autocapitalize="off" placeholder="${t('LinkInput')}" aria-label="${t('AccessibilityInputArea')}" oninput="button()"></input>
                     <button id="url-clear" onclick="clearInput()" style="display:none;">x</button>
                     <input id="download-button" class="mono dontRead" onclick="download(document.getElementById('url-input-area').value)" type="submit" value="" disabled=true aria-label="${t('AccessibilityDownloadButton')}">
                 </div>
                 <div id="bottom">
-                    <button id="pasteFromClipboard" class="switch" onclick="pasteClipboard()" aria-label="${t('PasteFromClipboard')}">${emoji("📋", 22)} ${t('PasteFromClipboard')}</button>
-                    <button id="audioMode" class="switch" onclick="toggle('audioMode')" aria-label="${t('AccessibilityModeToggle')}">${emoji("✨", 22, 1)}</button>
+                    <button id="paste" class="switch" onclick="pasteClipboard()" aria-label="${t('PasteFromClipboard')}">${emoji("📋", 22)} ${t('PasteFromClipboard')}</button>
+                    ${switcher({
+                        name: "audioMode",
+                        noParent: true,
+                        items: [{
+                            "action": "false",
+                            "text": `${emoji("✨")} ${t("ModeToggleAuto")}`
+                        }, {
+                            "action": "true",
+                            "text": `${emoji("🎶")} ${t("ModeToggleAudio")}`
+                        }]
+                    })}
                 </div>
             </div>
         </div>
@@ -401,8 +411,6 @@ export default function(obj) {
         noURLReturned: ` + "`" + t('ErrorNoUrlReturned') + "`" + `,
         unknownStatus: ` + "`" + t('ErrorUnknownStatus') + "`" + `,
         collapseHistory: ` + "`" + t('ChangelogPressToHide') + "`" + `,
-        toggleDefault: '${emoji("✨")} ${t("ModeToggleAuto")}',
-        toggleAudio: '${emoji("🎶")} ${t("ModeToggleAudio")}',
         pickerDefault: ` + "`" + t('MediaPickerTitle') + "`" + `,
         pickerImages: ` + "`" + t('ImagePickerTitle') + "`" + `,
         pickerImagesExpl: ` + "`" + t(`ImagePickerExplanation${isMobile ? "Phone" : "PC"}`) + "`" + `,