@abgov/react-components 4.0.0-alpha.52 → 4.0.0-alpha.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.52",
+  "version": "4.0.0-alpha.53",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -4811,18 +4811,18 @@ function create_if_block$c(ctx) {
     }
 
   };
-} // (234:4) {#each options as option, index}
+} // (239:4) {#each options as option, index}
 
 
 function create_each_block$4(ctx) {
   let li;
-  let t0_value = (
+  let t_value = (
   /*option*/
   ctx[39].label ||
   /*option*/
   ctx[39].value) + "";
-  let t0;
-  let t1;
+  let t;
+  let li_id_value;
   let li_aria_label_value;
   let li_data_testid_value;
   let li_data_index_value;
@@ -4842,13 +4842,16 @@ function create_each_block$4(ctx) {
   return {
     c() {
       li = element("li");
-      t0 = text(t0_value);
-      t1 = space();
+      t = text(t_value);
+      attr(li, "id", li_id_value =
+      /*option*/
+      ctx[39].label);
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
       ctx[39].label ||
       /*option*/
       ctx[39].value);
+      attr(li, "role", "option");
       attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
       ctx[39].value}-dropdown-item`);
@@ -4872,8 +4875,7 @@ function create_each_block$4(ctx) {
 
     m(target, anchor) {
       insert(target, li, anchor);
-      append(li, t0);
-      append(li, t1);
+      append(li, t);
 
       if (!mounted) {
         dispose = listen(li, "click", click_handler);
@@ -4885,11 +4887,19 @@ function create_each_block$4(ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*options*/
-      1024 && t0_value !== (t0_value = (
+      1024 && t_value !== (t_value = (
       /*option*/
       ctx[39].label ||
       /*option*/
-      ctx[39].value) + "")) set_data(t0, t0_value);
+      ctx[39].value) + "")) set_data(t, t_value);
+
+      if (dirty[0] &
+      /*options*/
+      1024 && li_id_value !== (li_id_value =
+      /*option*/
+      ctx[39].label)) {
+        attr(li, "id", li_id_value);
+      }
 
       if (dirty[0] &
       /*options*/
@@ -4949,8 +4959,8 @@ function create_fragment$q(ctx) {
   let div0_data_testid_value;
   let t1;
   let ul;
-  let slot;
   let t2;
+  let slot;
   let ul_style_value;
   let div1_style_value;
   let mounted;
@@ -4976,13 +4986,13 @@ function create_fragment$q(ctx) {
       goa_input = element("goa-input");
       t1 = space();
       ul = element("ul");
-      slot = element("slot");
-      t2 = space();
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
 
+      t2 = space();
+      slot = element("slot");
       this.c = noop;
       set_custom_element_data(goa_input, "error",
       /*error*/
@@ -5000,11 +5010,16 @@ function create_fragment$q(ctx) {
       set_custom_element_data(goa_input, "id", goa_input_id_value = `${
       /*name*/
       ctx[0]}-dropdown-input`);
+      set_custom_element_data(goa_input, "role", "combobox");
       set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
       /*arialabel*/
       ctx[1] ||
       /*name*/
       ctx[0]);
+      set_custom_element_data(goa_input, "aria-expanded",
+      /*isMenuVisible*/
+      ctx[12]);
+      set_custom_element_data(goa_input, "aria-controls", "menu");
       set_custom_element_data(goa_input, "readonly", "");
       set_custom_element_data(goa_input, "trailingicon", "chevron-down");
       set_custom_element_data(goa_input, "type", "text");
@@ -5014,6 +5029,11 @@ function create_fragment$q(ctx) {
       attr(div0, "data-testid", div0_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown`);
+      attr(ul, "id", "menu");
+      attr(ul, "role", "listbox");
+      attr(ul, "aria-activedescendant",
+      /*selectedLabel*/
+      ctx[11]);
       attr(ul, "data-testid", "dropdown-menu");
       attr(ul, "tabindex", "0");
       attr(ul, "class", "goa-dropdown-list");
@@ -5042,14 +5062,14 @@ function create_fragment$q(ctx) {
       append(div0, goa_input);
       append(div1, t1);
       append(div1, ul);
-      append(ul, slot);
-      append(ul, t2);
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(ul, null);
       }
-      /*ul_binding*/
 
+      append(ul, t2);
+      append(ul, slot);
+      /*ul_binding*/
 
       ctx[23](ul);
       /*div1_binding*/
@@ -5130,6 +5150,14 @@ function create_fragment$q(ctx) {
         set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
       }
 
+      if (dirty[0] &
+      /*isMenuVisible*/
+      4096) {
+        set_custom_element_data(goa_input, "aria-expanded",
+        /*isMenuVisible*/
+        ctx[12]);
+      }
+
       if (dirty[0] &
       /*selectedLabel*/
       2048) {
@@ -5162,7 +5190,7 @@ function create_fragment$q(ctx) {
           } else {
             each_blocks[i] = create_each_block$4(child_ctx);
             each_blocks[i].c();
-            each_blocks[i].m(ul, null);
+            each_blocks[i].m(ul, t2);
           }
         }
 
@@ -5173,6 +5201,14 @@ function create_fragment$q(ctx) {
         each_blocks.length = each_value.length;
       }
 
+      if (dirty[0] &
+      /*selectedLabel*/
+      2048) {
+        attr(ul, "aria-activedescendant",
+        /*selectedLabel*/
+        ctx[11]);
+      }
+
       if (dirty[0] &
       /*maxheight*/
       8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${

package/react-components.umd.js

@@ -4853,18 +4853,18 @@
 	    }
 
 	  };
-	} // (234:4) {#each options as option, index}
+	} // (239:4) {#each options as option, index}
 
 
 	function create_each_block$4(ctx) {
 	  let li;
-	  let t0_value = (
+	  let t_value = (
 	  /*option*/
 	  ctx[39].label ||
 	  /*option*/
 	  ctx[39].value) + "";
-	  let t0;
-	  let t1;
+	  let t;
+	  let li_id_value;
 	  let li_aria_label_value;
 	  let li_data_testid_value;
 	  let li_data_index_value;
@@ -4884,13 +4884,16 @@
 	  return {
 	    c() {
 	      li = element("li");
-	      t0 = text(t0_value);
-	      t1 = space();
+	      t = text(t_value);
+	      attr(li, "id", li_id_value =
+	      /*option*/
+	      ctx[39].label);
 	      attr(li, "aria-label", li_aria_label_value =
 	      /*option*/
 	      ctx[39].label ||
 	      /*option*/
 	      ctx[39].value);
+	      attr(li, "role", "option");
 	      attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
       ctx[39].value}-dropdown-item`);
@@ -4914,8 +4917,7 @@
 
 	    m(target, anchor) {
 	      insert(target, li, anchor);
-	      append(li, t0);
-	      append(li, t1);
+	      append(li, t);
 
 	      if (!mounted) {
 	        dispose = listen(li, "click", click_handler);
@@ -4927,11 +4929,19 @@
 	      ctx = new_ctx;
 	      if (dirty[0] &
 	      /*options*/
-	      1024 && t0_value !== (t0_value = (
+	      1024 && t_value !== (t_value = (
 	      /*option*/
 	      ctx[39].label ||
 	      /*option*/
-	      ctx[39].value) + "")) set_data(t0, t0_value);
+	      ctx[39].value) + "")) set_data(t, t_value);
+
+	      if (dirty[0] &
+	      /*options*/
+	      1024 && li_id_value !== (li_id_value =
+	      /*option*/
+	      ctx[39].label)) {
+	        attr(li, "id", li_id_value);
+	      }
 
 	      if (dirty[0] &
 	      /*options*/
@@ -4991,8 +5001,8 @@
 	  let div0_data_testid_value;
 	  let t1;
 	  let ul;
-	  let slot;
 	  let t2;
+	  let slot;
 	  let ul_style_value;
 	  let div1_style_value;
 	  let mounted;
@@ -5018,13 +5028,13 @@
 	      goa_input = element("goa-input");
 	      t1 = space();
 	      ul = element("ul");
-	      slot = element("slot");
-	      t2 = space();
 
 	      for (let i = 0; i < each_blocks.length; i += 1) {
 	        each_blocks[i].c();
 	      }
 
+	      t2 = space();
+	      slot = element("slot");
 	      this.c = noop;
 	      set_custom_element_data(goa_input, "error",
 	      /*error*/
@@ -5042,11 +5052,16 @@
 	      set_custom_element_data(goa_input, "id", goa_input_id_value = `${
       /*name*/
       ctx[0]}-dropdown-input`);
+	      set_custom_element_data(goa_input, "role", "combobox");
 	      set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
 	      /*arialabel*/
 	      ctx[1] ||
 	      /*name*/
 	      ctx[0]);
+	      set_custom_element_data(goa_input, "aria-expanded",
+	      /*isMenuVisible*/
+	      ctx[12]);
+	      set_custom_element_data(goa_input, "aria-controls", "menu");
 	      set_custom_element_data(goa_input, "readonly", "");
 	      set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 	      set_custom_element_data(goa_input, "type", "text");
@@ -5056,6 +5071,11 @@
 	      attr(div0, "data-testid", div0_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown`);
+	      attr(ul, "id", "menu");
+	      attr(ul, "role", "listbox");
+	      attr(ul, "aria-activedescendant",
+	      /*selectedLabel*/
+	      ctx[11]);
 	      attr(ul, "data-testid", "dropdown-menu");
 	      attr(ul, "tabindex", "0");
 	      attr(ul, "class", "goa-dropdown-list");
@@ -5084,14 +5104,14 @@
 	      append(div0, goa_input);
 	      append(div1, t1);
 	      append(div1, ul);
-	      append(ul, slot);
-	      append(ul, t2);
 
 	      for (let i = 0; i < each_blocks.length; i += 1) {
 	        each_blocks[i].m(ul, null);
 	      }
-	      /*ul_binding*/
 
+	      append(ul, t2);
+	      append(ul, slot);
+	      /*ul_binding*/
 
 	      ctx[23](ul);
 	      /*div1_binding*/
@@ -5172,6 +5192,14 @@
 	        set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
 	      }
 
+	      if (dirty[0] &
+	      /*isMenuVisible*/
+	      4096) {
+	        set_custom_element_data(goa_input, "aria-expanded",
+	        /*isMenuVisible*/
+	        ctx[12]);
+	      }
+
 	      if (dirty[0] &
 	      /*selectedLabel*/
 	      2048) {
@@ -5204,7 +5232,7 @@
 	          } else {
 	            each_blocks[i] = create_each_block$4(child_ctx);
 	            each_blocks[i].c();
-	            each_blocks[i].m(ul, null);
+	            each_blocks[i].m(ul, t2);
 	          }
 	        }
 
@@ -5215,6 +5243,14 @@
 	        each_blocks.length = each_value.length;
 	      }
 
+	      if (dirty[0] &
+	      /*selectedLabel*/
+	      2048) {
+	        attr(ul, "aria-activedescendant",
+	        /*selectedLabel*/
+	        ctx[11]);
+	      }
+
 	      if (dirty[0] &
 	      /*maxheight*/
 	      8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${