From a074525bfbfc5ba7a225be27068de5c88692f780 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 22 Feb 2023 12:01:56 +0100
Subject: [PATCH] [a11y] Improve the visibility of link annotations in HCM

In order to help to identify a link, we add a border around it with the LinkText color.
And backdrop colors are inverted when the mouse pointer hovers them, this way it should
help to identify the link where the pointer is.
---
 web/annotation_layer_builder.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index 14bc98db3..ba1bb1dfe 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -20,6 +20,7 @@
   --input-unfocused-border-color: transparent;
   --input-disabled-border-color: transparent;
   --input-hover-border-color: black;
+  --link-outline: none;
 }
 
 @media screen and (forced-colors: active) {
@@ -28,6 +29,7 @@
     --input-unfocused-border-color: ActiveText;
     --input-disabled-border-color: GrayText;
     --input-hover-border-color: Highlight;
+    --link-outline: 1.5px solid LinkText;
   }
   .annotationLayer .textWidgetAnnotation input:required,
   .annotationLayer .textWidgetAnnotation textarea:required,
@@ -36,6 +38,10 @@
   .annotationLayer .buttonWidgetAnnotation.radioButton input:required {
     outline: 1.5px solid selectedItem;
   }
+
+  .annotationLayer .linkAnnotation:hover {
+    backdrop-filter: invert(100%);
+  }
 }
 
 .annotationLayer {
@@ -55,6 +61,10 @@
   transform-origin: 0 0;
 }
 
+.annotationLayer .linkAnnotation {
+  outline: var(--link-outline);
+}
+
 .annotationLayer .linkAnnotation > a,
 .annotationLayer .buttonWidgetAnnotation.pushButton > a {
   position: absolute;