feat(typography): add underline to links for accessibility

fixes VPAT-13812, closes #352
vmware-clarity · Dec 12, 2022 · af3a5ef · af3a5ef
1 parent d0f362d
commit af3a5ef
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 17 deletions.
diff --git a/projects/angular/src/layout/nav/_header.clarity.scss b/projects/angular/src/layout/nav/_header.clarity.scss
@@ -78,7 +78,7 @@
       display: inline-flex;
       align-items: center;
       height: $clr-header-height;
-      @include remove-text-decoration();
+      text-decoration: none;
 
       &:focus {
         outline-offset: $clr-header-outline-offset; // So that the outline styles aren't hidden because of the browser
@@ -139,7 +139,7 @@
       display: inline-block;
       text-align: center;
       padding: $clr-header-nav-text-vertical-padding $clr-header-nav-text-horizontal-padding;
-      @include remove-text-decoration();
+      text-decoration: none;
       @include header-nav-appearance();
 
       .fa, /* TODO: deprecated. Remove support for font awesome*/

diff --git a/projects/angular/src/layout/nav/_links.clarity.scss b/projects/angular/src/layout/nav/_links.clarity.scss
@@ -8,21 +8,17 @@
   // only imported for demos. gives a static view of links in various states.
   a.link-normal:link {
     @include css-var(color, clr-link-color, $clr-link-color, $clr-use-custom-properties);
-    text-decoration: none;
   }
 
   a.link-hovered:link {
     @include css-var(color, clr-link-hover-color, $clr-link-hover-color, $clr-use-custom-properties);
-    text-decoration: underline;
   }
 
   a.link-clicked:link {
     @include css-var(color, clr-link-active-color, $clr-link-active-color, $clr-use-custom-properties);
-    text-decoration: underline;
   }
 
   a.link-visited:link {
     @include css-var(color, clr-link-visited-color, $clr-link-visited-color, $clr-use-custom-properties);
-    text-decoration: none;
   }
 }
diff --git a/projects/angular/src/layout/nav/_subnav.clarity.scss b/projects/angular/src/layout/nav/_subnav.clarity.scss
@@ -26,6 +26,11 @@
       padding-left: $clr_baselineRem_1;
     }
 
+    .nav-item,
+    .nav-item a {
+      text-decoration: none;
+    }
+
     aside {
       flex: 0 0 auto;
       display: flex;

diff --git a/projects/angular/src/layout/vertical-nav/_vertical-nav.clarity.scss b/projects/angular/src/layout/vertical-nav/_vertical-nav.clarity.scss
@@ -278,6 +278,7 @@
     .nav-link {
       //Display
       display: flex;
+      text-decoration: none;
 
       //Others
       @include vertical-nav-link-colors();

diff --git a/projects/angular/src/popover/dropdown/_dropdown.clarity.scss b/projects/angular/src/popover/dropdown/_dropdown.clarity.scss
@@ -167,6 +167,10 @@
       @include generate-dropdown-item-height();
     }
 
+    a.dropdown-item {
+      text-decoration: none;
+    }
+
     .dropdown-divider {
       font-size: $clr-dropdown-header-font-size;
       @include css-var(

diff --git a/projects/angular/src/utils/_mixins.scss b/projects/angular/src/utils/_mixins.scss
@@ -70,13 +70,6 @@ $clr-outline-spread: $clr_baselineRem_2px;
   margin: 0 0 $clr_baselineRem_-1px 0 !important;
 }
 
-@mixin remove-text-decoration() {
-  &:hover,
-  &:active {
-    text-decoration: none;
-  }
-}
-
 @mixin focus-within() {
   &:focus-within,
   &.focus-within {

diff --git a/projects/angular/src/utils/_reboot.clarity.scss b/projects/angular/src/utils/_reboot.clarity.scss
@@ -423,24 +423,20 @@
 
   a:link {
     @include css-var(color, clr-link-color, $clr-link-color, $clr-use-custom-properties);
-    text-decoration: none;
   }
 
   a:visited {
     @include css-var(color, clr-link-visited-color, $clr-link-visited-color, $clr-use-custom-properties);
-    text-decoration: none;
     &:hover {
       @include css-var(color, clr-link-visited-color-hover, $clr-link-visited-color, $clr-use-custom-properties);
     }
   }
 
   a:hover {
     @include css-var(color, clr-link-hover-color, $clr-link-hover-color, $clr-use-custom-properties);
-    text-decoration: underline;
   }
 
   a:active {
     @include css-var(color, clr-link-active-color, $clr-link-active-color, $clr-use-custom-properties);
-    text-decoration: underline;
   }
 }