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/templates/settings/general.html

@@ -1,10 +1,15 @@
 {% extends "bookmarks/layout.html" %}
 {% load widget_tweaks %}
 
-{% block content %}
-  <div class="settings-page">
+{% block head %}
+  {% with page_title="Settings - Linkding" %}
+    {{ block.super }}
+  {% endwith %}
+{% endblock %}
 
-    {% include 'settings/nav.html' %}
+{% block content %}
+  <main class="settings-page" aria-labelledby="main-heading">
+    <h1 id="main-heading">Settings</h1>
 
     {# Profile section #}
     {% if success_message %}
@@ -14,8 +19,8 @@
       <div class="toast toast-error mb-4">{{ error_message }}</div>
     {% endif %}
 
-    <section class="content-area">
-      <h2>Profile</h2>
+    <section aria-labelledby="profile-heading">
+      <h2 id="profile-heading">Profile</h2>
       <p>
         <a href="{% url 'change_password' %}">Change password</a>
       </p>
@@ -278,8 +283,8 @@ reddit.com/r/Music music reddit</pre>
 
     {# Global settings section #}
     {% if global_settings_form %}
-      <section class="content-area">
-        <h2>Global settings</h2>
+      <section aria-labelledby="global-settings-heading">
+        <h2 id="global-settings-heading">Global settings</h2>
         <form action="{% url 'linkding:settings.update' %}" method="post" novalidate data-turbo="false">
           {% csrf_token %}
           <div class="form-group">
@@ -318,8 +323,8 @@ reddit.com/r/Music music reddit</pre>
     {% endif %}
 
     {# Import section #}
-    <section class="content-area">
-      <h2>Import</h2>
+    <section aria-labelledby="import-heading">
+      <h2 id="import-heading">Import</h2>
       <p>Import bookmarks and tags in the Netscape HTML format. This will execute a sync where new bookmarks are
         added and existing ones are updated.</p>
       <form method="post" enctype="multipart/form-data" action="{% url 'linkding:settings.import' %}">
@@ -346,8 +351,8 @@ reddit.com/r/Music music reddit</pre>
     </section>
 
     {# Export section #}
-    <section class="content-area">
-      <h2>Export</h2>
+    <section aria-labelledby="export-heading">
+      <h2 id="export-heading">Export</h2>
       <p>Export all bookmarks in Netscape HTML format.</p>
       <a class="btn btn-primary" target="_blank" href="{% url 'linkding:settings.export' %}">Download (.html)</a>
       {% if export_error %}
@@ -360,8 +365,8 @@ reddit.com/r/Music music reddit</pre>
     </section>
 
     {# About section #}
-    <section class="content-area about">
-      <h2>About</h2>
+    <section class="about" aria-labelledby="about-heading">
+      <h2 id="about-heading">About</h2>
       <table class="table">
         <tbody>
         <tr>
@@ -384,7 +389,7 @@ reddit.com/r/Music music reddit</pre>
         </tbody>
       </table>
     </section>
-  </div>
+  </main>
 
   <script>
     (function init() {

bookmarks/templates/settings/integrations.html

@@ -1,12 +1,17 @@
 {% extends "bookmarks/layout.html" %}
 
+{% block head %}
+  {% with page_title="Integrations - Linkding" %}
+    {{ block.super }}
+  {% endwith %}
+{% endblock %}
+
 {% block content %}
-  <div class="settings-page">
+  <main class="settings-page" aria-labelledby="main-heading">
+    <h1 id="main-heading">Integrations</h1>
 
-    {% include 'settings/nav.html' %}
-
-    <section class="content-area">
-      <h2>Browser Extension</h2>
+    <section aria-labelledby="browser-extension-heading">
+      <h2 id="browser-extension-heading">Browser Extension</h2>
       <p>The browser extension allows you to quickly add new bookmarks without leaving the page that you are on. The
         extension is available in the official extension stores for:</p>
       <ul>
@@ -31,8 +36,8 @@
          class="btn btn-primary">📎 Add bookmark</a>
     </section>
 
-    <section class="content-area">
-      <h2>REST API</h2>
+    <section aria-labelledby="rest-api-heading">
+      <h2 id="rest-api-heading">REST API</h2>
       <p>The following token can be used to authenticate 3rd-party applications against the REST API:</p>
       <div class="form-group">
         <div class="width-50 width-md-100">
@@ -48,8 +53,8 @@
       </p>
     </section>
 
-    <section class="content-area">
-      <h2>RSS Feeds</h2>
+    <section aria-labelledby="rss-feeds-heading">
+      <h2 id="rss-feeds-heading">RSS Feeds</h2>
       <p>The following URLs provide RSS feeds for your bookmarks:</p>
       <ul style="list-style-position: outside;">
         <li><a target="_blank" href="{{ all_feed_url }}">All bookmarks</a></li>
@@ -84,5 +89,5 @@
         After deleting the feed token, new URLs will be generated when you reload this settings page.
       </p>
     </section>
-  </div>
+  </main>
 {% endblock %}

bookmarks/templates/settings/nav.html

@@ -1,24 +0,0 @@
-{% url 'linkding:settings.index' as index_url %}
-{% url 'linkding:settings.general' as general_url %}
-{% url 'linkding:settings.integrations' as integrations_url %}
-
-<ul class="tab tab-block">
-    <li class="tab-item {% if request.get_full_path == index_url or request.get_full_path == general_url%}active{% endif %}">
-        <a href="{{ general_url }}">General</a>
-    </li>
-    <li class="tab-item {% if request.get_full_path == integrations_url %}active{% endif %}">
-        <a href="{{ integrations_url }}">Integrations</a>
-    </li>
-    {% if request.user.is_superuser %}
-    <li class="tab-item">
-        <a href="{% url 'admin:index' %}" target="_blank">
-            <span>Admin</span>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="ml-1" style="width: 1.2em; height: 1.2em; vertical-align: -0.2em;">
-                <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
-                <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
-            </svg>
-        </a>
-    </li>
-    {% endif %}
-</ul>
-<br>