fix: use aria-label instead of data attribute for annotations

NBISweden · May 17, 2024 · 2039679 · 2039679
1 parent 9c551b0
commit 2039679
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -51,7 +51,7 @@
     }
     .annotated-sequence::after {
       letter-spacing: normal;
-      content: attr(data-annotation);
+      content: attr(aria-label);
       height: 20px;
       text-align: center;
       line-height: 20px;

diff --git a/templates/form.html b/templates/form.html
@@ -61,7 +61,7 @@ <h4 class="accordion-header">
               <div id="collapse-annotated-{{ index }}" class="accordion-collapse collapse show" data-bs-parent="#accordion-{{ index }}">
                 <div class="accordion-body">
                   <p>
-                    {{#annotations}}<span class="annotated-sequence break-all" data-annotation="{{ label }}">{{ sequence }}</span>{{/annotations}}
+                    {{#annotations}}<span class="annotated-sequence break-all" aria-label="{{ label }}">{{ sequence }}</span>{{/annotations}}
                   </p>
                 </div>
               </div>
@@ -75,7 +75,7 @@ <h4 class="accordion-header">
               <div id="collapse-sequence-{{ index }}" class="accordion-collapse collapse" data-bs-parent="#accordion-{{ index }}">
                 <div class="accordion-body">
                   <p>
-                    <span class="annotated-sequence break-all" data-annotation="Oligo sequence">{{ sequence }}</span>
+                    <span class="annotated-sequence break-all" aria-label="Oligo sequence">{{ sequence }}</span>
                   </p>
                 </div>
               </div>
@@ -112,7 +112,7 @@ <h4 class="accordion-header">
           {{#listItems}}
             <tr>
               <td>{{ gene_id }}</td>
-              <td>{{#annotations}}<span class="annotated-sequence break-all" data-annotation="{{ label }}">{{ sequence }}</span>{{/annotations}}</td>
+              <td>{{#annotations}}<span class="annotated-sequence break-all" aria-label="{{ label }}">{{ sequence }}</span>{{/annotations}}</td>
             </tr>
           {{/listItems}}
           </tbody>