Remove important from accessibility css (#412)

Author: haydar-metin

examples/workflow-glsp/css/diagram.css

@@ -72,33 +72,33 @@
     stroke-width: 1;
 }
 
-.sprotty-edge.weighted.low:not(.selected),
-.sprotty-edge.weighted.low:not(.selected) .arrow {
+.sprotty-edge.weighted.low:not(.selected, .navigable-element),
+.sprotty-edge.weighted.low:not(.selected, .navigable-element) .arrow {
     stroke: rgb(128, 90, 233);
 }
 
-.sprotty-edge.weighted.low:not(.selected) .arrow {
+.sprotty-edge.weighted.low:not(.selected, .navigable-element) .arrow {
     fill: rgb(128, 90, 233);
 }
 
-.sprotty-edge.weighted:not(.selected),
-.sprotty-edge.weighted:not(.selected) .arrow,
-.sprotty-edge.weighted.medium:not(.selected),
-.sprotty-edge.weighted.medium:not(.selected) .arrow {
+.sprotty-edge.weighted:not(.selected, .navigable-element),
+.sprotty-edge.weighted:not(.selected, .navigable-element) .arrow,
+.sprotty-edge.weighted.medium:not(.selected, .navigable-element),
+.sprotty-edge.weighted.medium:not(.selected, .navigable-element) .arrow {
     stroke: rgb(98, 60, 193);
 }
 
-.sprotty-edge.weighted:not(.selected) .arrow,
-.sprotty-edge.weighted.medium:not(.selected) .arrow {
+.sprotty-edge.weighted:not(.selected, .navigable-element) .arrow,
+.sprotty-edge.weighted.medium:not(.selected, .navigable-element) .arrow {
     fill: rgb(98, 60, 193);
 }
 
-.sprotty-edge.weighted.high:not(.selected),
-.sprotty-edge.weighted.high:not(.selected) .arrow {
+.sprotty-edge.weighted.high:not(.selected, .navigable-element),
+.sprotty-edge.weighted.high:not(.selected, .navigable-element) .arrow {
     stroke: rgb(68, 30, 163);
 }
 
-.sprotty-edge.weighted.high:not(.selected) .arrow {
+.sprotty-edge.weighted.high:not(.selected, .navigable-element) .arrow {
     fill: rgb(68, 30, 163);
 }
 

examples/workflow-standalone/css/diagram.css

@@ -27,7 +27,7 @@
     stroke: rgb(0, 0, 0);
 }
 
-.sprotty-edge {
+.sprotty-edge:not(.navigable-element) {
     stroke: black;
 }
 

packages/client/css/glsp-sprotty.css

@@ -318,21 +318,6 @@
     fill: transparent;
 }
 
-.search-hidden {
-    opacity: 0.4;
-}
-
-.search-highlighted .sprotty-node,
-.search-highlighted .sprotty-edge {
-    stroke-width: 1.5px;
-    stroke-width: 2px;
-    stroke-dashoffset: 5;
-    stroke-dasharray: 5, 5;
-    stroke-linecap: round;
-    stroke: rgb(218, 89, 15) !important;
-    stroke: #130bf7 !important;
-}
-
 .ui-extension.hidden {
     display: none;
     opacity: 0;

packages/client/css/keyboard.css

@@ -24,8 +24,18 @@
     grid-template-columns: auto auto auto;
 }
 
+.grid-container.grid-visible {
+    opacity: 0.7;
+    visibility: visible;
+}
+
+.grid-container.grid-hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
 .grid-container:focus {
-    opacity: 1 !important;
+    opacity: 1;
 }
 
 .grid-item {

packages/client/css/navigation.css

@@ -17,10 +17,12 @@
 :root {
     --glsp-navigation-highlight: rgba(136, 68, 68, 0.2);
 }
+
 .navigable-element {
-    stroke: var(--glsp-navigation-highlight) !important;
+    stroke: var(--glsp-navigation-highlight);
 }
+
 .navigable-element .sprotty-edge.arrow {
-    fill: var(--glsp-navigation-highlight) !important;
-    stroke: var(--glsp-navigation-highlight) !important;
+    fill: var(--glsp-navigation-highlight);
+    stroke: var(--glsp-navigation-highlight);
 }

packages/client/css/search.css

@@ -0,0 +1,29 @@
+/********************************************************************************
+ * Copyright (c) 2023-2025 Business Informatics Group (TU Wien) and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.search-hidden {
+    opacity: 0.4;
+}
+
+.search-highlighted .sprotty-node,
+.search-highlighted .sprotty-edge {
+    stroke-width: 1.5px;
+    stroke-width: 2px;
+    stroke-dashoffset: 5;
+    stroke-dasharray: 5, 5;
+    stroke-linecap: round;
+    stroke: #130bf7;
+}

packages/client/src/features/accessibility/keyboard-grid/keyboard-grid.ts

@@ -97,11 +97,11 @@ export class KeyboardGrid extends GLSPAbstractUIExtension implements IActionHand
     protected override setContainerVisible(visible: boolean): void {
         if (this.containerElement) {
             if (visible) {
-                this.containerElement.style.visibility = 'visible';
-                this.containerElement.style.opacity = '0.7';
+                this.containerElement.classList.remove('grid-hidden');
+                this.containerElement.classList.add('grid-visible');
             } else {
-                this.containerElement.style.visibility = 'hidden';
-                this.containerElement.style.opacity = '0';
+                this.containerElement.classList.remove('grid-visible');
+                this.containerElement.classList.add('grid-hidden');
             }
         }
     }

packages/client/src/features/accessibility/search/search-palette-module.ts

@@ -15,6 +15,7 @@
  ********************************************************************************/
 
 import { bindAsService, BindingContext, FeatureModule, TYPES } from '@eclipse-glsp/sprotty';
+import '../../../../css/search.css';
 import { SearchAutocompletePalette } from './search-palette';
 import { SearchAutocompletePaletteTool } from './search-tool';