button: refactor for a11y #372

exampleSite/content/basics/generator/_index.en.md

@@ -26,14 +26,14 @@ This only works in modern browsers.
 
 ## Variant generator
 
-{{% button style="secondary" icon="download" %}}Download variant{{% /button %}}
+{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}}
-{{% button style="warning" icon="trash" %}}Reset variant{{% /button %}}
+{{% button style="warning" icon="trash" href="javascript:window.variants&&variants.resetVariant();this.blur();" %}}Reset variant{{% /button %}}
 
 <div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);">Graph</div>
 
-{{% button style="secondary" icon="download" %}}Download variant{{% /button %}}
+{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}}
-{{% button style="warning" icon="trash" %}}Reset variant{{% /button %}}
+{{% button style="warning" icon="trash" href="javascript:window.variants&&variants.resetVariant();this.blur();" %}}Reset variant{{% /button %}}
 
 <script>
-window.variants && variants.generator( '#vargenerator', '.secondary a', '.warning a' );
+window.variants && variants.generator( '#vargenerator' );
 </script>

exampleSite/content/basics/migration/_index.en.md

@@ -18,6 +18,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - **Change**: The Korean language translation for this theme is now available with the language code `ko`. Formerly the country code `kr` was used instead.
 
+- **New**: The [`button` shortcode]({{% relref "shortcodes/button" %}}) can now also be used as a real button inside of HTML forms - although this is a pretty rare use case. The documentation was updated accordingly.
+
 - **New**: The search now supports the Korean language.
 
 ---

exampleSite/content/shortcodes/button.en.md

@@ -47,11 +47,12 @@ Once the button is clicked, it opens another browser tab for the given URL.
 
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
-| **href**              | _<empty>_ | The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable. |
+| **href**              | _&lt;empty&gt;_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL|
 | **style**             | `transparent`   | The color scheme used to paint the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
 | **icon**              | see notes       | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **iconposition**      | `left`          | Places the icon to the `left` or `right` of the title. |
-| **target**            | see notes       | The destination frame/window for the URL. This behaves similar to normal links. If the parameter is not given it defaults to:<br><br>- `_blank` for any address starting with `http://` or `https://`<br>- no specific value for all other links |
+| **target**            | see notes       | The destination frame/window if **href** is an URL. Otherwise the parameter is not used. This behaves similar to normal links. If the parameter is not given it defaults to:<br><br>- `_blank` for any address starting with `http://` or `https://`<br>- no specific value for all other links |
+| **type**              | see notes       | The [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) if **href** is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to `button` |
 | _**&lt;content&gt;**_ | see notes       | Arbitrary text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 
 ## Examples
@@ -146,7 +147,7 @@ Once the button is clicked, it opens another browser tab for the given URL.
 
 ### Other
 
-#### Severity Style with all Defaults
+#### Severity Style with All Defaults
 
 ````go
 {{%/* button href="https://gohugo.io/" style="tip" %}}{{% /button */%}}
