links

mdn · Feb 15, 2024 · 851071e · 851071e
1 parent fda55b4
commit 851071e
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 52 deletions.
diff --git a/client/src/app.scss b/client/src/app.scss
@@ -158,7 +158,6 @@ main {
 }
 
 .about-container,
-.curriculum-content,
 .main-page-content {
   a {
     &:link,

diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss
@@ -99,43 +99,45 @@
 }
 
 .curriculum-content-container {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    a:link,
-    a:visited {
-      color: var(--text-primary);
-      text-decoration: none;
-    }
-
-    a:hover,
-    a:focus {
-      text-decoration: underline;
-    }
+  > .curriculum-content {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      a:link,
+      a:visited {
+        color: var(--text-primary);
+        text-decoration: none;
+      }
 
-    a:active {
-      background-color: transparent;
-    }
+      a:hover,
+      a:focus {
+        text-decoration: underline;
+      }
 
-    a[href^="#"] {
-      &::before {
-        color: var(--text-inactive);
-        content: "#";
-        display: inline-block;
-        font-size: 0.7em;
-        line-height: 1;
-        margin-left: -0.8em;
-        text-decoration: none;
-        visibility: hidden;
-        width: 0.8em;
+      a:active {
+        background-color: transparent;
       }
 
-      &:hover {
+      a[href^="#"] {
         &::before {
-          visibility: visible;
+          color: var(--text-inactive);
+          content: "#";
+          display: inline-block;
+          font-size: 0.7em;
+          line-height: 1;
+          margin-left: -0.8em;
+          text-decoration: none;
+          visibility: hidden;
+          width: 0.8em;
+        }
+
+        &:hover {
+          &::before {
+            visibility: visible;
+          }
         }
       }
     }
@@ -154,24 +156,22 @@
   }
 
   .curriculum-content {
-    a:not(.button) {
+    a {
       color: var(--text-link);
-      width: fit-content;
 
-      &:visited:not([href^="#"]) {
-        // Distinguish visited links (excl. anchor links).
-        color: var(--text-visited);
+      &:link,
+      &:visited {
+        text-decoration: underline;
       }
 
-      &:active,
-      &:active:visited {
-        background-color: var(--text-link);
-        color: #fff;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
 
-        code {
-          background-color: transparent;
-          color: #fff;
-        }
+      &:visited:not([href^="#"]) {
+        // Distinguish visited links (excl. anchor links).
+        color: var(--text-visited);
       }
     }
   }

diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss
@@ -445,6 +445,7 @@
             padding-right: var(--button-padding);
             position: relative;
             text-align: center;
+            text-decoration: none;
             width: fit-content;
             @media screen and (min-width: $screen-md) {
               justify-self: start;

diff --git a/client/src/curriculum/landing.tsx b/client/src/curriculum/landing.tsx
@@ -77,7 +77,7 @@ function Header({ section, h1 }: { section: any; h1?: string }) {
         <h2>{section.value.title}</h2>
         <div dangerouslySetInnerHTML={html}></div>
       </section>
-      <LandingSVG />
+      <LandingSVG aria-label="woman in chair" role="img" />
     </header>
   );
 }

diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss
@@ -163,6 +163,7 @@
         @media screen and (min-width: $screen-md) {
           min-width: initial;
         }
+
         &:hover {
           border-color: rgba(227, 100, 42, 0.7);
         }
@@ -175,6 +176,11 @@
             flex-direction: column;
             height: 10rem;
             padding: 1rem 2rem;
+            text-decoration: none;
+
+            &:hover {
+              text-decoration: underline;
+            }
 
             svg.topic-icon {
               height: 4rem;

diff --git a/client/src/curriculum/topic-icon.tsx b/client/src/curriculum/topic-icon.tsx
@@ -20,15 +20,21 @@ enum Topic {
 export function TopicIcon({ topic }: { topic: Topic }) {
   switch (topic) {
     case Topic.WebStandards:
-      return <StandardsSVG className="topic-icon topic-standards" />;
+      return (
+        <StandardsSVG role="none" className="topic-icon topic-standards" />
+      );
     case Topic.Styling:
-      return <StylingSVG className="topic-icon topic-styling" />;
+      return <StylingSVG role="none" className="topic-icon topic-styling" />;
     case Topic.Scripting:
-      return <ScriptingSVG className="topic-icon topic-scripting" />;
+      return (
+        <ScriptingSVG role="none" className="topic-icon topic-scripting" />
+      );
     case Topic.Tooling:
-      return <ToolingSVG className="topic-icon topic-tooling" />;
+      return <ToolingSVG role="none" className="topic-icon topic-tooling" />;
     case Topic.BestPractices:
-      return <PracticesSVG className="topic-icon topic-practices" />;
+      return (
+        <PracticesSVG role="none" className="topic-icon topic-practices" />
+      );
     default:
       return <></>;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -158,7 +158,6 @@ main { @@
     }
     .about-container,
-    .curriculum-content,
     .main-page-content {
       a {
         &:link,
@@ Expand Down @@