13 links rely on color to be distinguishable on item view page (ufal#79)

* Improve link accessibility on item pages

Adds underline and focus styles to links in full and simple item pages to meet WCAG 1.4.1 requirements, ensuring links are distinguishable by more than color alone and have visible focus outlines.

* Exclude icon links from underline accessibility styles

Updated SCSS selectors to prevent Font Awesome icon links (.fab, .fas, .far) from receiving underline styles intended for accessible text links, ensuring visual consistency and improved accessibility compliance.

* Update link styles for accessibility compliance

Replaces underline styles with bold and italic for non-button links in full and simple item page components to ensure links are distinguishable by more than color alone, addressing WCAG 1.4.1 requirements.

* Use $primary variable for link focus outline color

Replaces hardcoded #1459c4 color with the $primary SCSS variable for link focus outlines in both full and simple item page components to improve theme consistency.

* Exclude more classes from link styling in full item page

Added .badge, .nav-link, and .dropdown-item to the list of excluded classes for custom link styles to prevent unintended styling on these elements and improve WCAG compliance.

* Remove unnecessary !important from link styles

Cleaned up SCSS for full and simple item pages by removing redundant !important flags from link styling rules, improving maintainability and specificity.

Author: amadulhaxxani

src/app/item-page/full/full-item-page.component.scss

@@ -14,3 +14,19 @@
     max-width: none;
   }
 }
+
+// WCAG 1.4.1: Links must be distinguishable by more than color alone
+.full-item-info ::ng-deep a:not(.btn):not(.fab):not(.fas):not(.far):not(.badge):not(.nav-link):not(.dropdown-item) {
+  font-weight: 600;
+  font-style: italic;
+}
+
+.full-item-info ::ng-deep a:not(.btn):not(.fab):not(.fas):not(.far):not(.badge):not(.nav-link):not(.dropdown-item):hover,
+.full-item-info ::ng-deep a:not(.btn):not(.fab):not(.fas):not(.far):not(.badge):not(.nav-link):not(.dropdown-item):focus {
+  text-decoration-thickness: 0.08em;
+}
+
+.full-item-info ::ng-deep a:focus-visible {
+  outline: 2px solid #{$primary};
+  outline-offset: 2px;
+}

src/app/item-page/simple/item-page.component.scss

@@ -43,3 +43,19 @@ pre {
   border-radius: 4px;
   white-space: pre-wrap;
 }
+
+// WCAG 1.4.1: Links must be distinguishable by more than color alone
+.item-page ::ng-deep a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.fab):not(.fas):not(.far) {
+  font-weight: 600;
+  font-style: italic;
+}
+
+.item-page ::ng-deep a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.fab):not(.fas):not(.far):hover,
+.item-page ::ng-deep a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.fab):not(.fas):not(.far):focus {
+  text-decoration-thickness: 0.08em;
+}
+
+.item-page ::ng-deep a:focus-visible {
+  outline: 2px solid #{$primary};
+  outline-offset: 2px;
+}