From 689b3e73a0b49eb171653214cfd6b88d724734c7 Mon Sep 17 00:00:00 2001 From: Ed Wilde Date: Mon, 31 Jul 2023 16:53:34 +1200 Subject: [PATCH] Add some accessibility fixes to the markup and script --- css/betternavigator.css | 2 +- css/betternavigator.css.map | 2 +- javascript/betternavigator.js | 14 +++ lang/de.yml | 2 + lang/en.yml | 2 + scss/betternavigator.scss | 44 ++++++---- .../JonoM/BetterNavigator/BetterNavigator.ss | 87 ++++++++++--------- 7 files changed, 97 insertions(+), 56 deletions(-) diff --git a/css/betternavigator.css b/css/betternavigator.css index 80d786d..fbe0b45 100644 --- a/css/betternavigator.css +++ b/css/betternavigator.css @@ -1 +1 @@ -.svg-images--bn-icon--view,.bn-icon-view,.svg-images--bn-icon--user,.bn-icon-user,.svg-images--bn-icon--tools,.bn-icon-tools,.svg-images--bn-icon--tick,.bn-icon-tick,.svg-images--bn-icon--info,.bn-icon-info,.svg-images--bn-icon--flush,.bn-icon-flush,.svg-images--bn-icon--edit,.bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,.bn-icon-db,.svg-images--bn-icon--cog,.bn-icon-cog,.svg-images--bn-icon--close,.bn-icon-close{background:url("svg/sprite.css-ce8a5080.svg") no-repeat}.svg-images--bn-icon--close,.bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,.bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,.bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,.bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,.bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,.bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,.bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,.bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,.bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,.bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,.bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,.bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,.bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,.bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,.bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,.bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,.bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,.bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,.bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,.bn-icon-view{width:16px;height:16px}span[class^=bn-icon],span[class*=" bn-icon"]{display:inline-block}.bn-icon-close{transform:scale(0.8);margin:-1px -6px 0 0}.bn-icon-db{transform:scale(0.8)}.bn-icon-edit{transform:scale(0.9)}.bn-icon-flush{transform:scale(0.8)}.bn-icon-info{transform:scale(0.8)}.bn-icon-tick{transform:scale(0.85)}.bn-icon-tools{transform:scale(0.9)}.bn-icon-view{transform:scale(0.95)}#BetterNavigator{position:fixed;z-index:99999;max-height:100%;overflow:auto;font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:16px;text-align:left}#BetterNavigator a{text-decoration:none}#BetterNavigator form{display:none}#BetterNavigator.collapsed{box-shadow:0px 0px 3px rgba(0,0,0,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px}#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-close{display:none}#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-cog{display:inline-block}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigatorStatus{color:#fff;background:#6f6f6f;border:1px solid #646464;border-width:0;text-transform:uppercase;cursor:pointer;padding:10px 15px 8px;font-weight:bold;transition:100ms background-color ease-in-out}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -4px -4px;display:none}#BetterNavigatorStatus .bn-icon-close{float:right}#BetterNavigatorStatus .bn-icon-cog,#BetterNavigatorStatus .bn-icon-close{opacity:.7}#BetterNavigatorStatus:hover{background:dimgray}#BetterNavigatorStatus:hover .bn-icon-cog,#BetterNavigatorStatus:hover .bn-icon-close{opacity:1}#BetterNavigatorStatus.Live{background:#4a831c;border-color:#437619}#BetterNavigatorStatus.Live:hover{background:#467c1b}#BetterNavigatorStatus.Draft{background:#c0462b;border-color:#ad3f27}#BetterNavigatorStatus.Draft:hover{background:#b64329}#BetterNavigatorContent{padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;transition:100ms background-color ease-in-out}#BetterNavigatorContent .bn-heading{text-transform:uppercase;font-size:11px;margin:8px 0 4px 0}#BetterNavigatorContent span[class^=bn-icon],#BetterNavigatorContent span[class*=" bn-icon"]{margin:-2px 5px -3px -2px}#BetterNavigatorContent a,#BetterNavigatorContent span.bn-disabled{display:block;background:#eceff2;color:#313639;font-family:Helvetica,Arial,sans-serif;font-size:12px;border-radius:5px;border-bottom:1px solid #a3aaaf;margin:0 0 4px 0;padding:6px 10px 5px 10px;line-height:16px;font-weight:bold}#BetterNavigatorContent a .light,#BetterNavigatorContent span.bn-disabled .light{font-weight:normal}#BetterNavigatorContent a:focus,#BetterNavigatorContent a:hover{background:#fff;color:#000}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent span.bn-disabled{background:#c6d3da;color:#51565a;cursor:default}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}body>p.message{text-align:left;background:#fff;color:#222;padding:10px 20px;margin:0;border-bottom:1px solid #ccc;border-left:5px solid #1d8aff}/*# sourceMappingURL=betternavigator.css.map */ +.svg-images--bn-icon--view,.bn-icon-view,.svg-images--bn-icon--user,.bn-icon-user,.svg-images--bn-icon--tools,.bn-icon-tools,.svg-images--bn-icon--tick,.bn-icon-tick,.svg-images--bn-icon--info,.bn-icon-info,.svg-images--bn-icon--flush,.bn-icon-flush,.svg-images--bn-icon--edit,.bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,.bn-icon-db,.svg-images--bn-icon--cog,.bn-icon-cog,.svg-images--bn-icon--close,.bn-icon-close{background:url("svg/sprite.css-ce8a5080.svg") no-repeat}.svg-images--bn-icon--close,.bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,.bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,.bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,.bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,.bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,.bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,.bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,.bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,.bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,.bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,.bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,.bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,.bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,.bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,.bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,.bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,.bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,.bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,.bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,.bn-icon-view{width:16px;height:16px}span[class^=bn-icon],span[class*=" bn-icon"]{display:inline-block}.bn-icon-close{transform:scale(0.8);margin:-3px -6px 0 0}.bn-icon-db{transform:scale(0.8)}.bn-icon-edit{transform:scale(0.9)}.bn-icon-flush{transform:scale(0.8)}.bn-icon-info{transform:scale(0.8)}.bn-icon-tick{transform:scale(0.85)}.bn-icon-tools{transform:scale(0.9)}.bn-icon-view{transform:scale(0.95)}#BetterNavigator{position:fixed;z-index:99999;max-height:100%;overflow:auto;font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:16px;text-align:left}#BetterNavigator a{text-decoration:none}#BetterNavigator form{display:none}#BetterNavigator.collapsed{box-shadow:0px 0px 3px rgba(0,0,0,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px;padding:10px 15px 8px 35px}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigatorStatus{color:#fff;background:#6f6f6f;border:1px solid #646464;border-width:0;text-transform:uppercase;cursor:pointer;padding:10px 15px 8px;font-weight:bold;transition:100ms background-color ease-in-out;font-size:14px;margin:0}#BetterNavigatorStatus #BetterNavigatorStatusButton{appearance:none;width:100%;height:38px;position:absolute;top:0;left:0;border:0;background:rgba(0,0,0,0);text-align:left;padding:2px 14px 0}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -2px -4px}#BetterNavigatorStatus .bn-icon-close{float:right}#BetterNavigatorStatus .bn-icon-cog,#BetterNavigatorStatus .bn-icon-close{opacity:.7}#BetterNavigatorStatus:hover,#BetterNavigatorStatus:focus-visible{background:dimgray}#BetterNavigatorStatus:hover .bn-icon-cog,#BetterNavigatorStatus:hover .bn-icon-close,#BetterNavigatorStatus:focus-visible .bn-icon-cog,#BetterNavigatorStatus:focus-visible .bn-icon-close{opacity:1}#BetterNavigatorStatus.Live{background:#4a831c;border-color:#437619}#BetterNavigatorStatus.Live:hover{background:#467c1b}#BetterNavigatorStatus.Draft{background:#c0462b;border-color:#ad3f27}#BetterNavigatorStatus.Draft:hover{background:#b64329}#BetterNavigatorContent{padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;transition:100ms background-color ease-in-out}#BetterNavigatorContent .bn-heading{text-transform:uppercase;font-size:11px;margin:8px 0 4px 0;font-weight:normal}#BetterNavigatorContent span[class^=bn-icon],#BetterNavigatorContent span[class*=" bn-icon"]{margin:-2px 5px -3px -2px}#BetterNavigatorContent a,#BetterNavigatorContent .bn-disabled{display:block;background:#eceff2;color:#313639;font-family:Helvetica,Arial,sans-serif;font-size:12px;border-radius:5px;border-bottom:1px solid #a3aaaf;margin:0 0 4px 0;padding:6px 10px 5px 10px;line-height:16px;font-weight:bold}#BetterNavigatorContent a .light,#BetterNavigatorContent .bn-disabled .light{font-weight:normal}#BetterNavigatorContent a:focus-visible,#BetterNavigatorContent a:hover{background:#fff;color:#000}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent .bn-disabled{background:#c6d3da;color:#51565a;cursor:default;pointer-events:none}#BetterNavigatorContent .bn-links{margin:0;padding:0;list-style-type:none}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}body>p.message{text-align:left;background:#fff;color:#222;padding:10px 20px;margin:0;border-bottom:1px solid #ccc;border-left:5px solid #1d8aff}/*# sourceMappingURL=betternavigator.css.map */ diff --git a/css/betternavigator.css.map b/css/betternavigator.css.map index 6f1219c..03e8131 100644 --- a/css/betternavigator.css.map +++ b/css/betternavigator.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,wbACI,wDAGJ,2CAEI,wBAGJ,gDACI,WACA,YAGJ,uCAEI,qCAGJ,4CACI,WACA,YAGJ,qCAEI,0BAGJ,0CACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,yCAEI,qCAGJ,8CACI,WACA,YAGJ,2CAEI,uCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,wCAGJ,8CACI,WACA,YAGJ,2CAEI,wCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,6BAGJ,8CACI,WACA,YCvFJ,6CAEE,qBAGF,eAGI,qBACA,qBAQJ,YAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAGJ,cAGI,qBAGJ,cAGI,sBAGJ,eAGI,qBAQJ,cAGI,sBAKJ,iBACI,eACA,cACA,gBACA,cACA,uCACA,eACA,iBACA,gBAEA,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBAEA,iEACI,aAGJ,+DACI,qBAIR,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAOZ,uBACI,MA9KI,KA+KJ,WAnKW,QAoKX,yBACA,eACA,yBACA,eACA,sBACA,iBACA,8CAEA,oCACE,0BACA,aAGF,sCACE,YAGF,0EAEE,WAGF,6BACI,mBAEA,sFAEE,UAIN,4BACI,WAtMI,QAuMJ,qBAEA,kCACI,mBAIR,6BACI,WA9MK,QA+ML,qBAEA,mCACI,mBAOZ,wBACI,YACA,MAnOW,QAoOX,WAnOgB,QAoOhB,yBACA,yBACA,gBACA,8CAEA,oCACI,yBACA,eACA,mBAGJ,6FAEE,0BAGF,mEAEI,cACA,WApPW,QAqPX,MAvPM,QAwPN,uCACA,eACA,kBACA,gCACA,iBACA,0BACA,iBACA,iBAEA,iFACI,mBAIR,gEAEI,WA7QA,KA8QA,MA/QA,KAkRJ,iCACI,mBACA,qBAGJ,yCACI,WA/QmB,QAgRnB,MAlRc,QAmRd,eAIA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,wbACI,wDAGJ,2CAEI,wBAGJ,gDACI,WACA,YAGJ,uCAEI,qCAGJ,4CACI,WACA,YAGJ,qCAEI,0BAGJ,0CACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,yCAEI,qCAGJ,8CACI,WACA,YAGJ,2CAEI,uCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,wCAGJ,8CACI,WACA,YAGJ,2CAEI,wCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,6BAGJ,8CACI,WACA,YCvFJ,6CAEE,qBAGF,eAGI,qBACA,qBAQJ,YAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAGJ,cAGI,qBAGJ,cAGI,sBAGJ,eAGI,qBAQJ,cAGI,sBAKJ,iBACI,eACA,cACA,gBACA,cACA,uCACA,eACA,iBACA,gBAEA,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBACA,2BAGJ,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAOZ,uBACI,MAvKI,KAwKJ,WA5JW,QA6JX,yBACA,eACA,yBACA,eACA,sBACA,iBACA,8CACA,eACA,SAEA,oDACI,gBACA,WACA,YACA,kBACA,MACA,OACA,SACA,yBACA,gBACA,mBAGJ,oCACE,0BAGF,sCACE,YAGF,0EAEE,WAGF,kEAEI,mBAEA,4LAEE,UAIN,4BACI,WA9MI,QA+MJ,qBAEA,kCACI,mBAIR,6BACI,WAtNK,QAuNL,qBAEA,mCACI,mBAOZ,wBACI,YACA,MA3OW,QA4OX,WA3OgB,QA4OhB,yBACA,yBACA,gBACA,8CAEA,oCACI,yBACA,eACA,mBACA,mBAGJ,6FAEE,0BAGF,+DAEI,cACA,WA7PW,QA8PX,MAhQM,QAiQN,uCACA,eACA,kBACA,gCACA,iBACA,0BACA,iBACA,iBAEA,6EACI,mBAIR,wEAEI,WAtRA,KAuRA,MAxRA,KA2RJ,iCACI,mBACA,qBAGJ,qCACI,WAxRmB,QAyRnB,MA3Rc,QA4Rd,eACA,oBAGJ,kCACI,SACA,UACA,qBAEA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"} \ No newline at end of file diff --git a/javascript/betternavigator.js b/javascript/betternavigator.js index d830351..0c3a381 100755 --- a/javascript/betternavigator.js +++ b/javascript/betternavigator.js @@ -18,6 +18,8 @@ function initialiseBetterNavigator() { // Dom elements var BetterNavigator = document.getElementById("BetterNavigator"); var BetterNavigatorStatus = document.getElementById("BetterNavigatorStatus"); + var BetterNavigatorStatusButton = document.getElementById("BetterNavigatorStatusButton"); + var BetterNavigatorStatusIcon = document.getElementById("BetterNavigatorStatusIcon"); var BetterNavigatorLogoutLink = document.getElementById("BetterNavigatorLogoutLink"); var BetterNavigatorLogoutForm = document.getElementById("LogoutForm_BetterNavigatorLogoutForm"); @@ -26,10 +28,22 @@ function initialiseBetterNavigator() { if (BetterNavigator.classList.contains('collapsed')) { BetterNavigator.classList.add('open'); BetterNavigator.classList.remove('collapsed'); + + // update the button state + BetterNavigatorStatusButton.setAttribute('aria-expanded', 'true'); + BetterNavigatorStatusIcon.classList.remove('bn-icon-cog'); + BetterNavigatorStatusIcon.classList.add('bn-icon-close'); + document.cookie = "BetterNavigator=open;path=/"; } else { BetterNavigator.classList.add('collapsed'); BetterNavigator.classList.remove('open'); + + // update the button state + BetterNavigatorStatusButton.setAttribute('aria-expanded', 'false'); + BetterNavigatorStatusIcon.classList.remove('bn-icon-close'); + BetterNavigatorStatusIcon.classList.add('bn-icon-cog'); + document.cookie = "BetterNavigator=collapsed;path=/"; } }; diff --git a/lang/de.yml b/lang/de.yml index 99bd9f3..a4022b0 100644 --- a/lang/de.yml +++ b/lang/de.yml @@ -4,6 +4,8 @@ de: VIEWING_DRAFT: 'Entwurf' VIEWING_ARCHIVED: 'Archiviert' + ARIA_MENU_LABEL: 'Werkzeugmenü' + DEVELOPER_TOOLS_HEADING: 'Entwickler Tools' DEBUGGING_HEADING: 'Debugging' diff --git a/lang/en.yml b/lang/en.yml index 3ba914e..98b1a3d 100644 --- a/lang/en.yml +++ b/lang/en.yml @@ -4,6 +4,8 @@ en: VIEWING_DRAFT: 'Draft' VIEWING_ARCHIVED: 'Archived' + ARIA_MENU_LABEL: 'Tool menu' + DEVELOPER_TOOLS_HEADING: 'Developer tools' DEBUGGING_HEADING: 'Debugging' diff --git a/scss/betternavigator.scss b/scss/betternavigator.scss index 3403f9f..6a7561f 100644 --- a/scss/betternavigator.scss +++ b/scss/betternavigator.scss @@ -31,7 +31,7 @@ span[class*=' bn-icon']{ @extend .svg-images--bn-icon--close; @extend .svg-images--bn-icon--close-dims; transform: scale(0.8); - margin: -1px -6px 0 0; + margin: -3px -6px 0 0; } .bn-icon-cog { @@ -122,14 +122,7 @@ span[class*=' bn-icon']{ #BetterNavigatorStatus { border-width: 1px; - - .bn-icon-close { - display: none; - } - - .bn-icon-cog { - display: inline-block; - } + padding: 10px 15px 8px 35px; } #BetterNavigatorContent { @@ -190,10 +183,24 @@ span[class*=' bn-icon']{ padding: 10px 15px 8px; font-weight: bold; transition: 100ms background-color ease-in-out; + font-size: 14px; + margin: 0; + + #BetterNavigatorStatusButton { + appearance: none; + width: 100%; + height: 38px; + position: absolute; + top: 0; + left: 0; + border: 0; + background: transparent; + text-align: left; + padding: 2px 14px 0; + } .bn-icon-cog { - margin: -4px 8px -4px -4px; - display: none; + margin: -4px 8px -2px -4px; } .bn-icon-close { @@ -205,7 +212,8 @@ span[class*=' bn-icon']{ opacity: .7; } - &:hover { + &:hover, + &:focus-visible { background: mix($black, $archiveColor, 5%); .bn-icon-cog, @@ -248,6 +256,7 @@ span[class*=' bn-icon']{ text-transform: uppercase; font-size: 11px; margin: 8px 0 4px 0; + font-weight: normal; } span[class^='bn-icon'], @@ -256,7 +265,7 @@ span[class*=' bn-icon']{ } a, - span.bn-disabled { + .bn-disabled { display: block; background: $buttonBackground; color: $buttonColor; @@ -274,7 +283,7 @@ span[class*=' bn-icon']{ } } - a:focus, + a:focus-visible, a:hover { background: $white; color: $black; @@ -285,13 +294,18 @@ span[class*=' bn-icon']{ border-color: mix($white, $buttonBorder, 10%); } - span.bn-disabled { + .bn-disabled { background: $buttonBackgroundDisabled; color: $buttonColorDisabled; cursor: default; + pointer-events: none; } .bn-links { + margin: 0; + padding: 0; + list-style-type: none; + > :last-child { margin-bottom: 0; } diff --git a/templates/JonoM/BetterNavigator/BetterNavigator.ss b/templates/JonoM/BetterNavigator/BetterNavigator.ss index 63824e2..d2101e6 100644 --- a/templates/JonoM/BetterNavigator/BetterNavigator.ss +++ b/templates/JonoM/BetterNavigator/BetterNavigator.ss @@ -1,10 +1,11 @@ - + - - + +