Improve accessibility of modal dialogs (#974)

* improve details modal accessibility

* improve tag modal accessibility

* fix overlays in archive and shared pages

* update tests

* use buttons for closing dialogs

* replace description list

* hide preview image from screen readers

* update tests

bookmarks/templates/bookmarks/archive.html

@@ -13,7 +13,7 @@
         <div class="header-controls">
           {% bookmark_search bookmark_list.search mode='archived' %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-tag-modal class="btn ml-2 show-md">Tags
+          <button ld-tag-modal-trigger class="btn ml-2 show-md">Tags
           </button>
         </div>
       </div>
@@ -39,12 +39,14 @@
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
-
-    {# Bookmark details #}
-    <turbo-frame id="details-modal" target="_top">
-      {% if details %}
-        {% include 'bookmarks/details/modal.html' %}
-      {% endif %}
-    </turbo-frame>
   </div>
 {% endblock %}
+
+{% block overlays %}
+  {# Bookmark details #}
+  <turbo-frame id="details-modal" target="_top">
+    {% if details %}
+      {% include 'bookmarks/details/modal.html' %}
+    {% endif %}
+  </turbo-frame>
+{% endblock %}

bookmarks/templates/bookmarks/bookmark_list.html

@@ -6,10 +6,12 @@
   {% include 'bookmarks/empty_bookmarks.html' %}
 {% else %}
   <ul class="bookmark-list{% if bookmark_list.show_notes %} show-notes{% endif %}"
+      role="list" tabindex="-1"
       style="--ld-bookmark-description-max-lines:{{ bookmark_list.description_max_lines }};"
       data-bookmarks-total="{{ bookmark_list.bookmarks_total }}">
     {% for bookmark_item in bookmark_list.items %}
-      <li ld-bookmark-item{% if bookmark_item.css_classes %} class="{{ bookmark_item.css_classes }}"{% endif %}>
+      <li ld-bookmark-item data-bookmark-id="{{ bookmark_item.id }}" role="listitem"
+          {% if bookmark_item.css_classes %}class="{{ bookmark_item.css_classes }}"{% endif %}>
         <div class="content">
           <div class="title">
             <label class="form-checkbox bulk-edit-checkbox">
@@ -78,7 +80,8 @@
             {% endif %}
             {# View link is visible for both owned and shared bookmarks #}
             {% if bookmark_list.show_view_action %}
-              <a href="{{ bookmark_item.details_url }}" data-turbo-action="replace" data-turbo-frame="details-modal">View</a>
+              <a href="{{ bookmark_item.details_url }}" class="view-action"
+                 data-turbo-action="replace" data-turbo-frame="details-modal">View</a>
             {% endif %}
             {% if bookmark_item.is_editable %}
               {# Bookmark owner actions #}

bookmarks/templates/bookmarks/details/form.html

@@ -40,14 +40,14 @@
   </div>
   {% if details.preview_image_enabled and details.bookmark.preview_image_file %}
     <div class="preview-image">
-      <img src="{% static details.bookmark.preview_image_file %}"/>
+      <img src="{% static details.bookmark.preview_image_file %}" alt=""/>
     </div>
   {% endif %}
-  <dl class="grid columns-2 columns-sm-1 gap-0">
+  <div class="sections grid columns-2 columns-sm-1 gap-0">
     {% if details.is_editable %}
-      <div class="status col-2">
-        <dt>Status</dt>
-        <dd class="d-flex" style="gap: .8rem">
+      <section class="status col-2">
+        <h3>Status</h3>
+        <div class="d-flex" style="gap: .8rem">
           <div class="form-group">
             <label class="form-switch">
               <input ld-auto-submit type="checkbox" name="is_archived"
@@ -71,44 +71,44 @@
               </label>
             </div>
           {% endif %}
-        </dd>
-      </div>
+        </div>
+      </section>
     {% endif %}
     {% if details.show_files %}
-      <div class="files col-2">
-        <dt>Files</dt>
-        <dd>
+      <section class="files col-2">
+        <h3>Files</h3>
+        <div>
           {% include 'bookmarks/details/assets.html' %}
-        </dd>
-      </div>
+        </div>
+      </section>
     {% endif %}
     {% if details.bookmark.tag_names %}
-      <div class="tags col-1">
-        <dt>Tags</dt>
-        <dd>
+      <section class="tags col-1">
+        <h3 id="details-modal-tags-title">Tags</h3>
+        <div>
           {% for tag_name in details.bookmark.tag_names %}
             <a href="{% url 'bookmarks:index' %}?{% add_tag_to_query tag_name %}">{{ tag_name|hash_tag }}</a>
           {% endfor %}
-        </dd>
-      </div>
+        </div>
+      </section>
     {% endif %}
-    <div class="date-added col-1">
-      <dt>Date added</dt>
-      <dd>
+    <section class="date-added col-1">
+      <h3>Date added</h3>
+      <div>
         <span>{{ details.bookmark.date_added }}</span>
-      </dd>
-    </div>
-    {% if details.bookmark.resolved_description %}
-      <div class="description col-2">
-        <dt>Description</dt>
-        <dd>{{ details.bookmark.resolved_description }}</dd>
       </div>
+    </section>
+    {% if details.bookmark.resolved_description %}
+      <section class="description col-2">
+        <h3>Description</h3>
+        <div>{{ details.bookmark.resolved_description }}</div>
+      </section>
     {% endif %}
     {% if details.bookmark.notes %}
-      <div class="notes col-2">
-        <dt>Notes</dt>
-        <dd class="markdown">{% markdown details.bookmark.notes %}</dd>
-      </div>
+      <section class="notes col-2">
+        <h3>Notes</h3>
+        <div class="markdown">{% markdown details.bookmark.notes %}</div>
+      </section>
     {% endif %}
-  </dl>
+  </div>
 </form>

bookmarks/templates/bookmarks/details/modal.html

@@ -1,21 +1,17 @@
-<div class="modal active bookmark-details"
-     ld-details-modal>
-  <a href="{{ details.close_url }}" data-turbo-frame="details-modal">
-    <div class="modal-overlay" aria-label="Close"></div>
-  </a>
-  <div class="modal-container">
+<div class="modal active bookmark-details" ld-details-modal
+     data-bookmark-id="{{ details.bookmark.id }}" data-close-url="{{ details.close_url }}">
+  <div class="modal-overlay"></div>
+  <div class="modal-container" role="dialog" aria-modal="true">
     <div class="modal-header">
       <h2>{{ details.bookmark.resolved_title }}</h2>
-      <a href="{{ details.close_url }}" data-turbo-frame="details-modal">
-        <button class="close">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-               stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <path d="M18 6l-12 12"></path>
-            <path d="M6 6l12 12"></path>
-          </svg>
-        </button>
-      </a>
+      <button class="close" aria-label="Close dialog">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M18 6l-12 12"></path>
+          <path d="M6 6l12 12"></path>
+        </svg>
+      </button>
     </div>
     <div class="modal-body">
       <div class="content">

bookmarks/templates/bookmarks/index.html

@@ -13,7 +13,7 @@
         <div class="header-controls">
           {% bookmark_search bookmark_list.search %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-tag-modal class="btn ml-2 show-md">Tags</button>
+          <button ld-tag-modal-trigger class="btn ml-2 show-md">Tags</button>
         </div>
       </div>
 
@@ -38,12 +38,14 @@
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
-
-    {# Bookmark details #}
-    <turbo-frame id="details-modal" target="_top">
-      {% if details %}
-        {% include 'bookmarks/details/modal.html' %}
-      {% endif %}
-    </turbo-frame>
   </div>
 {% endblock %}
+
+{% block overlays %}
+  {# Bookmark details #}
+  <turbo-frame id="details-modal" target="_top">
+    {% if details %}
+      {% include 'bookmarks/details/modal.html' %}
+    {% endif %}
+  </turbo-frame>
+{% endblock %}

bookmarks/templates/bookmarks/layout.html

@@ -97,5 +97,9 @@
   {% block content %}
   {% endblock %}
 </div>
+<div class="modals">
+  {% block overlays %}
+  {% endblock %}
+</div>
 </body>
 </html>

bookmarks/templates/bookmarks/shared.html

@@ -12,7 +12,7 @@
         <h2>Shared bookmarks</h2>
         <div class="header-controls">
           {% bookmark_search bookmark_list.search mode='shared' %}
-          <button ld-tag-modal class="btn ml-2 show-md">Tags
+          <button ld-tag-modal-trigger class="btn ml-2 show-md">Tags
           </button>
         </div>
       </div>
@@ -43,12 +43,14 @@
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
-
-    {# Bookmark details #}
-    <turbo-frame id="details-modal" target="_top">
-      {% if details %}
-        {% include 'bookmarks/details/modal.html' %}
-      {% endif %}
-    </turbo-frame>
   </div>
 {% endblock %}
+
+{% block overlays %}
+  {# Bookmark details #}
+  <turbo-frame id="details-modal" target="_top">
+    {% if details %}
+      {% include 'bookmarks/details/modal.html' %}
+    {% endif %}
+  </turbo-frame>
+{% endblock %}