refactor: change div to aside for accessibility in settings component

hxrshxz · doradocodes · commit a8b22e4caa68 · 2026-03-23T12:27:43.000-04:00
diff --git a/src/components/Settings/index.astro b/src/components/Settings/index.astro
@@ -75,7 +75,7 @@ const a11ySettingsProps = [
 const { hideSearch } = Astro.props;
 ---
 
-<div class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`}>
+<aside class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`} aria-label="Settings">
   <div id="settings-placeholder" class={styles.placeholder}></div>
   <div id="settings-hitbox" class={styles.hitbox}></div>
   <div id="settings-container" class={`${styles.wrapper} settings`}>
@@ -97,5 +97,5 @@ const { hideSearch } = Astro.props;
       )
     }
   </div>
-</div>
+</aside>
 <script src="./script.js"></script>

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ const a11ySettingsProps = [`
`75`	`75`	`const { hideSearch } = Astro.props;`
`76`	`76`	`---`
`77`	`77`
`78`		-<div class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`}>
	`78`	+<aside class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`} aria-label="Settings">
`79`	`79`	`<div id="settings-placeholder" class={styles.placeholder}></div>`
`80`	`80`	`<div id="settings-hitbox" class={styles.hitbox}></div>`
`81`	`81`	<div id="settings-container" class={`${styles.wrapper} settings`}>
`@@ -97,5 +97,5 @@ const { hideSearch } = Astro.props;`
`97`	`97`	`)`
`98`	`98`	`}`
`99`	`99`	`</div>`
`100`		`-</div>`
	`100`	`+</aside>`
`101`	`101`	`<script src="./script.js"></script>`