a11y: add role=radiogroup + aria-label to unlabeled radio groups (WCAG 1.3.1/4.1.2)

Author: Antikode

page-numbers.html

@@ -178,7 +178,7 @@ <h1>Open DevTools.<br />Number every page.<br />Watch nothing get sent anywhere.
     <div class="split-panel" id="numPanel" hidden>
       <div class="split-meta" id="numMeta"></div>
 
-      <div class="split-mode">
+      <div class="split-mode" role="radiogroup" aria-label="Page number position">
         <label class="split-mode-option">
           <input type="radio" name="numPosition" value="bottom-center" checked />
           <span>Bottom center</span>

pages-per-sheet.html

@@ -178,7 +178,7 @@ <h1>Open DevTools.<br />Combine these pages.<br />Watch nothing get sent anywher
     <div class="split-panel" id="nupPanel" hidden>
       <div class="split-meta" id="nupMeta"></div>
 
-      <div class="split-mode">
+      <div class="split-mode" role="radiogroup" aria-label="Pages per sheet">
         <label class="split-mode-option">
           <input type="radio" name="nupCount" value="2" checked />
           <span>2 pages per sheet</span>
@@ -189,7 +189,7 @@ <h1>Open DevTools.<br />Combine these pages.<br />Watch nothing get sent anywher
         </label>
       </div>
 
-      <div class="split-mode">
+      <div class="split-mode" role="radiogroup" aria-label="Sheet orientation">
         <label class="split-mode-option">
           <input type="radio" name="nupOrientation" value="landscape" checked />
           <span>Landscape sheet</span>

rotate.html

@@ -178,7 +178,7 @@ <h1>Open DevTools.<br />Rotate this PDF.<br />Watch nothing get sent anywhere.</
     <div class="split-panel" id="rotatePanel" hidden>
       <div class="split-meta" id="rotateMeta"></div>
 
-      <div class="split-mode">
+      <div class="split-mode" role="radiogroup" aria-label="Rotation scope">
         <label class="split-mode-option">
           <input type="radio" name="rotateScope" value="all" checked />
           <span>Rotate every page</span>
@@ -194,7 +194,7 @@ <h1>Open DevTools.<br />Rotate this PDF.<br />Watch nothing get sent anywhere.</
         <input type="text" id="rotateRangeInput" placeholder="e.g. 1-3, 5, 8-10" />
       </div>
 
-      <div class="split-mode">
+      <div class="split-mode" role="radiogroup" aria-label="Rotation angle">
         <label class="split-mode-option">
           <input type="radio" name="rotateAngle" value="90" checked />
           <span>90° clockwise</span>

split.html

@@ -177,7 +177,7 @@ <h1>Open DevTools.<br />Split this PDF.<br />Watch nothing get sent anywhere.</h
     <div class="split-panel" id="splitPanel" hidden>
       <div class="split-meta" id="splitMeta"></div>
 
-      <div class="split-mode">
+      <div class="split-mode" role="radiogroup" aria-label="Split mode">
         <label class="split-mode-option">
           <input type="radio" name="splitMode" value="range" checked />
           <span>Extract pages into one PDF</span>

watermark.html

@@ -183,7 +183,7 @@ <h1>Open DevTools.<br />Watermark this PDF.<br />Watch nothing get sent anywhere
         <input type="text" id="wmTextInput" value="CONFIDENTIAL" maxlength="80" />
       </div>
 
-      <div class="split-mode">
+      <div class="split-mode" role="radiogroup" aria-label="Watermark angle">
         <label class="split-mode-option">
           <input type="radio" name="wmAngle" value="-45" checked />
           <span>Diagonal (-45°)</span>