fix(docs): change focus order for code examples and their copy button (…

…#2699) Co-authored-by: Hannah Issermann <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Oct 14, 2024 · 5b0b7d0 · 5b0b7d0
1 parent 4ac023b
commit 5b0b7d0
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 24 deletions.
diff --git a/site/assets/js/partials/code-examples.js b/site/assets/js/partials/code-examples.js
@@ -19,10 +19,11 @@ export default () => {
   const btnEdit = 'Edit on StackBlitz'
 
   // Boosted mod: removed unused svg height, width and fill="currentColor"
+  // Boosted mod: changed the positioning to improve the focus order
   const btnHtml = [
-    '<div class="bd-code-snippet">',
-    '  <div class="bd-clipboard">',
-    '    <button type="button" class="btn-clipboard">',
+    '<div class="bd-code-snippet position-relative">',
+    '  <div class="bd-clipboard position-absolute top-0 end-0">',
+    '    <button type="button" class="btn-clipboard position-absolute end-0">',
     '      <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
     '    </button>',
     '  </div>',
@@ -35,7 +36,7 @@ export default () => {
       // Ignore examples made by shortcode
       if (!element.closest('.bd-example-snippet')) {
         element.insertAdjacentHTML('beforebegin', btnHtml)
-        element.previousElementSibling.append(element)
+        element.previousElementSibling.prepend(element)
       }
     })
 

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -3,6 +3,8 @@
 //
 
 .bd-code-snippet {
+  display: flex; // Boosted mod
+  flex-direction: column; // Boosted mod
   margin: 0 ($bd-gutter-x * -.5) 1rem;
   border: solid var(--bs-border-color-subtle); // Boosted mod: instead of `var(--bs-border-color)`
   border-width: 1px 0;
@@ -394,7 +396,11 @@
 }
 
 .bd-file-ref {
+  position: relative; // Boosted mod
+
   .highlight-toolbar {
+    min-height: $spacer * 2.5; // Boosted mod
+
     @include media-breakpoint-up(md) {
       @include border-top-radius(calc(var(--bs-border-radius) - 1px));
     }

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
@@ -21,14 +21,23 @@
 
 <div class="bd-example-snippet bd-code-snippet">
   {{- if eq $show_preview true }}
-  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
+  <!-- Boosted mod: added `order-first` to handle the focus order -->
+  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example order-first m-0 border-0{{ with $class }} {{ . }}{{ end }}">
     {{ $content }}
   </div>
   {{- end }}
 
   {{- if eq $show_markup true -}}
+    <!-- Boosted mod: moved this section and changed the positioning to handle a different focus order -->
+    {{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
+    {{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
+    {{- $content = replaceRE ` (class=" *?")` "" $content -}}
+    {{- highlight (trim $content "\n") $lang "" -}}
+    <!-- End mod -->
+
     {{- if eq $show_preview true -}}
-      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom border-subtle border-1">
+      <!-- Boosted mod: added `order-first` to handle the focus order -->
+      <div class="d-flex order-first align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom border-subtle border-1">
         <small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
         <div class="d-flex ms-auto">
           <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
@@ -40,10 +49,5 @@
         </div>
       </div>
     {{- end -}}
-
-    {{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
-    {{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
-    {{- $content = replaceRE ` (class=" *?")` "" $content -}}
-    {{- highlight (trim $content "\n") $lang "" -}}
   {{- end }}
 </div>
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html
@@ -35,14 +35,10 @@
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
     <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
     <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
-      <a class="font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
+      <!-- Boosted mod: added `me-5` -->
+      <a class="me-5 font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>
-      <div class="d-flex ms-auto">
-        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
-          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
-        </button>
-      </div>
     </div>
 
     {{- $unindent := 0 -}}
@@ -67,5 +63,13 @@
       {{- $output = $match -}}
     {{- end -}}
     {{- highlight $output "js" "" -}}
+
+    <!-- Boosted mod: moved this section and changed the positioning to handle a different focus order -->
+    <div class="position-absolute top-0 mt-1 end-0 me-2">
+      <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
+      </button>
+    </div>
+    <!-- End mod -->
   </div>
 {{- end -}}
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html
@@ -48,15 +48,12 @@
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
     <!-- Boosted mod: added `.border-1` and `.border-subtle` -->
     <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
-      <a class="font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
+      <!-- Boosted mod: added `me-5` -->
+      <a class="me-5 font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>
-      <div class="d-flex ms-auto">
-        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
-          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
-        </button>
-      </div>
     </div>
+
     {{- $unindent := 0 -}}
     {{- $found := false -}}
     {{- $first_line:= index (split $match "\n") 0 -}}
@@ -79,5 +76,13 @@
       {{- $output = $match -}}
     {{- end -}}
     {{- highlight $output "scss" "" -}}
+
+    <!-- Boosted mod: moved this section and changed the positioning to handle a different focus order -->
+    <div class="position-absolute top-0 mt-1 end-0 me-2">
+      <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
+      </button>
+    </div>
+    <!-- End mod -->
   </div>
-{{- end -}}
+{{- end -}}