Merge pull request #88 from gooddata/feat/accessibility-updates

feat: updated alert accessibility

Author: ParzivalPavlis

assets/icons/icon-alert-default.svg

@@ -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;

assets/icons/icon-alert-info.svg

@@ -2,12 +2,12 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 {{ $color := .Get "color" | default "primary" }}
 {{ $icon := .Get "color" | default "default" }}
-<aside class="alert alert-{{ $color }}" role="alert" aria-labelledby="alert-title">
+<div class="alert alert-{{ $color }}" role="note">
 {{ with resources.Get (printf "icons/icon-alert-%s.svg" $icon) }}{{ ( . | minify).Content | safeHTML }}{{ end }}
 {{ with .Get "title" }}<h4 class="alert-heading">{{ . | safeHTML }}</h4>{{ end }}
 {{ if eq .Page.File.Ext "md" }}
 {{ replaceRE "^<pre><code>" "" .Inner | safeHTML }}
 {{ else }}
 {{ .Inner | htmlUnescape | safeHTML }}
 {{ end }}
-</aside>
+</div>

assets/icons/icon-alert-label.svg

@@ -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 }}
 
-<div id="panel-{{ $title | anchorize }}" class="gd-docs-content__block content-{{ $title | anchorize }}{{ if eq $index 0 }} active{{ end }}" role="tabpanel" aria-labelledby="tab-{{ $title | anchorize }}">
-  {{ $block }}
-</div>
+  <div class="gd-docs-content__block {{ if eq $index 0 }}active{{ end }}" role="tabpanel">
+    {{ $block }}
+  </div>
 {{ else }}
 {{ $block }}
 {{ end }}

assets/icons/icon-alert-warning.svg

@@ -6,7 +6,7 @@
     {{ if $titles }}
     <div class="gd-docs-content-select__tabs" role="tablist">
         {{ range $index, $title := $titles }}
-        <button id="tab-{{ $title | anchorize }}" class="gd-docs-content-select__tab{{ if eq $index "0" }} active{{ end }}" data-content="{{ $title | anchorize }}" role="tab" aria-selected="{{ if eq $index "0" }}true{{ else }}false{{ end }}" aria-controls="panel-{{ $title | anchorize }}">{{ $title }}</button>
+        <button class="gd-docs-content-select__tab{{ if eq $index "0" }} active{{ end }}" role="tab" aria-selected="{{ if eq $index "0" }}true{{ else }}false{{ end }}">{{ $title }}</button>
     {{ end }}
 </div>
 {{ end }}

assets/scss/content-select.scss

@@ -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,24 +56,24 @@
             $(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")
                 .filter(".content-" + contentId)
                 .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,21 +82,21 @@
                 e.preventDefault();
                 $tabs.eq(newIndex).focus().click();
                 break;
-                
+
             // Right arrow
             case 39:
                 newIndex = index + 1;
                 if (newIndex >= $tabs.length) newIndex = 0;
                 e.preventDefault();
                 $tabs.eq(newIndex).focus().click();
                 break;
-                
+
             // Home
             case 36:
                 e.preventDefault();
                 $tabs.eq(0).focus().click();
                 break;
-                
+
             // End
             case 35:
                 e.preventDefault();