fix doc explorer style regressions (#2630)

* fix selector specificity for link styling * leverage nesting * fix hiding the headline on focus * ensure correct focus outlines and remove visited styles
graphql · Aug 5, 2022 · 64dd436 · 64dd436
1 parent 8abce73
commit 64dd436
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 35 deletions.
diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.css b/packages/graphiql-react/src/explorer/components/doc-explorer.css
@@ -3,51 +3,64 @@
   display: flex;
   justify-content: space-between;
   position: relative;
+
+  &:focus-within .graphiql-doc-explorer-title {
+    /* Hide the header when focussing the search input */
+    visibility: hidden;
+  }
 }
 .graphiql-doc-explorer-header-content {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
-.graphiql-doc-explorer-header:focus-within
-  > .graphiql-doc-explorer-header-content
-  > *:not(.graphiql-doc-explorer-back) {
-  /* Hide the header when focussing the search input */
-  visibility: hidden;
-}
 
 /* The search input in the header of the doc explorer */
 .graphiql-doc-explorer-search {
   height: 100%;
   position: absolute;
   right: 0;
   top: 0;
-}
-.graphiql-doc-explorer-search:focus-within {
-  left: 0;
-}
-.graphiql-doc-explorer-search [data-reach-combobox-input] {
-  height: 24px;
-  width: 4ch;
-}
-.graphiql-doc-explorer-search [data-reach-combobox-input]:focus {
-  width: 100%;
+
+  &:focus-within {
+    left: 0;
+  }
+
+  & [data-reach-combobox-input] {
+    height: 24px;
+    width: 4ch;
+  }
+
+  & [data-reach-combobox-input]:focus {
+    width: 100%;
+  }
 }
 
 /* The back-button in the doc explorer */
-.graphiql-doc-explorer-back {
+a.graphiql-doc-explorer-back {
   align-items: center;
   color: var(--color-neutral-60);
   display: flex;
   text-decoration: none;
-}
-.graphiql-doc-explorer-back:hover {
-  text-decoration: underline;
-}
-.graphiql-doc-explorer-back > svg {
-  height: var(--px-8);
-  margin-right: var(--px-8);
-  width: var(--px-8);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus {
+    outline: var(--color-neutral-60) auto 1px;
+
+    & + .graphiql-doc-explorer-title {
+      /* Don't hide the header when focussing the back link */
+      visibility: unset;
+    }
+  }
+
+  & > svg {
+    height: var(--px-8);
+    margin-right: var(--px-8);
+    width: var(--px-8);
+  }
 }
 
 /* The title of the currently active page in the doc explorer */
@@ -57,10 +70,10 @@
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-.graphiql-doc-explorer-title:not(:first-child) {
-  font-size: var(--font-size-h3);
-  margin-top: var(--px-8);
+  &:not(:first-child) {
+    font-size: var(--font-size-h3);
+    margin-top: var(--px-8);
+  }
 }
 
 /* The contents of the currently active page in the doc explorer */

diff --git a/packages/graphiql-react/src/explorer/components/field-link.css b/packages/graphiql-react/src/explorer/components/field-link.css
@@ -1,4 +1,4 @@
-.graphiql-doc-explorer-field-name {
+a.graphiql-doc-explorer-field-name {
   color: var(--color-blue);
   text-decoration: none;
 

diff --git a/packages/graphiql-react/src/explorer/components/type-link.css b/packages/graphiql-react/src/explorer/components/type-link.css
@@ -1,4 +1,4 @@
-.graphiql-doc-explorer-type-name {
+a.graphiql-doc-explorer-type-name {
   color: var(--color-orche);
   text-decoration: none;
 

diff --git a/packages/graphiql-react/src/index.ts b/packages/graphiql-react/src/index.ts
@@ -1,3 +1,5 @@
+import './style/root.css';
+
 export {
   EditorContext,
   EditorContextProvider,
@@ -82,5 +84,3 @@ export type { HistoryContextType } from './history';
 export type { SchemaContextType } from './schema';
 export type { StorageContextType } from './storage';
 export type { Theme } from './theme';
-
-import './style/root.css';
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
@@ -134,8 +134,8 @@ reach-portal {
   & a {
     color: var(--color-pink);
 
-    &:visited {
-      color: var(--color-pink-dark);
+    &:focus {
+      outline: var(--color-pink) auto 1px;
     }
   }
 }