UX: Convert alert & modal close to buttons for improved accessibility

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

@@ -3,11 +3,7 @@
     <div class="modal-inner-container">
       <div class="modal-header">
         {{#if dismissable}}
-          <div class='modal-close'>
+          {{d-button icon="times" action=(route-action "closeModal") class="btn btn-flat modal-close close" }}
-            <a class="close" href {{action closeModal}}>
-              {{d-icon "times"}}
-            </a>
-          </div>
         {{/if}}
 
         {{#if panels}}

app/assets/javascripts/discourse/templates/components/discourse-banner.hbs

@@ -1,9 +1,7 @@
 {{#if visible}}
   <div class="row">
     <div id="banner" class={{overlay}}>
-      <div class="close" {{action "dismiss"}}>
+      {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
-        {{d-icon "times" title="banner.close"}}
-      </div>
       <div id="banner-content">
         {{{banner.html}}}
         {{#if currentUser.staff}}

app/assets/javascripts/discourse/templates/components/notification-consent-banner.hbs

@@ -1,9 +1,7 @@
 {{#if showNotificationPromptBanner}}
   <div class="row">
     <div class="consent_banner alert alert-info">
-      <div class="close" {{action "dismiss"}}>
+      {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
-        {{d-icon 'times'}}
-      </div>
       {{i18n 'user.desktop_notifications.consent_prompt'}} <a {{action "turnon"}}>{{i18n 'user.desktop_notifications.enable'}}</a>.
     </div>
   </div>

app/assets/javascripts/discourse/templates/components/pwa-install-banner.hbs

@@ -1,9 +1,7 @@
 {{#if showPWAInstallBanner}}
   <div class="row">
     <div class="pwa-install-banner alert alert-info">
-      <div class="close" {{action "dismiss"}}>
+      {{d-button icon="times" action="dismiss" class="btn btn-flat close" title="banner.close"}}
-        {{d-icon 'times'}}
-      </div>
       <span>
         {{discourse-linked-text action=(action "turnOn") translatedText=(i18n "pwa.install_banner" title=siteSettings.title)}}
       </span>

app/assets/javascripts/discourse/templates/components/share-popup.hbs

@@ -35,8 +35,7 @@
       </div>
     {{/if}}
 
-    <a href {{action "close"}} class="close-share" aria-label={{i18n "share.close"}} title={{i18n "share.close"}}>
+
-      {{d-icon "times"}}
+    {{d-button action="close" class="btn btn-flat close" icon="times" aria-label="share.close" title="share.close"}}
-    </a>
   </div>
 </div>

app/assets/stylesheets/common/base/alert.scss

@@ -8,21 +8,12 @@
     position: absolute;
     top: 8px;
     right: 8px;
-    line-height: $line-height-small;
     font-size: $font-up-3;
-    color: $primary-low-mid;
+    .d-icon {
-    @include hover {
+      color: $primary-low-mid;
-      color: $primary-medium;
-      cursor: pointer;
     }
   }
-  button.close {
+
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    -webkit-appearance: none;
-  }
   &.alert-success {
     background-color: $success-low;
     color: $primary;

app/assets/stylesheets/common/components/buttons.scss

@@ -59,15 +59,11 @@
     color: $primary;
     min-height: unset; // ovverides button defaults
   }
-  .discourse-no-touch & {
+  @include hover {
-    // only allow hover on no-touch devices
+    background: $primary-medium;
-    &:hover,
+    color: $secondary;
-    &.btn-hover {
+    .d-icon {
-      background: $primary-medium;
+      color: $secondary-very-high;
-      color: $secondary;
-      .d-icon {
-        color: $secondary-very-high;
-      }
     }
   }
   &[disabled],
@@ -104,17 +100,13 @@
   &[href] {
     color: $secondary;
   }
-  .discourse-no-touch & {
+  @include hover {
-    // only allow hover on no-touch devices
+    background: dark-light-choose(
-    &:hover,
+      scale-color($tertiary, $lightness: -20%),
-    &.btn-hover {
+      scale-color($tertiary, $lightness: 20%)
-      background: dark-light-choose(
+    );
-        scale-color($tertiary, $lightness: -20%),
+    .d-icon {
-        scale-color($tertiary, $lightness: 20%)
+      color: currentColor;
-      );
-      .d-icon {
-        color: currentColor;
-      }
     }
   }
   &:active,
@@ -146,17 +138,13 @@
   &[href] {
     color: $secondary;
   }
-  .discourse-no-touch & {
+  @include hover {
-    // only allow hover on no-touch devices
+    background: dark-light-choose(
-    &:hover,
+      scale-color($danger, $lightness: -20%),
-    &.btn-hover {
+      scale-color($danger, $lightness: 20%)
-      background: dark-light-choose(
+    );
-        scale-color($danger, $lightness: -20%),
+    .d-icon {
-        scale-color($danger, $lightness: 20%)
+      color: $danger-low;
-      );
-      .d-icon {
-        color: $danger-low;
-      }
     }
   }
   &:active,
@@ -266,8 +254,21 @@
   .d-icon {
     color: $primary-low-mid;
   }
-  .discourse-no-touch & {
+  @include hover {
-    &:hover {
+    .d-icon {
+      color: $primary;
+    }
+  }
+  &.close {
+    padding: 0;
+    min-height: unset;
+    background: transparent;
+    font-size: $font-up-3;
+    .d-icon {
+      color: $primary-high;
+    }
+    @include hover {
+      background: transparent;
       .d-icon {
         color: $primary;
       }

app/assets/stylesheets/common/foundation/mixins.scss

@@ -47,9 +47,11 @@ $breakpoints: (
 // Visibility
 // --------------------------------------------------
 
+// Only shows hover on non-touch devices
 @mixin hover {
   .discourse-no-touch & {
-    &:hover {
+    &:hover,
+    &.btn-hover {
       @content;
     }
   }