DEV: enforces no-invalid-interactive linting rule (#8907)

.template-lintrc.js

@@ -5,6 +5,7 @@ module.exports = {
   rules: {
     "self-closing-void-elements": true,
     "table-groups": true,
-    "style-concatenation": true
+    "style-concatenation": true,
+    "no-invalid-interactive": true
   }
 };

app/assets/javascripts/admin/templates/api-keys-show.hbs

@@ -13,7 +13,9 @@
     {{#if editingDescription}}
       {{input value=buffered.description maxlength="255" placeholder=(i18n "admin.api.description_placeholder")}}
     {{else}}
-      <span {{action "editDescription"}}>{{if model.description model.description (i18n "admin.api.no_description")}}</span>
+      <span>
+        {{if model.description model.description (i18n "admin.api.no_description")}}
+      </span>
     {{/if}}
 
     <div class='controls'>

app/assets/javascripts/admin/templates/badges-show.hbs

@@ -163,7 +163,11 @@
         label="admin.badges.save"}}
       <span class='saving'>{{savingStatus}}</span>
       {{#unless readOnly}}
-        <a {{action "destroy"}} class='delete-link'>{{i18n 'admin.badges.delete'}}</a>
+        {{d-button
+          action=(action "destroy")
+          class="btn-danger"
+          label="admin.badges.delete"
+        }}
       {{/unless}}
     </div>
   </form>

app/assets/javascripts/admin/templates/components/admin-editable-field.hbs

@@ -3,7 +3,9 @@
   {{#if editing}}
     {{text-field value=buffer autofocus="autofocus" autocomplete="discourse"}}
   {{else}}
-    <span {{action "edit"}}>{{value}}</span>
+    <a href {{action "edit"}} class="inline-editable-field">
+      <span>{{value}}</span>
+    </a>
   {{/if}}
 </div>
 <div class='controls'>

app/assets/javascripts/admin/templates/components/admin-theme-editor.hbs

@@ -4,11 +4,11 @@
         {{#each visibleTargets as |target|}}
         <li>
             {{#link-to editRouteName
-                theme.id 
-                target.name 
-                fieldName 
-                replace=true 
-                title=field.title 
+                theme.id
+                target.name
+                fieldName
+                replace=true
+                title=field.title
                 class=(if target.edited 'edited' 'blank')
             }}
             {{#if target.error}}{{d-icon 'exclamation-triangle'}}{{/if}}
@@ -19,14 +19,15 @@
             {{/link-to}}
         </li>
         {{/each}}
-        
+
         {{#if allowAdvanced}}
         <li>
-            <a {{action "toggleShowAdvanced"}} 
-                class='no-text' 
+            <a {{action "toggleShowAdvanced"}}
+                class='no-text'
+                href
                 title="{{i18n (concat "admin.customize.theme." (if showAdvanced "hide_advanced" "show_advanced"))}}"
             >
-                {{d-icon (if showAdvanced "angle-double-left" "angle-double-right")}}   
+                {{d-icon (if showAdvanced "angle-double-left" "angle-double-right")}}
             </a>
         </li>
         {{/if}}
@@ -48,38 +49,38 @@
         {{#each visibleFields as |field|}}
         <li>
             {{#link-to editRouteName
-            theme.id 
-            currentTargetName 
-            field.name 
-            replace=true 
-            title=field.title 
+            theme.id
+            currentTargetName
+            field.name
+            replace=true
+            title=field.title
             class=(if field.edited 'edited' 'blank')
             }}
             {{#if field.error}}{{d-icon 'exclamation-triangle'}}{{/if}}
             {{#if field.icon}}{{d-icon field.icon}}{{/if}}
             {{field.translatedName}}
-            
+
             {{/link-to}}
         </li>
         {{/each}}
 
         {{#if showAddField}}
         <li>
             {{#if addingField}}
-            {{input type=text value=newFieldName enter=(action 'addField') escape-press=(action "cancelAddField")}} 
-            {{d-button class="ok" action=(action "addField" newFieldName) icon="check"}} 
+            {{input type=text value=newFieldName enter=(action 'addField') escape-press=(action "cancelAddField")}}
+            {{d-button class="ok" action=(action "addField" newFieldName) icon="check"}}
             {{d-button class="cancel" action=(action "cancelAddField") icon="times"}}
             {{else}}
-            <a {{action "toggleAddField" currentTargetName}} class="no-text">
+            <a href {{action "toggleAddField" currentTargetName}} class="no-text">
             {{d-icon "plus"}}
             </a>
             {{/if}}
         </li>
         {{/if}}
         <li class='spacer'></li>
         <li>
-        <a {{action "toggleMaximize"}} class="no-text">
-            {{d-icon maximizeIcon}}
+        <a href {{action "toggleMaximize"}} class="no-text">
+          {{d-icon maximizeIcon}}
         </a>
         </li>
     </ul>

app/assets/javascripts/admin/templates/components/site-setting.hbs

@@ -1,7 +1,7 @@
 <div class='setting-label'>
    <h3>{{unbound settingName}}</h3>
    {{#if defaultIsAvailable}}
-     <a onClick={{action 'setDefaultValues'}}>{{setting.setDefaultValuesLabel}}</a>
+     <a href onClick={{action 'setDefaultValues'}}>{{setting.setDefaultValuesLabel}}</a>
    {{/if}}
 </div>
 <div class="setting-value">

app/assets/javascripts/admin/templates/components/themes-list-item.hbs

@@ -31,13 +31,13 @@
       <span class="components">{{{childrenString}}}</span>
 
       {{#if displayHasMore}}
-        <span {{action "toggleChildrenExpanded"}} class="others-count">
+        <a href {{action "toggleChildrenExpanded"}} class="others-count">
           {{#if childrenExpanded}}
             {{I18n "admin.customize.theme.collapse"}}
           {{else}}
             {{I18n "admin.customize.theme.and_x_more" count=moreCount}}
           {{/if}}
-        </span>
+        </a>
       {{/if}}
     </div>
   {{/if}}

app/assets/javascripts/admin/templates/components/themes-list.hbs

@@ -1,10 +1,17 @@
 <div class="themes-list-header">
-  <div {{action "changeView" THEMES}} class="themes-tab tab {{if themesTabActive 'active' ''}}">
-    {{I18n "admin.customize.theme.title"}}
-  </div><div {{action "changeView" COMPONENTS}} class="components-tab tab {{if componentsTabActive 'active' ''}}">
-    {{d-icon "puzzle-piece"}}
-    {{I18n "admin.customize.theme.components"}}
-  </div>
+  {{d-button
+    action=(action "changeView")
+    actionParam=THEMES
+    class=(concat "themes-tab " "tab " (if themesTabActive 'btn-danger active' ''))
+    label="admin.customize.theme.title"
+  }}
+  {{d-button
+    action=(action "changeView")
+    actionParam=COMPONENTS
+    class=(concat "components-tab " "tab " (if componentsTabActive 'btn-danger active' ''))
+    label="admin.customize.theme.components"
+    icon="puzzle-piece"
+  }}
 </div>
 
 <div class="themes-list-container">

app/assets/javascripts/admin/templates/customize-themes-show.hbs

@@ -3,9 +3,13 @@
     {{#if editingName}}
       {{text-field value=model.name autofocus="true"}}
       {{d-button action=(action "finishedEditingName") class="btn-primary submit-edit" icon="check"}}
-      {{d-button action=(action "cancelEditingName") class="btn-default cancel-edit" icon="times"}}
+      {{d-button action=(action "cancelEditingName") class="cancel-edit" icon="times"}}
     {{else}}
-      {{model.name}} <a {{action "startEditingName"}}>{{d-icon "pencil-alt"}}</a>
+      <span>{{model.name}}</span>
+      {{d-button
+        action=(action "startEditingName")
+        icon="pencil-alt"
+      }}
     {{/if}}
   </div>
 

app/assets/javascripts/admin/templates/email-bounced.hbs

@@ -29,7 +29,7 @@
           </td>
           <td><a href='mailto:{{unbound l.to_address}}'>{{l.to_address}}</a></td>
           {{#if l.has_bounce_key}}
-            <td><a {{action "showIncomingEmail" l.id}}>{{l.email_type}}</a></td>
+            <td><a href {{action "showIncomingEmail" l.id}}>{{l.email_type}}</a></td>
           {{else}}
             <td>{{l.email_type}}</td>
           {{/if}}

app/assets/javascripts/admin/templates/email-rejected.hbs

@@ -48,7 +48,7 @@
           </td>
           <td>{{email.subject}}</td>
           <td class="error">
-            <a {{action "showIncomingEmail" email.id}}>{{email.error}}</a>
+            <a href {{action "showIncomingEmail" email.id}}>{{email.error}}</a>
           </td>
         </tr>
       {{else}}

app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs

@@ -42,13 +42,13 @@
             {{#if item.editing}}
               {{text-field value=item.ip_address autofocus="autofocus"}}
             {{else}}
-              <span {{action "edit" item}}>
+              <a href {{action "edit" item}} class="inline-editable-field">
                 {{#if item.isRange}}
                   <strong>{{item.ip_address}}</strong>
                 {{else}}
                   {{item.ip_address}}
                 {{/if}}
-              </span>
+              </a>
             {{/if}}
           </td>
           <td class="col action">
@@ -108,7 +108,7 @@
                 action=(action "save")
                 actionParam=item
                 label="admin.logs.save"}}
-              <a {{action "cancel" item}}>{{i18n "cancel"}}</a>
+              <a href {{action "cancel" item}}>{{i18n "cancel"}}</a>
             {{/unless}}
           </td>
         </tr>

app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs

@@ -1,29 +1,29 @@
 <div class="staff-action-logs-controls">
   {{#if filtersExists}}
   <div class='staff-action-logs-filters'>
-    <a {{action "clearAllFilters"}} class="clear-filters filter">
+    <a href {{action "clearAllFilters"}} class="clear-filters filter">
       <span class="label">{{i18n 'admin.logs.staff_actions.clear_filters'}}</span>
     </a>
     {{#if actionFilter}}
-      <a {{action "clearFilter" "actionFilter"}} class="filter">
+      <a href {{action "clearFilter" "actionFilter"}} class="filter">
         <span class="label">{{i18n 'admin.logs.action'}}</span>: {{actionFilter}}
         {{d-icon "times-circle"}}
       </a>
     {{/if}}
     {{#if filters.acting_user}}
-      <a {{action "clearFilter" "acting_user"}} class="filter">
+      <a href {{action "clearFilter" "acting_user"}} class="filter">
         <span class="label">{{i18n 'admin.logs.staff_actions.staff_user'}}</span>: {{filters.acting_user}}
         {{d-icon "times-circle"}}
       </a>
     {{/if}}
     {{#if filters.target_user}}
-      <a {{action "clearFilter" "target_user"}} class="filter">
+      <a href {{action "clearFilter" "target_user"}} class="filter">
         <span class="label">{{i18n 'admin.logs.staff_actions.target_user'}}</span>: {{filters.target_user}}
         {{d-icon "times-circle"}}
       </a>
     {{/if}}
     {{#if filters.subject}}
-      <a {{action "clearFilter" "subject"}} class="filter">
+      <a href {{action "clearFilter" "subject"}} class="filter">
         <span class="label">{{i18n 'admin.logs.staff_actions.subject'}}</span>: {{filters.subject}}
         {{d-icon "times-circle"}}
       </a>
@@ -63,7 +63,7 @@
                 <div class="staff-user">
                   {{#if item.acting_user}}
                     {{#link-to 'adminUser' item.acting_user}}{{avatar item.acting_user imageSize="tiny"}}{{/link-to}}
-                    <a {{action "filterByStaffUser" item.acting_user}}>{{item.acting_user.username}}</a>
+                    <a href {{action "filterByStaffUser" item.acting_user}}>{{item.acting_user.username}}</a>
                   {{else}}
                     <span class="deleted-user" title="{{i18n 'admin.user.deleted'}}">
                       {{d-icon "far-trash-alt"}}
@@ -72,27 +72,27 @@
                 </div>
               </td>
               <td class="col value action">
-                <a {{action "filterByAction" item}}>{{item.actionName}}</a>
+                <a href {{action "filterByAction" item}}>{{item.actionName}}</a>
               </td>
               <td class="col value subject">
                 <div class="subject">
                   {{#if item.target_user}}
                     {{#link-to 'adminUser' item.target_user}}{{avatar item.target_user imageSize="tiny"}}{{/link-to}}
-                    <a {{action "filterByTargetUser" item.target_user}}>{{item.target_user.username}}</a>
+                    <a href {{action "filterByTargetUser" item.target_user}}>{{item.target_user.username}}</a>
                   {{/if}}
                   {{#if item.subject}}
-                    <a {{action "filterBySubject" item.subject}} title={{item.subject}}>{{item.subject}}</a>
+                    <a href {{action "filterBySubject" item.subject}} title={{item.subject}}>{{item.subject}}</a>
                   {{/if}}
                 </div>
               </td>
               <td class="col value created-at">{{age-with-tooltip item.created_at}}</td>
               <td class="col value details">
                 {{{item.formattedDetails}}}
                 {{#if item.useCustomModalForDetails}}
-                  <a {{action "showCustomDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n 'admin.logs.staff_actions.show'}}</a>
+                  <a href {{action "showCustomDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n 'admin.logs.staff_actions.show'}}</a>
                 {{/if}}
                 {{#if item.useModalForDetails}}
-                  <a {{action "showDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n 'admin.logs.staff_actions.show'}}</a>
+                  <a href {{action "showDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n 'admin.logs.staff_actions.show'}}</a>
                 {{/if}}
               </td>
               <td class="col value context">{{item.context}}</td>

app/assets/javascripts/admin/templates/modal/admin-uploaded-image-list.hbs

@@ -1,9 +1,9 @@
 {{#d-modal-body class="uploaded-image-list"}}
   <div class="selectable-avatars">
     {{#each images as |image|}}
-      <div class="selectable-avatar" {{action "remove" image}}>
+      <a href class="selectable-avatar" {{action "remove" image}}>
         {{bound-avatar-template image "huge"}}
-      </div>
+      </a>
     {{else}}
       <p>{{i18n "admin.site_settings.uploaded_image_list.empty"}}</p>
     {{/each}}

app/assets/javascripts/admin/templates/web-hooks-show-events.hbs

@@ -21,9 +21,9 @@
         <div class='clearfix'></div>
       </div>
       {{#if hasIncoming}}
-        <div class='alert alert-info clickable' tabindex="0" {{action "showInserted"}}>
+        <a href class='alert alert-info clickable' tabindex="0" {{action "showInserted"}}>
           {{count-i18n key="admin.web_hooks.events.incoming" count=incomingCount}}
-        </div>
+        </a>
       {{/if}}
       <ul>
         {{#each model as |webHookEvent|}}

app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs

@@ -1,11 +1,9 @@
 {{#conditional-loading-spinner condition=loading}}
   {{#if hasIncoming}}
   <div class="show-mores">
-    <div class='alert alert-info clickable' {{action showInserted}}>
-      <a tabindex="0" href="" {{action showInserted}}>
-        {{count-i18n key="topic_count_" suffix="latest" count=incomingCount}}
-      </a>
-    </div>
+    <a tabindex="0" href {{action showInserted}} class='alert alert-info clickable'>
+      {{count-i18n key="topic_count_" suffix="latest" count=2}}
+    </a>
   </div>
   {{/if}}
 

app/assets/javascripts/discourse/templates/components/composer-user-selector.hbs

@@ -10,8 +10,10 @@
                   allowEmails='true'
                   autocomplete="discourse"}}
 {{else}}
-  <div class='ac-wrap composer-user-selector-limited' {{action "toggleSelector"}}>
-    <span>{{limitedUsernames}}</span>
-    <span class='btn btn-primary'>{{hiddenUsersCount}}</span>
-  </div>
+    <a href {{action "toggleSelector"}}>
+    <div class='ac-wrap composer-user-selector-limited'>
+      <span>{{limitedUsernames}}</span>
+      <span class='btn btn-primary'>{{hiddenUsersCount}}</span>
+    </div>
+  </a>
 {{/if}}

app/assets/javascripts/discourse/templates/components/d-modal-cancel.hbs

@@ -1 +1 @@
-<a {{action close}} class='d-modal-cancel'>{{i18n 'cancel'}}</a>
+<a href {{action close}} class='d-modal-cancel'>{{i18n 'cancel'}}</a>

app/assets/javascripts/discourse/templates/components/expand-post.hbs

@@ -1,10 +1,10 @@
 {{#if item.truncated}}
   {{#if expanded}}
-    <a class="collapse-item" onclick={{action "toggleItem"}} title={{i18n "post.expand_collapse"}}>
+    <a href class="collapse-item" onclick={{action "toggleItem"}} title={{i18n "post.expand_collapse"}}>
       {{d-icon "chevron-up"}}
     </a>
   {{else}}
-    <a class="expand-item" onclick={{action "toggleItem"}} title={{i18n "post.expand_collapse"}}>
+    <a href class="expand-item" onclick={{action "toggleItem"}} title={{i18n "post.expand_collapse"}}>
       {{d-icon "chevron-down"}}
     </a>
   {{/if}}