feat(high contrast): add border to some hover states

Author: mcoker

packages/module/package.json

@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@octokit/rest": "^18.0.0",
-    "@patternfly/documentation-framework": "6.8.2",
+    "@patternfly/documentation-framework": "6.28.9",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^4.3.1",
     "@patternfly/react-code-editor": "^6.1.0",

packages/module/patternfly-docs/patternfly-docs.config.js

@@ -2,5 +2,7 @@
 module.exports = {
   sideNavItems: [{ section: 'extensions' }],
   topNavItems: [],
-  port: 8006
+  port: 8006,
+  hasThemeSwitcher: true,
+  hasHighContrastSwitcher: true
 };

packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss

@@ -31,10 +31,6 @@
     margin-block-start: 0;
   }
 
-  &:hover {
-    background-color: var(--pf-t--global--background--color--action--plain--hover);
-  }
-
   .pf-v6-c-check__label {
     min-height: var(--pf-t--global--spacer--md);
     padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs);

packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss

@@ -5,28 +5,48 @@
 
   .vertical-tabs-pf {
     margin-block-end: 0;
+    padding-block-start: var(--pf-t--global--spacer--xs);
   }
 }
 
 .vertical-tabs-pf-tab {
   margin-block-start: var(--pf-t--global--spacer--sm);
+  padding-inline-start: 0;
   position: relative;
 
+  & .vertical-tabs-pf-tab {
+    margin-inline-start: var(--pf-t--global--spacer--md);
+  }
+
   > a {
     color: var( --pf-t--global--text--color--regular);
     text-decoration: none;
-    display: inline-block;
-    font-size: 13px;
-    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md);
+    display: block;
+    margin-inline-start: var(--pf-t--global--spacer--md);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
     vertical-align: top;
-    width: 100%;
     word-break: break-word;
     border-radius: var(--pf-t--global--border--radius--small);
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: var(--pf-t--global--border--width--action--plain--default) solid var(--pf-t--global--border--color--high-contrast);
+      border-radius: inherit;
+      pointer-events: none;
+    }
 
     &:hover,
     &:focus {
       background-color: var(--pf-t--global--background--color--action--plain--hover);
       text-decoration: none;
+
+      &::after {
+        border-color: var(--pf-t--global--border--color--high-contrast);
+        border-width: var(--pf-t--global--border--width--action--plain--hover);
+      }
     }
 
     &.no-wrap {
@@ -42,28 +62,19 @@
   }
 
   &.active {
-    > a {
-
       &::before {
         background: var( --pf-t--global--border--color--brand--clicked);
         content: "\00a0"; //  
-        left: 0;
+        inset-inline-start: 0;
+        inset-block-start: var(--pf-t--global--spacer--xs);
         position: absolute;
         width: var(--pf-t--global--border--width--extra-strong);
       }
-    }
   }
 
   &:first-of-type {
     margin-block-start: 0;
   }
-
-  > .vertical-tabs-pf {
-    > .vertical-tabs-pf-tab {
-      position: initial;
-      padding-inline-start: var(--pf-t--global--spacer--md);
-    }
-  }
 }
 
 .vertical-tabs-pf.restrict-tabs {