Wrap theme / language dropdowns in a <nav> element.

src/css/_layout.scss

@@ -43,7 +43,7 @@ body .root .content.theme {
       }
     }
 
-    div {
+    nav {
       display: flex;
       justify-content: space-between;
       min-height: 35px;
@@ -96,7 +96,7 @@ body .root .content.en {
 
 body .root .content.ar {
   header {
-    div {
+    nav, div {
       direction: ltr;
       .localized-name {
         display: flex;

src/css/themes/blue/_layout.scss

@@ -3,7 +3,7 @@
 
   header {
     h1 , h1 a { color: $blue1; }
-    div .react-select {
+    nav .react-select {
       color: $gold1;
     }
   }

src/css/themes/green/_layout.scss

@@ -4,7 +4,7 @@
   header {
     h1 , h1 a { color: $green1; }
 
-    div .react-select {
+    nav .react-select {
       background-color: transparent;
       color: $green1;
     }

src/js/pages/SurahIndex.tsx

@@ -35,10 +35,10 @@ function SurahIndex({ locale, surahs, t }: Props) {
         <h1>
           <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
         </h1>
-        <div>
+        <nav>
           <ThemeSelect theme={theme} setTheme={setTheme} />
           <LanguageSelect locale={locale} />
-        </div>
+        </nav>
       </header>
       <ul className="body index scroll-y">
         {surahs.map((surah, key) => (

src/js/pages/SurahStream.tsx

@@ -63,10 +63,10 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           <h1>
             <a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
           </h1>
-          <div>
+          <nav>
             <ThemeSelect theme={theme} setTheme={setTheme} />
             <LanguageSelect locale={locale} path={surah.slug} />
-          </div>
+          </nav>
           <div>
             <span className="localized-name" lang={locale}>
               {surah.localizedName}