use h3 instead of label for visual consistency (#3862)

* use h3 instead of label for visual consistency * semantic html * Update client/src/settings/app.tsx Co-authored-by: Schalk Neethling <[email protected]> * cleanup unused scss * prettier Co-authored-by: Schalk Neethling <[email protected]>
mdn · Jun 1, 2021 · ab63390 · ab63390
1 parent cfbe278
commit ab63390
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 14 deletions.
diff --git a/client/src/settings/app.tsx b/client/src/settings/app.tsx
@@ -225,9 +225,7 @@ function Settings({
       )}
 
       <div className="field-group">
-        <label htmlFor="id_locale" className="slab-highlight">
-          Change language
-        </label>
+        <h3>Default language</h3>
 
         {sent && !sendError && (
           <div className="notecard success">
@@ -244,7 +242,9 @@ function Settings({
             <a href={window.location.pathname}>Reload page to try again.</a>
           </div>
         )}
-
+        <label htmlFor="id_locale" className="visually-hidden">
+          Change language
+        </label>
         <select
           id="id_locale"
           name="locale"

diff --git a/client/src/settings/index.scss b/client/src/settings/index.scss
@@ -19,16 +19,6 @@
 
   .field-group {
     margin: math.div($base-spacing, 2) 0;
-
-    label {
-      font-size: $large-font-size-mobile;
-      line-height: $heading-line-height;
-      margin-bottom: $base-spacing;
-
-      @media #{$mq-tablet-and-up} {
-        font-size: $large-font-size;
-      }
-    }
   }
 
   .notecard {