From 1d77003d0832de4deff5ef0d9161f003a485e37f Mon Sep 17 00:00:00 2001
From: Freeplayg <freeplay@duck.com>
Date: Sat, 24 Dec 2022 11:03:26 -0500
Subject: [PATCH] Fix accessability issue

---
 src/popup.html           | 13 ++++++-------
 src/popup_styles.css     | 12 ++++++++----
 src/popup_styles.min.css |  2 +-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/popup.html b/src/popup.html
index 179867b..0bf2d7b 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -13,10 +13,10 @@
 		<div id="mhi-containers">
 			<form id="fediact-settings">
 				<div class="scroller">
-					<fieldset>
+					<fieldset aria-labelledby="homeServerDomainLabel">
 						<div class="row">
 							<label for="homeinstance">
-								<h1>Home Server Domain</h1>
+								<legend id="homeServerDomainLabel"><h1>Home Server Domain</h1></legend>
 								<span>
 									Make sure you are logged in to your home server
 								</span>
@@ -25,7 +25,7 @@
 						</div>
 					</fieldset>
 					<fieldset>
-						<h2>Redirect Settings</h2>
+						<legend>Redirect Settings</legend>
 						<div class="row">
 							<label for="redirects">Enable
 								<span>
@@ -51,7 +51,7 @@
 						</div>
 					</fieldset>
 					<fieldset>
-						<h2>Other Settings</h2>
+						<legend>Other Settings</legend>
 						<div class="row">
 							<label for="autoaction">Actions
 								<span>
@@ -78,7 +78,7 @@
 						</div>
 					</fieldset>
 					<fieldset>
-						<h2>Mode</h2>
+						<legend>Mode</legend>
 						<div class="row">
 							<label for="runifloggedin">Ignore sessions
 								<span>
@@ -89,7 +89,7 @@
 						</div>
 					</fieldset>
 					<fieldset>
-						<h2>Filtered servers</h2>
+						<legend>Filtered servers</legend>
 						<div class="row">
 							<label for="mode">Mode
 								<span class="hide" id="allowlabel">
@@ -118,7 +118,6 @@
 					<input type="submit" value="Save">
 					<span id="indicator" style="display:none">Settings saved!</span>
 					<span><a target="_blank" href="https://github.com/lartsch/FediAct">More info / help on Github</a></span>
-
 				</div>
 			</form>
     </div>
diff --git a/src/popup_styles.css b/src/popup_styles.css
index 06f1ba4..5dafb90 100644
--- a/src/popup_styles.css
+++ b/src/popup_styles.css
@@ -62,13 +62,17 @@ form {
             box-sizing: border-box;
 }
 fieldset {
-    border: 0;
-    padding: 0;
-    margin: 0;
+    all: unset;
+    display: block;
 }
