From 63e79657451965c01c452bb2b7dafc0f7c9d07b7 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 20 Mar 2021 16:28:29 -0700
Subject: [PATCH] Fixes (#575)

* fix(context-menu): only prevent default keydown behavior if menu is open

* docs(notification): update copy

* docs(select): update item groups example to use hidden default option

* docs: increase max-height to render UIShell, UnorderedList items

* fix(ui-shell): remove iconDescription prop from HeaderNavMenu #566

Fixes #566
---
 COMPONENT_INDEX.md                            | 13 ++++----
 docs/src/COMPONENT_API.json                   | 10 -------
 docs/src/pages/_layout.svelte                 |  2 +-
 .../pages/components/InlineNotification.svx   | 30 +++++++++----------
 docs/src/pages/components/Select.svx          |  2 +-
 .../pages/components/ToastNotification.svx    | 28 ++++++++---------
 src/ContextMenu/ContextMenu.svelte            |  3 +-
 src/UIShell/GlobalHeader/HeaderNavMenu.svelte | 10 ++-----
 types/UIShell/GlobalHeader/HeaderNavMenu.d.ts |  6 ----
 9 files changed, 41 insertions(+), 63 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index ad9ee831..b24deab3 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1662,13 +1662,12 @@ None.
 
 ### Props
 
-| Prop name       | Kind             | Reactive | Type                                       | Default value                  | Description                                   |
-| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------ | --------------------------------------------- |
-| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>              | Obtain a reference to the HTML anchor element |
-| expanded        | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>             | Set to `true` to toggle the expanded state    |
-| href            | <code>let</code> | No       | <code>string</code>                        | <code>"/"</code>               | Specify the `href` attribute                  |
-| text            | <code>let</code> | No       | <code>string</code>                        | --                             | Specify the text                              |
-| iconDescription | <code>let</code> | No       | <code>string</code>                        | <code>"Expand/Collapse"</code> | Specify the ARIA label for the chevron icon   |
+| Prop name | Kind             | Reactive | Type                                       | Default value      | Description                                   |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>  | Obtain a reference to the HTML anchor element |
+| expanded  | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code> | Set to `true` to toggle the expanded state    |
+| href      | <code>let</code> | No       | <code>string</code>                        | <code>"/"</code>   | Specify the `href` attribute                  |
+| text      | <code>let</code> | No       | <code>string</code>                        | --                 | Specify the text                              |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 515ac1e7..0a89fd78 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -4057,16 +4057,6 @@
           "isFunction": false,
           "constant": false,
           "reactive": true
-        },
-        {
-          "name": "iconDescription",
-          "kind": "let",
-          "description": "Specify the ARIA label for the chevron icon",
-          "type": "string",
-          "value": "\"Expand/Collapse\"",
-          "isFunction": false,
-          "constant": false,
-          "reactive": false
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index bb4359af..346113de 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -260,6 +260,6 @@
   }
 
   .bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
-    max-height: 120rem;
+    max-height: 124rem;
   }
 </style>
diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx
index e6ed71c1..80ff1f4a 100644
--- a/docs/src/pages/components/InlineNotification.svx
+++ b/docs/src/pages/components/InlineNotification.svx
@@ -9,15 +9,15 @@ source: Notification/InlineNotification.svelte
 
 ### Default (error)
 
-<InlineNotification title="Error" subtitle="An internal server error occurred." />
+<InlineNotification title="Error:" subtitle="An internal server error occurred." />
 
 ### Hidden close button
 
-<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
+<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
 
 ### With actions
 
-<InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours.">
+<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
   <div slot="actions">
     <NotificationActionButton>Learn more</NotificationActionButton>
   </div>
@@ -25,18 +25,18 @@ source: Notification/InlineNotification.svelte
 
 ### Notification variants
 
