feat: refact UI

codespace-telemetry-debug.log

@@ -0,0 +1,20 @@
+[2026-03-06T12:52:04.705Z] === CodespaceTelemetryService Constructor Started ===
+[2026-03-06T12:52:04.709Z] Session ID: 1772801524705-3xagwzqnckb
+[2026-03-06T12:52:04.716Z] CODESPACE_NAME: undefined
+[2026-03-06T12:52:04.719Z] CODESPACES: undefined
+[2026-03-06T12:52:04.722Z] GITHUB_USER: undefined
+[2026-03-06T12:52:04.725Z] GITHUB_CODESPACE_TOKEN: NOT SET
+[2026-03-06T12:52:04.727Z] NOT IN GENUINE GITHUB CODESPACE - Service disabled
+[2026-03-06T12:52:04.730Z]   CODESPACE_NAME: missing
+[2026-03-06T12:52:04.732Z]   CODESPACES: missing
+[2026-03-06T12:52:04.734Z]   GITHUB_CODESPACE_TOKEN: missing
+[2026-03-23T16:52:06.207Z] === CodespaceTelemetryService Constructor Started ===
+[2026-03-23T16:52:06.214Z] Session ID: 1774284726207-l65z4ea2iid
+[2026-03-23T16:52:06.219Z] CODESPACE_NAME: undefined
+[2026-03-23T16:52:06.222Z] CODESPACES: undefined
+[2026-03-23T16:52:06.224Z] GITHUB_USER: undefined
+[2026-03-23T16:52:06.226Z] GITHUB_CODESPACE_TOKEN: NOT SET
+[2026-03-23T16:52:06.230Z] NOT IN GENUINE GITHUB CODESPACE - Service disabled
+[2026-03-23T16:52:06.234Z]   CODESPACE_NAME: missing
+[2026-03-23T16:52:06.243Z]   CODESPACES: missing
+[2026-03-23T16:52:06.245Z]   GITHUB_CODESPACE_TOKEN: missing

src/rules/contrast.ts

@@ -72,7 +72,7 @@ function isTransparent(color: string): boolean {
 
 export class ContrastRule extends ValidationRule {
   type = ValidationRuleType.Error;
-  name = "ContrastRule";
+  name = "contrast-rule";
   anchored = true;
 
   accept(element: HTMLElement): boolean {

src/rules/tabindex.ts

@@ -45,7 +45,7 @@ const INTERACTIVE_ROLES = new Set([
 
 export class TabIndexRule extends ValidationRule {
   type = ValidationRuleType.Warning;
-  name = "tabindex";
+  name = "tab-index";
   anchored = true;
 
   accept(element: HTMLElement): boolean {

src/ui/highlighter.css

@@ -1,10 +1,9 @@
 .abledom-highlight {
-  background-color: yellow;
   box-sizing: border-box;
   display: none;
-  opacity: 0.6;
   position: fixed;
   z-index: 100499;
+  pointer-events: none !important;
 }
 
 .abledom-highlight-border1 {
@@ -28,3 +27,20 @@
   height: calc(100% + 20px);
   margin: -10px 0;
 }
+
+.abledom-dimming-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100498;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.abledom-dimming-overlay.visible {
+  opacity: 1;
+}