Accessibility improvements in page structure (#1014)

* Change app link to not use heading

* Use main and h1 for main content

* Update settings page structure

* Fix responsive styles

* Update bookmark form page structure

* Update auth page structure

* Add some basic page titles

* Expose side panel section

* Add page title for bookmark details

* Expose more sections

* Improve region names

bookmarks/styles/bookmark-form.css

@@ -1,5 +1,5 @@
 .bookmarks-form-page {
-  section {
+  main {
     max-width: 550px;
     margin: 0 auto;
   }

bookmarks/styles/bookmark-page.css

@@ -30,11 +30,11 @@
   }
 
   &.collapse-side-panel {
-    section.main {
+    main {
       grid-column: span var(--grid-columns);
     }
 
-    section.side-panel {
+    .side-panel {
       display: none;
     }
 
@@ -459,7 +459,7 @@ ul.bookmark-list {
 
   /* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */
 
-  &.active section:first-of-type .content-area-header {
+  &.active .main .section-header {
     border-bottom-color: transparent;
   }
 

bookmarks/styles/components.css

@@ -1,36 +1,31 @@
 /* Shared components */
 
-/* Content area component */
-section.content-area {
+/* Section header component */
+.section-header {
+  border-bottom: solid 1px var(--secondary-border-color);
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--unit-5);
+  padding-bottom: var(--unit-2);
+  margin-bottom: var(--unit-4);
+
+  h1,
   h2,
   h3 {
     font-size: var(--font-size-lg);
+    flex: 0 0 auto;
+    line-height: var(--unit-9);
+    margin: 0;
   }
 
-  .content-area-header {
-    border-bottom: solid 1px var(--secondary-border-color);
+  .header-controls {
+    flex: 1 1 0;
     display: flex;
-    flex-wrap: wrap;
-    column-gap: var(--unit-5);
-    padding-bottom: var(--unit-2);
-    margin-bottom: var(--unit-4);
-
-    h2,
-    h3 {
-      flex: 0 0 auto;
-      line-height: var(--unit-9);
-      margin: 0;
-    }
-
-    .header-controls {
-      flex: 1 1 0;
-      display: flex;
-    }
   }
 }
 
 @media (max-width: 600px) {
-  section.content-area .content-area-header {
+  .section-header {
     flex-direction: column;
   }
 }

bookmarks/styles/layout.css

@@ -11,18 +11,20 @@ body {
 header {
   margin-bottom: var(--unit-9);
 
-  .logo {
+  a.app-link:hover {
+    text-decoration: none;
+  }
+
+  .app-logo {
     width: 28px;
     height: 28px;
   }
 
-  a:hover {
-    text-decoration: none;
-  }
-
-  h1 {
-    margin: 0 0 0 var(--unit-3);
+  .app-name {
+    margin-left: var(--unit-3);
     font-size: var(--font-size-lg);
+    font-weight: 500;
+    line-height: 1.2;
   }
 }
 

bookmarks/styles/settings.css

@@ -1,8 +1,14 @@
 .settings-page {
-  section.content-area {
+  h1 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--unit-6);
+  }
+
+  section {
     margin-bottom: var(--unit-10);
 
     h2 {
+      font-size: var(--font-size-lg);
       margin-bottom: var(--unit-3);
     }
   }

bookmarks/styles/theme/variables.css

@@ -87,6 +87,7 @@
   --font-size: 0.7rem;
   --font-size-sm: 0.65rem;
   --font-size-lg: 0.8rem;
+  --font-size-xl: 1rem;
   --line-height: 1rem;
 
   /* Sizes */