3.2.1 dev (#89)

* Add "link" icon to Image panel and tooltips & relative position to annotations

* CSS fixes for forced-colors mode, background colour for images in Images tab

dist/css/annotations.css

@@ -2,10 +2,12 @@
 /*   Error, Warning, Pass annotations    */
 /* ************************************* */
 .instance {
+  position: relative;
   display: block;
 }
 
 .instance-inline {
+  position: relative;
   display: inline-block;
   text-align: end;
 }

dist/css/control-panel.css

@@ -99,6 +99,7 @@ audio {
 }
 @media screen and (forced-colors: active) {
   #toggle {
+    background: ButtonFace !important;
     border: 2px solid transparent;
   }
 }
@@ -601,7 +602,7 @@ hr {
   content: "";
 }
 #images-list li .badge {
-  margin-inline-end: 4px;
+  margin-inline-end: 2px;
 }
 #images-list li img {
   float: inline-start;
@@ -614,22 +615,29 @@ hr {
   color: var(--sa11y-yellow-text);
 }
 #images-list li.warning img {
+  background-color: var(--sa11y-yellow-text);
   border: 5px solid var(--sa11y-yellow-text);
 }
 #images-list li.error .alt {
   color: var(--sa11y-error);
 }
 #images-list li.error img {
+  background-color: var(--sa11y-error);
   border: 5px solid var(--sa11y-error);
 }
 #images-list li.good img {
+  background-color: var(--sa11y-panel-badge);
   border: 5px solid var(--sa11y-panel-badge);
 }
+@media screen and (forced-colors: active) {
+  #images-list li img {
+    background-color: ButtonBorder !important;
+  }
+}
 
 /* **************************************** */
-/*         11. Page Outline extras          */
+/*    11. Page & Image Outline extras       */
 /* **************************************** */
-/* Error icon */
 .error-icon {
   display: inline-block;
   width: 16px;
@@ -640,7 +648,6 @@ hr {
           mask: var(--sa11y-error-svg) center no-repeat;
 }
 
-/* Hidden icon */
 .hidden-icon {
   display: inline-block;
   width: 16px;
@@ -651,15 +658,29 @@ hr {
           mask: var(--sa11y-hidden-icon-svg) center no-repeat;
 }
 
+.link-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-bottom: -3px;
+  background: var(--sa11y-panel-primary);
+  -webkit-mask: var(--sa11y-link-icon-svg) center no-repeat;
+          mask: var(--sa11y-link-icon-svg) center no-repeat;
+}
+
+.error-badge .link-icon,
 .error-badge .hidden-icon {
   background: var(--sa11y-error-text);
 }
 
+.warning-badge .link-icon,
 .warning-badge .hidden-icon {
   background: var(--sa11y-panel-bg);
 }
 
 @media screen and (forced-colors: active) {
+  .error-icon,
+  .link-icon,
   .hidden-icon {
     filter: invert(1);
   }

dist/css/sa11y.css

@@ -25,6 +25,7 @@
   --sa11y-hidden-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z'/%3E%3C/svg%3E");
   --sa11y-dismiss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-87.5-68.6c.5-1.7 .7-3.5 .7-5.4c0-27.6-11-54.1-30.5-73.7L512 320c-20.5-20.5-32-48.3-32-77.3V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V51.2c-42.6 8.6-79 34.2-102 69.3L38.8 5.1zM160 242.7c0 29-11.5 56.8-32 77.3l-1.5 1.5C107 341 96 367.5 96 395.2c0 11.5 9.3 20.8 20.8 20.8H406.2L160 222.1v20.7zM384 448H320 256c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/svg%3E");
   --sa11y-low-vision-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223 149.5c48.6-44.3 123-50.8 179.3-11.7c60.8 42.4 78.9 123.2 44.2 186.9L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3L223 149.5zm223.1 298L83.1 161.5c-11 14.4-20.5 28.7-28.4 42.2l339 265.7c18.7-5.5 36.2-13 52.6-21.8zM34.5 268.3c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c3.1 0 6.1-.1 9.2-.2L33.1 247.8c-1.8 6.8-1.3 14 1.4 20.5z'/%3E%3C/svg%3E");
+  --sa11y-link-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/svg%3E");
   /* i18n: utility to flip icons for transform: scaleX(y) */
   --sa11y-icon-direction: 1;
   --sa11y-float-rtl: right;