Make summary elements more accessible (#530)

* Make namespace filter links unique * Clean up HTML semantics * Move HTML classes to updated containers * Move verticalRhythm classes to new containers * Use default arrow for API entry summary element * Fix Recommended Settings headings * Use default arrow for Cost Settings summary element * Use default arrow for email entry summary element * Remove CSS for headings and custom markers in details * Remove extraneous whitespace
FairwindsOps · Oct 2, 2022 · d0f9655 · d0f9655
1 parent b5b7f56
commit d0f9655
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 96 deletions.
diff --git a/pkg/dashboard/assets/css/main.css b/pkg/dashboard/assets/css/main.css
@@ -108,31 +108,6 @@ blockquote > cite {
   text-align: right;
 }
 
-details > summary > h2,
-details > summary > h3,
-details > summary > h4,
-details > summary > h5,
-details > summary > h6 {
-  display: inline-block;
-}
-
-details > summary.--hideMarker {
-  cursor: pointer;
-  list-style: none;
-}
-
-details > summary.--hideMarker::-webkit-details-marker {
-  display: none;
-}
-
-details:not([open]) > summary.--hideMarker i.--showWhenOpen {
-  display: none;
-}
-
-details[open] > summary.--hideMarker i.--showWhenClosed {
-  display: none;
-}
-
 dd {
   margin: var(--gap-0);
 }

diff --git a/pkg/dashboard/templates/api_token.gohtml b/pkg/dashboard/templates/api_token.gohtml
@@ -1,12 +1,8 @@
 {{ define "api_token" }}
 <aside class="api-token-box" id="api-token-box">
   <details open>
-    <summary class="--hideMarker">
-      <p class="api-token-box__toggle-title">
+    <summary class="api-token-box__toggle-title">
         Add API token to see cost estimates!
-        <i aria-hidden="true" class="fas fa-fw fa-angle-down --showWhenClosed"></i
-        ><i aria-hidden="true" class="fas fa-fw fa-angle-up --showWhenOpen"></i>
-      </p>
     </summary>
 
     <form class="api-token-box__content">

diff --git a/pkg/dashboard/templates/container.gohtml b/pkg/dashboard/templates/container.gohtml
@@ -97,9 +97,7 @@
   </table>
 
   <details>
-    <summary>
-      <h6>Recommended Settings</h6>
-    </summary>
+    <summary>YAML for Recommended Settings</summary>
 
     <pre class="fix-yaml"><code class="language-yaml">resources:
   requests:
@@ -192,9 +190,7 @@
   </table>
 
   <details>
-    <summary>
-      <h6>Recommended Settings</h6>
-    </summary>
+    <summary>YAML for Recommended Settings</summary>
 
     <pre class="fix-yaml"><code class="language-yaml">resources:
   requests:

diff --git a/pkg/dashboard/templates/cost_settings.gohtml b/pkg/dashboard/templates/cost_settings.gohtml
@@ -1,12 +1,8 @@
 {{ define "cost_settings" }}
 <aside class="cost-settings-box" id="cost-settings-box">
   <details open>
-    <summary class="--hideMarker">
-      <p class="cost-settings-box__toggle-title">
+    <summary class="cost-settings-box__toggle-title">
         Cost Settings
-        <i aria-hidden="true" class="fas fa-fw fa-angle-down --showWhenClosed"></i
-        ><i aria-hidden="true" class="fas fa-fw fa-angle-up --showWhenOpen"></i>
-      </p>
     </summary>
 
     <form class="cost-settings-box__content">

diff --git a/pkg/dashboard/templates/email.gohtml b/pkg/dashboard/templates/email.gohtml
@@ -1,12 +1,8 @@
 {{ define "email" }}
 <aside class="email-box" id="email-box">
   <details open>
-    <summary class="--hideMarker">
-      <p class="email-box__toggle-title">
+    <summary class="email-box__toggle-title">
         Add cost estimates to your Goldilocks dashboard!
-        <i aria-hidden="true" class="fas fa-fw fa-angle-down --showWhenClosed"></i
-        ><i aria-hidden="true" class="fas fa-fw fa-angle-up --showWhenOpen"></i>
-      </p>
     </summary>
 
     <form class="email-box__content">

diff --git a/pkg/dashboard/templates/namespace.gohtml b/pkg/dashboard/templates/namespace.gohtml
@@ -1,69 +1,62 @@
 {{define "namespace"}}
 {{ $foundFirstWorkload := false }}
 
-<article data-filter="{{ $.Namespace }}">
-  <details class="detailInfo --namespace verticalRhythm" open>
-    <summary class="--hideMarker">
-      <h2>
-        <span aria-label="Namespace:" class="badge detailBadge --namespace"
-          >Namespace</span
-        >
-        {{ $.Namespace }}
-        <i aria-hidden="true" class="fas fa-fw fa-angle-down --showWhenClosed"></i
-        ><i aria-hidden="true" class="fas fa-fw fa-angle-up --showWhenOpen"></i>
-      </h2>
-      <p>
-        <a
-          class="detailLink --namespace"
-          href="{{ $.BasePath }}dashboard/{{ $.Namespace }}"
-        >Limit results to the {{ $.Namespace }} namespace</a>
-      </p>
-    </summary>
+<article class="detailInfo --namespace verticalRhythm" data-filter="{{ $.Namespace }}">
+  <h2>
+    <span class="badge detailBadge --namespace">Namespace</span>
+    {{ $.Namespace }}
+  </h2>
+
+  <a
+    class="detailLink --namespace"
+    href="{{ $.BasePath }}dashboard/{{ $.Namespace }}"
+  >Limit results to the {{ $.Namespace }} namespace</a>
+
+  <details open>
+    <summary>Workloads</summary>
 
     {{ if lt (len $.Workloads) 1 }}
-    <section class="detailInfo --empty">
-      <p>No workloads found in this namespace.</p>
-    </section>
+    <p class="detailInfo --empty">No workloads found in this namespace.</p>
 
     {{ else }}
       {{ range $workload := $.Workloads }}
-    <details class="detailInfo --deployment verticalRhythm"
-        {{ if not $foundFirstWorkload }}
-          {{ $foundFirstWorkload = true }} open
-        {{ end }}>
-      <summary class="--hideMarker">
-        <h3>
-          <span aria-label="Workload:" class="badge detailBadge --deployment"
-            >{{ $workload.ControllerType }}</span
-          >
-          {{ $workload.ControllerName }}
-          <i aria-hidden="true" class="fas fa-fw fa-angle-down --showWhenClosed"></i
-          ><i aria-hidden="true" class="fas fa-fw fa-angle-up --showWhenOpen"></i>
-        </h3>
-      </summary>
 
-      {{ range $cName, $cSummary := $workload.Containers }}
-      <details class="detailInfo --container verticalRhythm" open>
-        <summary class="--hideMarker">
+    <div class="detailInfo --deployment verticalRhythm">
+      <h3>
+        <span class="badge detailBadge --deployment">{{ $workload.ControllerType }}</span>
+        {{ $workload.ControllerName }}
+      </h3>
+
+      <details
+          {{ if not $foundFirstWorkload }}
+            {{ $foundFirstWorkload = true }} open
+          {{ end }}>
+        <summary>Containers</summary>
+
+        {{ range $cName, $cSummary := $workload.Containers }}
+        <div class="detailInfo --container verticalRhythm">
           <h4>
-            <span aria-label="Container:" class="badge detailBadge --container"
-              >Container</span
-            >
-            {{ $cName }} {{ if gt $cSummary.ContainerCostInt 0 }} <span class="top-number">${{ $cSummary.ContainerCost }}/hour</span> {{ end }}
-            <i aria-hidden="true" class="fas fa-fw fa-angle-down --showWhenClosed"></i
-            ><i aria-hidden="true" class="fas fa-fw fa-angle-up --showWhenOpen"></i>
+            <span class="badge detailBadge --container">Container</span>
+            {{ $cName }}
           </h4>
-        </summary>
 
-        <div class="layoutLineup">
-          {{ template "container" $cSummary }}
+          {{ if gt $cSummary.ContainerCostInt 0 }}
+          <span class="top-number">${{ $cSummary.ContainerCost }}/hour</span> 
+          {{ end }}
+
+          <details open>
+            <summary>Details</summary>
+
+            <div class="layoutLineup">
+              {{ template "container" $cSummary }}
+            </div>
+          </details>
         </div>
+        {{ end }}
       </details>
-      {{ end }}
-    </details>
+    </div>
       {{ end }}
     {{ end }}
-
   </details>
 </article>
 {{end}}