DT-1233 and DT-1254 - Namespace switcher and Split Button a11y (#1535)

* add an aria label to dropdown menu button

* add label for split button menus

src/lib/components/top-nav.svelte

@@ -41,7 +41,8 @@
     {#if showNamespaceSpecificNav}
       {#key namespace}
         <DropdownMenu
-          id="namespace"
+          label={translate('namespaces', 'namespace-label', { namespace })}
+          id="namespace-switcher"
           position="right"
           menuClass="border-2 bg-purple-200"
           buttonClass="border border-purple-700 rounded-sm"

src/lib/components/workflow-actions.svelte

@@ -261,6 +261,7 @@
     primaryActionDisabled={!cancelEnabled || cancelInProgress}
     on:click={() => cancelConfirmationModal.open()}
     label={translate('workflows', 'request-cancellation')}
+    menuLabel={translate('workflows', 'workflow-actions')}
   >
     {#each workflowActions as { onClick, destructive, label, allowed, testId, tooltip }}
       {#if destructive}

src/lib/holocene/dropdown-menu.svelte

@@ -5,10 +5,11 @@
 
   export let id: string;
   export let position: 'right' | 'left' = 'left';
+  export let label: string = null;
 </script>
 
 <MenuContainer let:open>
-  <MenuButton controls={id} class={$$restProps.buttonClass}>
+  <MenuButton {label} controls={id} class={$$restProps.buttonClass}>
     <slot name="trigger" />
   </MenuButton>
   <Menu {position} class="min-w-fit {$$restProps.menuClass}" {id}>

src/lib/holocene/input/input.svelte

@@ -67,7 +67,7 @@
   export { className as class };
 
   function callFocus(input: HTMLInputElement) {
-    if (autoFocus) input.focus();
+    if (autoFocus && input) input.focus();
   }
 
   const dispatch = createEventDispatcher();

src/lib/holocene/primitives/menu/menu-button.svelte

@@ -9,6 +9,7 @@
   export let hasIndicator = false;
   export let id: string = null;
   export let icon: IconName = null;
+  export let label: string = null;
 
   const { toggleMenu, open } = getContext<MenuContext>(MENU_CONTEXT);
 
@@ -32,6 +33,7 @@
   class:has-indicator={hasIndicator}
   class:has-icon={!!icon}
   {disabled}
+  aria-label={label}
   data-testid={$$props.testId}
 >
   {#if icon}<Icon name={icon} />{/if}<slot />{#if hasIndicator}

src/lib/holocene/primitives/menu/menu-divider.svelte

@@ -1 +1 @@
-<hr class="mx-4 border-gray-300" />
+<hr tabindex="-1" aria-hidden="true" class="mx-4 border-gray-300" />

src/lib/holocene/primitives/menu/menu-item.svelte

@@ -36,50 +36,44 @@
   $: ({ text, ...restTooltipProps } = tooltipProps);
 </script>
 
-<div class="menu-item-wrapper" class:disabled>
-  <Tooltip left class="w-full" hide={!text} {text} {...restTooltipProps}>
-    {#if href}
-      <a
-        {href}
-        role="menuitem"
-        class:dark
-        class:destructive
-        class:selected
-        class:active
-        class:disabled
-        data-testid={testId}
-        class="menu-item inline-block {$$props.class}"
-      >
-        <slot />
-      </a>
-    {:else}
-      <li
-        on:click|preventDefault|stopPropagation={handleClick}
-        on:keyup={handleKeyUp}
-        role="menuitem"
-        tabindex="0"
-        class:dark
-        class:destructive
-        class:selected
-        class:active
-        class:disabled
-        data-testid={testId}
-        class="menu-item {$$props.class}"
-      >
-        {#if selected}
-          <Icon width={18} height={18} name="checkmark" />
-        {/if}
-        <slot />
-      </li>
-    {/if}
-  </Tooltip>
-</div>
+<Tooltip left class="w-full" hide={!text} {text} {...restTooltipProps}>
+  {#if href}
+    <a
+      {href}
+      role="menuitem"
+      class:dark
+      class:destructive
+      class:selected
+      class:active
+      class:disabled
+      data-testid={testId}
+      class="menu-item inline-block {$$props.class}"
+    >
+      <slot />
+    </a>
+  {:else}
+    <li
+      on:click|preventDefault|stopPropagation={handleClick}
+      on:keyup={handleKeyUp}
+      role="menuitem"
+      tabindex="0"
+      class:dark
+      class:destructive
+      class:selected
+      class:active
+      class:disabled
+      data-testid={testId}
+      class="menu-item {$$props.class}"
+    >
+      {#if selected}
+        <Icon width={18} height={18} name="checkmark" />
+      {/if}
+      <slot />
+    </li>
+  {/if}
+</Tooltip>
 
 <style lang="postcss">
-  .menu-item-wrapper.disabled {
-    @apply cursor-not-allowed;
-  }
-
   .menu-item {
     @apply w-full flex flex-col cursor-pointer list-none bg-white p-4 font-secondary text-sm font-medium text-primary hover:bg-gray-50 first-of-type:rounded-t last-of-type:rounded-b focus:outline-none focus-visible:outline focus-visible:bg-blue-50 focus-visible:outline-blue-700 focus-visible:-outline-offset-2;
   }
@@ -103,6 +97,6 @@
   }
 
   .menu-item.disabled {
-    @apply pointer-events-none text-gray-500;
+    @apply cursor-not-allowed pointer-events-none text-gray-500;
   }
 </style>

src/lib/holocene/primitives/menu/menu.svelte

@@ -16,11 +16,9 @@
 <ul
   in:fly={{ duration: 100 }}
   role="menu"
-  tabindex="0"
   class="absolute z-50 mt-1 p-2 w-full list-none rounded border border-gray-900 bg-white text-primary shadow focus:outline-none focus-visible:outline focus-visible:outline-blue-700 focus-visible:-outline-offset-2 {position} {$$props.class}"
   class:dark
-  class:sr-only={!$open}
-  aria-labelledby={id}
+  class:hidden={!$open}
   {id}
 >
   <slot />

src/lib/holocene/split-button.story.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Hst as HST } from '@histoire/plugin-svelte';
-  
+
   import MenuItem from './primitives/menu/menu-item.svelte';
   import SplitButton from './split-button.svelte';
 
@@ -9,19 +9,25 @@
 
 <Hst.Story>
   <Hst.Variant title="A Split Button">
-    <SplitButton id="button-1" label="Edit">
+    <SplitButton id="button-1" label="Edit" menuLabel="Actions">
       <MenuItem>Edit</MenuItem>
       <MenuItem destructive>Delete</MenuItem>
     </SplitButton>
   </Hst.Variant>
 
   <Hst.Variant title="A disabled Split Button">
-    <SplitButton id="button-2" label="Edit" disabled />
+    <SplitButton id="button-2" label="Edit" menuLabel="Actions" disabled />
   </Hst.Variant>
 
   <Hst.Variant title="A right-aligned Split Button">
     <div class="flex flex-row justify-end">
-      <SplitButton id="button-3" label="Edit" right href="/">
+      <SplitButton
+        id="button-3"
+        label="Edit"
+        menuLabel="Actions"
+        right
+        href="/"
+      >
         <MenuItem>Edit</MenuItem>
         <MenuItem destructive>Delete</MenuItem>
       </SplitButton>

src/lib/holocene/split-button.svelte

@@ -3,12 +3,13 @@
   import MenuButton from '$lib/holocene/primitives/menu/menu-button.svelte';
   import MenuContainer from '$lib/holocene/primitives/menu/menu-container.svelte';
   import Menu from '$lib/holocene/primitives/menu/menu.svelte';
-  
+
   import type { IconName } from './icon/paths';
-  
+
   import Button from './button.svelte';
 
-  export let label = '';
+  export let label: string;
+  export let menuLabel: string;
   export let icon: IconName | undefined = undefined;
   export let id: string;
   export let variant:
@@ -44,6 +45,7 @@
     </Button>
     <MenuButton
       id="{id}-menu-button"
+      label={menuLabel}
       dark
       class="segment right"
       bind:show

src/lib/i18n/locales/en/namespaces.ts

@@ -17,6 +17,7 @@ export const Strings = {
   clusters: 'Clusters',
   'client-actions': 'Client Actions',
   'signal-workflow': 'Signal Workflow',
+  'namespace-label': 'Namespace {{namespace}}',
   'unauthorized-namespace-error': 'You do not have access to this namespace.',
   'select-namespace-welcome': 'Welcome to Temporal',
   'select-namespace': 'Select a Namespace to get started.',

src/lib/i18n/locales/en/schedules.ts

@@ -21,6 +21,7 @@ export const Strings = {
   'delete-schedule-error': 'Cannot delete schedule. {{error}}',
   pause: 'Pause',
   unpause: 'Unpause',
+  'schedule-actions': 'Schedule Actions',
   'pause-modal-title': 'Pause Schedule?',
   'pause-modal-confirmation': 'Are you sure you want to pause {{schedule}}?',
   'pause-reason': 'Enter a reason for pausing the schedule.',

src/lib/i18n/locales/en/workflows.ts

@@ -68,6 +68,7 @@ export const Strings = {
   compact: 'Compact',
   json: 'JSON',
   download: 'Download',
+  'workflow-actions': 'Workflow Actions',
   'reset-disabled':
     'Resetting workflows is not enabled, please contact your administrator for assistance.',
   'reset-disabled-pending-children':

src/lib/pages/schedule-view.svelte

@@ -141,7 +141,10 @@
       </div>
       <SplitButton
         position="right"
-        label={schedule?.schedule?.state?.paused ? 'Unpause' : 'Pause'}
+        label={schedule?.schedule?.state?.paused
+          ? translate('schedules', 'unpause')
+          : translate('schedules', 'pause')}
+        menuLabel={translate('schedules', 'schedule-actions')}
         id="schedule-actions"
         disabled={editDisabled}
         on:click={() => pauseConfirmationModal.open()}