Improve appearance of remove/undo buttons

Weasyl · Dec 27, 2024 · b2de552 · b2de552
1 parent b5983a8
commit b2de552
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/assets/js/edit-profile.js b/assets/js/edit-profile.js
@@ -25,6 +25,7 @@ function markEntryForRemoval() {
     });
 
     this.textContent = '🔄';
+    this.ariaLabel = 'Undo';
     this.className.replace('negative', 'positive');
     this.removeEventListener('click', markEntryForRemoval);
     this.addEventListener('click', unmarkEntryForRemoval);
@@ -35,7 +36,8 @@ function unmarkEntryForRemoval() {
         element.disabled = false;
     });
 
-    this.textContent = '🗑';
+    this.textContent = '❌';
+    this.ariaLabel = 'Remove';
     this.className.replace('positive', 'negative');
     this.removeEventListener('click', unmarkEntryForRemoval);
     this.addEventListener('click', markEntryForRemoval);
@@ -68,7 +70,9 @@ function addNewSocialGroupIfNeeded() {
 
 newSocialGroup.addEventListener('input', addNewSocialGroupIfNeeded);
 
-document.querySelectorAll('tr:not(#new-social-group) .remove-contact').forEach(element => {
+document.querySelector('th.remove-contact').hidden = false;
+
+document.querySelectorAll('tr:not(#new-social-group) td.remove-contact').forEach(element => {
     element.hidden = false;
     element.firstChild.addEventListener('click', markEntryForRemoval);
 });

diff --git a/weasyl/templates/control/edit_profile.html b/weasyl/templates/control/edit_profile.html
@@ -138,7 +138,7 @@ <h3>Contact and Social Media</h3>
             <th id="site-name-header" class="site-name">Site name</th>
             <th id="site-label-header" class="site-label">Label (optional)</th>
             <th id="site-value-header">Username or URL</th>
-            <th class="remove-contact" hidden>🗑</th>
+            <th class="remove-contact" hidden aria-label="Actions"></th>
           </tr>
         </thead>
         <tbody>
@@ -147,13 +147,13 @@ <h3>Contact and Social Media</h3>
               <td class="site-name"><input is="weasyl-combobox" type="text" class="input" name="site_names" value="${site}" placeholder="Site name" list="known-social-sites" aria-labelledby="site-name-header"></td>
               <td class="site-label"><input type="text" class="input" name="site_labels" value="${label}" placeholder="✏️ Label" aria-labelledby="site-label-header"></td>
               <td><input type="text" class="input" name="site_values" value="${value}" placeholder="Username or URL" aria-labelledby="site-label-header"></td>
-              <td class="remove-contact" hidden><button class="button negative" type="button">🗑</button></td>
+              <td class="remove-contact" hidden><button class="button negative" type="button" aria-label="Remove">❌</button></td>
             </tr>
           <tr id="new-social-group">
             <td class="site-name"><input is="weasyl-combobox" type="text" class="input" name="site_names" placeholder="Site name" list="known-social-sites" aria-labelledby="site-name-header"></td>
             <td class="site-label"><input type="text" class="input" name="site_labels" placeholder="✏️ Label" aria-labelledby="site-label-header"></td>
             <td><input type="text" class="input" name="site_values" placeholder="Username or URL" aria-labelledby="site-value-header"></td>
-            <td class="remove-contact" hidden><button class="button negative" type="button">🗑</button></td>
+            <td class="remove-contact" hidden><button class="button negative" type="button" aria-label="Remove">❌</button></td>
           </tr>
         </tbody>
       </table>