diff --git a/assets/icons/icon-alert-default.svg b/assets/icons/icon-alert-default.svg index eef846d..675e2e4 100644 --- a/assets/icons/icon-alert-default.svg +++ b/assets/icons/icon-alert-default.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/icons/icon-alert-info.svg b/assets/icons/icon-alert-info.svg index 30b12e3..8cca7e1 100644 --- a/assets/icons/icon-alert-info.svg +++ b/assets/icons/icon-alert-info.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/icons/icon-alert-label.svg b/assets/icons/icon-alert-label.svg index 8b629d3..1b73796 100644 --- a/assets/icons/icon-alert-label.svg +++ b/assets/icons/icon-alert-label.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/icons/icon-alert-warning.svg b/assets/icons/icon-alert-warning.svg index c75f6ad..adff46f 100644 --- a/assets/icons/icon-alert-warning.svg +++ b/assets/icons/icon-alert-warning.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/scss/content-select.scss b/assets/scss/content-select.scss index 53e72d6..7791cc9 100644 --- a/assets/scss/content-select.scss +++ b/assets/scss/content-select.scss @@ -27,7 +27,7 @@ border-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; - color: rgba($color-deep-purple, 0.5); + color: #776E8C; font-family: $gdfont-demibold; font-size: 14px; line-height: 1.25; diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html index 9763e1f..fe68618 100644 --- a/layouts/shortcodes/alert.html +++ b/layouts/shortcodes/alert.html @@ -2,7 +2,7 @@ {{ $_hugo_config := `{ "version": 1 }` }} {{ $color := .Get "color" | default "primary" }} {{ $icon := .Get "color" | default "default" }} -
{{ with resources.Get (printf "icons/icon-alert-%s.svg" $icon) }}{{ ( . | minify).Content | safeHTML }}{{ end }} {{ with .Get "title" }}

{{ . | safeHTML }}

{{ end }} {{ if eq .Page.File.Ext "md" }} @@ -10,4 +10,4 @@ {{ else }} {{ .Inner | htmlUnescape | safeHTML }} {{ end }} - +
diff --git a/layouts/shortcodes/content-block.html b/layouts/shortcodes/content-block.html index 61c7979..8d13df4 100644 --- a/layouts/shortcodes/content-block.html +++ b/layouts/shortcodes/content-block.html @@ -4,13 +4,12 @@ {{ $block := .Inner }} {{ with .Parent }} -{{ $selectId := .Get "id" }} -{{ $scratchIdTitles := print "content-block-" (string .Ordinal) }} -{{ .Scratch.SetInMap $scratchIdTitles (string $index) $title }} + {{ $scratchIdTitles := print "content-block-" (string .Ordinal) }} + {{ .Scratch.SetInMap $scratchIdTitles (string $index) $title }} -
- {{ $block }} -
+
+ {{ $block }} +
{{ else }} {{ $block }} {{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/content-select.html b/layouts/shortcodes/content-select.html index df56fd7..c71c5e9 100644 --- a/layouts/shortcodes/content-select.html +++ b/layouts/shortcodes/content-select.html @@ -6,7 +6,7 @@ {{ if $titles }}
{{ range $index, $title := $titles }} - + {{ end }}
{{ end }} diff --git a/static/js/content-select.js b/static/js/content-select.js index 8072a23..f3095e0 100644 --- a/static/js/content-select.js +++ b/static/js/content-select.js @@ -12,7 +12,7 @@ }); } }); - + setTimeout(function() { $(".gd-docs-content__block").each(function(index) { if (index > 0) { @@ -27,9 +27,23 @@ // Set up tab click behavior $(".gd-docs-content-select__tab").on("click", setActive); - + // Set up keyboard navigation $(".gd-docs-content-select__tab").on("keydown", handleKeydown); + + // Set up unique ids and aria attributes + $(".gd-docs-content-select").each(function(index) { + $(this).find(".gd-docs-content-select__tabs").children().each(function(tabIndex) { + $(this).attr("id", "tab-" + (index + 1) + "-" + (tabIndex + 1)); + $(this).attr("aria-controls", "panel-" + (index + 1) + "-" + (tabIndex + 1)); + $(this).attr("data-content", "panel-" + (index + 1) + "-" + (tabIndex + 1)); + }); + $(this).find(".gd-docs-content__block").each(function(panelIndex) { + $(this).attr("aria-labelledby", "tab-" + (index + 1) + "-" + (panelIndex + 1)); + $(this).attr("id", "panel-" + (index + 1) + "-" + (panelIndex + 1)); + $(this).addClass("content-panel-" + (index + 1) + "-" + (panelIndex + 1)); + }); + }); }); var setActive = function() { @@ -42,11 +56,11 @@ $(this) .addClass("active") .attr("aria-selected", "true"); - + // Update panels var contentId = $(this).data("content"); var tabContainer = $(this).parent().parent(); - + tabContainer .find(".gd-docs-content__block") .removeClass("active") @@ -54,12 +68,12 @@ .addClass("active"); } }; - + var handleKeydown = function(e) { var $tabs = $(this).parent().find(".gd-docs-content-select__tab"); var index = $tabs.index(this); var newIndex; - + switch(e.which) { // Left arrow case 37: @@ -68,7 +82,7 @@ e.preventDefault(); $tabs.eq(newIndex).focus().click(); break; - + // Right arrow case 39: newIndex = index + 1; @@ -76,13 +90,13 @@ e.preventDefault(); $tabs.eq(newIndex).focus().click(); break; - + // Home case 36: e.preventDefault(); $tabs.eq(0).focus().click(); break; - + // End case 35: e.preventDefault();