@@ -154,10 +155,43 @@ Once the button is clicked, it opens another browser tab for the given URL.
 
 {{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
 
-#### Button to internal page
+#### Button to Internal Page
 
 ````go
 {{%/* button href="/" %}}Home{{% /button */%}}
 ````
 
 {{% button href="/" %}}Home{{% /button %}}
+
+#### Button with JavaScript Action
+
+If your JavaScript action does not change the focus afterwards, make sure to call `this.blur()` in the end to unselect the button.
+
+````go
+{{%/* button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button */%}}
+````
+
+{{% button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button %}}
+
+#### Button within a `form` Element
+
+To use native HTML elements in your Markdown, add this in your `config.toml`
+
+````toml
+[markup.goldmark.renderer]
+    unsafe = true
+````
+
+````html
+<form action="../../search.html" method="get">
+  <input name="search-by-detail" class="search-by" type="search">
+  {{%/* button type="submit" style="secondary" icon="search" %}}Search{{% /button */%}}
+</form>
+````
+
+<form action="../../search.html" method="get">
+  <div class="searchform" style="width: 20vw;">
+    <input name="search-by-detail" class="search-by" type="search" placeholder="Search...">
+    {{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}}
+  </div>
+</form>

layouts/partials/body.searchpage.html

@@ -4,13 +4,15 @@
 
             <form action="javascript:triggerSearch()">
               <div class="searchform">
-                <label class="a11y-only" for="search-by">{{ T "Search" }}</label>
+                <label class="a11y-only" for="search-by-detail">{{ T "Search" }}</label>
                 <input data-search-input id="search-by-detail" class="search-by" name="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
-                <span class="btn cstyle secondary">
+                {{ partial "shortcodes/button.html" (dict
-                  <button type="submit" title="{{ T "Search" }}">
+                  "context" .
-                    <i class="fas fa-search"></i> {{ T "Search" }}
+                  "type" "submit"
-                  </button>
+                  "style" "secondary"
-                </span>
+                  "icon" "search"
+                  "content" (T "Search")
+                )}}
               </div>
             </form>
             <div class="searchhint">

layouts/partials/shortcodes/button.html

@@ -1,9 +1,17 @@
 {{- $context := .context }}
 {{- $content := .content }}
-{{- $href := .href | default "" }}
+{{- $href := (trim .href " ") | default "" }}
 {{- $style := .style | default "transparent" }}
 {{- $target := .target | default "" }}
-{{- if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
+{{- $type := .type | default "" }}
+{{- $isButton := false }}
+{{- if or (not $href) (strings.HasPrefix $href "javascript:") }}
+  {{- $isButton = true }}
+  {{- $href = substr $href (len "javascript:") }}
+  {{- if not $type }}
+    {{- $type = "button" }}
+  {{- end }}
+{{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
   {{- $target = "_blank" }}
 {{- end }}
 {{- $title := .title | default ($content) | default ($style | T) }}
@@ -21,7 +29,11 @@
 {{- $iconposition := .iconposition | default "left" }}
 {{- with $context }}
 <span class="btn cstyle {{ $style }}">
+  {{- if $isButton }}
+  <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
+  {{- else }}
   <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}" rel="noopener"{{ end }}{{ end }}>
+  {{- end }}
     {{- if and $icon (eq $iconposition "left") }}
     <i class="{{ $icon }}"></i>
     {{- end }}
@@ -29,6 +41,10 @@
     {{- if and $icon (eq $iconposition "right") }}
     <i class="{{ $icon }}"></i>
     {{- end }}
+  {{- if $isButton }}
+  </button>
+  {{- else }}
   </a>
+  {{- end }}
 </span>
 {{- end }}

layouts/shortcodes/button.html

@@ -8,4 +8,5 @@
   "style"         (.Get "style")
   "title"         (.Get "title")
   "target"        (.Get "target")
+  "type"          (.Get "type")
 ) }}

static/css/format-print.css

@@ -67,7 +67,7 @@ pre {
 #body code, #body strong, #body b,
 #body li, #body dd, #body dt,
 #body p,
-#body a {
+#body a, #body button {
     /* better contrast for colored elements */
     color: black;
 }
@@ -112,7 +112,8 @@ body,
     margin-top: 1.5rem;
     padding-top: .75rem;
 }
-#body #body-inner .footline a {
+#body #body-inner .footline a,
+#body #body-inner .btn a {
     text-decoration: none;
 }
 #body #body-inner a {

static/js/variant.js

@@ -223,7 +223,7 @@ var variants = {
 		}
 	},
 
-	generator: function( vargenerator, vardownload, varreset ){
+	generator: function( vargenerator ){
 		var graphDefinition = this.generateGraph();
 		var graphs = document.querySelectorAll( vargenerator );
 		graphs.forEach( function( e ){ e.innerHTML = graphDefinition; });
@@ -234,12 +234,6 @@ var variants = {
 				this.styleGraph();
 			}
 		}.bind( this ), 25 );
-
-		var downloads = document.querySelectorAll( vardownload );
-		downloads.forEach( function( e ){ e.addEventListener('click', this.getStylesheet.bind( this )); }.bind( this ) );
-
-		var resets = document.querySelectorAll( varreset );
-		resets.forEach( function( e ){ e.addEventListener('click', this.resetVariant.bind( this )); }.bind( this ) );
 	},
 
 	download: function(data, mimetype, filename){