-<InlineNotification kind="error" title="Error" subtitle="An internal server error occurred." />
-<InlineNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." />
-<InlineNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
-<InlineNotification kind="success" title="Success" subtitle="Your settings have been saved." />
-<InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
-<InlineNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
+<InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
+<InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
+<InlineNotification kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
+<InlineNotification kind="success" title="Success:" subtitle="Your settings have been saved." />
+<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
+<InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
 
 ### Low contrast
 
-<InlineNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." />
-<InlineNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." />
-<InlineNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
-<InlineNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." />
-<InlineNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
-<InlineNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
+<InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
+<InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
+<InlineNotification lowContrast kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
+<InlineNotification lowContrast kind="success" title="Success:" subtitle="Your settings have been saved." />
+<InlineNotification lowContrast kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
+<InlineNotification lowContrast kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
diff --git a/docs/src/pages/components/Select.svx b/docs/src/pages/components/Select.svx
index e28a802e..f7f91f60 100644
--- a/docs/src/pages/components/Select.svx
+++ b/docs/src/pages/components/Select.svx
@@ -36,7 +36,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 
 ### Item groups
 
-<Select labelText="Carbon theme" selected="g10" >
+<Select labelText="Carbon theme" selected="0">
   <SelectItem value="0" text="Select a theme" disabled hidden />
   <SelectItemGroup label="Light theme">
     <SelectItem value="white" text="White" />
diff --git a/docs/src/pages/components/ToastNotification.svx b/docs/src/pages/components/ToastNotification.svx
index 2c39a3a8..eb7f6a0c 100644
--- a/docs/src/pages/components/ToastNotification.svx
+++ b/docs/src/pages/components/ToastNotification.svx
@@ -9,26 +9,26 @@ source: Notification/ToastNotification.svelte
 
 ### Default (error)
 
-<ToastNotification title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
+<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 
 ### Hidden close button
 
-<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
+<ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
 
 ### Notification variants
 
-<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]"  />
-<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
+<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
+<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}"  />
+<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
+<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
+<ToastNotification kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
+<ToastNotification kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
 
 ### Low contrast
 
-<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
-<ToastNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
+<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
+<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
+<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
+<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
+<ToastNotification lowContrast kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
+<ToastNotification lowContrast kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
diff --git a/src/ContextMenu/ContextMenu.svelte b/src/ContextMenu/ContextMenu.svelte
index c5d2f66e..95d3854d 100644
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@@ -112,7 +112,8 @@
     }
   }}"
   on:keydown
-  on:keydown|preventDefault="{(e) => {
+  on:keydown="{(e) => {
+    if (open) e.preventDefault();
     if ($hasPopup) return;
 
     if (e.key === 'ArrowDown') {
diff --git a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
index 66e25483..5c351aaa 100644
--- a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
@@ -14,9 +14,6 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
-  /** Specify the ARIA label for the chevron icon */
-  export let iconDescription = "Expand/Collapse";
-
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
 </script>
 
@@ -32,7 +29,7 @@
   }}"
 />
 
-<li class:bx--header__submenu="{true}" title="{iconDescription}">
+<li class:bx--header__submenu="{true}">
   <a
     bind:this="{ref}"
     role="menuitem"
@@ -59,10 +56,7 @@
     on:blur
   >
     {text}
-    <ChevronDown16
-      aria-label="{iconDescription}"
-      class="bx--header__menu-arrow"
-    />
+    <ChevronDown16 class="bx--header__menu-arrow" />
   </a>
   <ul role="menu" aria-label="{text}" class:bx--header__menu="{true}">
     <slot />
diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts
index bf68f4c0..feb88eb1 100644
--- a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts
@@ -25,12 +25,6 @@ export interface HeaderNavMenuProps
    * @default null
    */
   ref?: null | HTMLAnchorElement;
-
-  /**
-   * Specify the ARIA label for the chevron icon
-   * @default "Expand/Collapse"
-   */
-  iconDescription?: string;
 }
 
 export default class HeaderNavMenu extends SvelteComponentTyped<