-fieldset > h2, summary {
+legend {
+    all: unset;
+}
+fieldset > legend, summary {
     margin-inline: .6em;
+    margin-top: 1em;
     margin-bottom: .4em;
+    font-weight: 700;
 }
 .row {
     background-color: var(--highlight);
diff --git a/src/popup_styles.min.css b/src/popup_styles.min.css
index 2ff85ea..14a0074 100644
--- a/src/popup_styles.min.css
+++ b/src/popup_styles.min.css
@@ -1 +1 @@
-html,body{margin:0;height:var(--popup-height);min-width:300px}html{--highlight:rgba(130,130,150,0.1);--confirmation:#268500;--hover:rgba(120,120,130,0.15);--border:rgba(120,120,130,0.3);--border-2:rgba(130,130,150,0.3);--radius:12px;--popup-height:400px;overflow:hidden !important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:var(--popup-height);overflow:hidden}.hide{display:none}h1{font-size:1em;margin-block:.2em}h2{font-size:1em}#mhi-wrapper,#mhi-containers{display:contents}form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.scroller{height:0;overflow-y:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}fieldset{border:0;padding:0;margin:0}fieldset>h2,summary{margin-inline:.6em;margin-bottom:.4em}.row{background-color:var(--highlight);padding:.8em;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:2px;position:relative;gap:.4em;-webkit-transition:background-color .1s;-o-transition:background-color .1s;transition:background-color .1s}.row:hover,.row:focus-within{background:var(--hover)}.row:first-of-type{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.row:last-of-type{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}label{width:0;-webkit-box-flex:9999;-ms-flex-positive:9999;flex-grow:9999}label::before{content:"";position:absolute;inset:0}label span{display:block;font-size:.9em;opacity:.7;margin-top:.2em}input[type="text"]{width:100%}input,textarea,select{border:1px solid var(--border);padding:.7em;border-radius:calc(var(--radius) / 2);font-size:inherit;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:2}.textarea-container{width:calc(100% - .14em);border-radius:inherit}textarea{resize:vertical;width:100%}select{margin-block:-.8em;padding-block:.4em;border:0;background:0;text-align:right}.footer{padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-top:1px dashed var(--border-2);position:relative;background-color:var(--highlight);-webkit-box-shadow:0 0 24px rgba(0,0,0,0.1);box-shadow:0 0 24px rgba(0,0,0,0.1)}[type="submit"]{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding-inline:2em}[type="submit"]:not(:hover):not(:focus){background:0}.footer span{width:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;padding-inline:1em}.footer a{opacity:.7;text-underline-offset:.2em;color:inherit}#indicator{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;width:calc(100% + 20px);font-weight:600;padding:.7em;margin:-10px;margin-bottom:8px;background-color:var(--confirmation);text-align:center;color:white}@media(prefers-color-scheme:dark){body{color:white}}
+html,body{margin:0;height:var(--popup-height);min-width:300px}html{--highlight:rgba(130,130,150,0.1);--confirmation:#268500;--hover:rgba(120,120,130,0.15);--border:rgba(120,120,130,0.3);--border-2:rgba(130,130,150,0.3);--radius:12px;--popup-height:400px;overflow:hidden !important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:var(--popup-height);overflow:hidden}.hide{display:none}h1{font-size:1em;margin-block:.2em}h2{font-size:1em}#mhi-wrapper,#mhi-containers{display:contents}form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.scroller{height:0;overflow-y:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}fieldset{all:unset;display:block}legend{all:unset}fieldset>legend,summary{margin-inline:.6em;margin-top:1em;margin-bottom:.4em;font-weight:700}.row{background-color:var(--highlight);padding:.8em;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:2px;position:relative;gap:.4em;-webkit-transition:background-color .1s;-o-transition:background-color .1s;transition:background-color .1s}.row:hover,.row:focus-within{background:var(--hover)}.row:first-of-type{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.row:last-of-type{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}label{width:0;-webkit-box-flex:9999;-ms-flex-positive:9999;flex-grow:9999}label::before{content:"";position:absolute;inset:0}label span{display:block;font-size:.9em;opacity:.7;margin-top:.2em}input[type="text"]{width:100%}input,textarea,select{border:1px solid var(--border);padding:.7em;border-radius:calc(var(--radius) / 2);font-size:inherit;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:2}.textarea-container{width:calc(100% - .14em);border-radius:inherit}textarea{resize:vertical;width:100%}select{margin-block:-.8em;padding-block:.4em;border:0;background:0;text-align:right}.footer{padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-top:1px dashed var(--border-2);position:relative;background-color:var(--highlight);-webkit-box-shadow:0 0 24px rgba(0,0,0,0.1);box-shadow:0 0 24px rgba(0,0,0,0.1)}[type="submit"]{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding-inline:2em}[type="submit"]:not(:hover):not(:focus){background:0}.footer span{width:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;padding-inline:1em}.footer a{opacity:.7;text-underline-offset:.2em;color:inherit}#indicator{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;width:calc(100% + 20px);font-weight:600;padding:.7em;margin:-10px;margin-bottom:8px;background-color:var(--confirmation);text-align:center;color:white}@media(prefers-color-scheme:dark){body{color:white}}