@ticatec/uniface-element 5.0.1 → 5.0.3

package/dist/form/group_box/group-check-box/GroupCheckBox.svelte

@@ -168,8 +168,13 @@
         {style}
         className={className}
 >
+    <!-- onclick only forwards focus to the first checkbox when the container's
+         own background is clicked; each CheckBox inside is independently
+         focusable/keyboard-operable, so this isn't an additional action. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div bind:this={groupContainer} class="group-check-box" class:compact onfocusout={handleContainerBlur} onclick={handleContainerClick}
-         aria-hidden="true">
+         role="group">
         {#each options as op}
             {#if (hideOptions ?? []).indexOf(op[keyField]) === -1}
                 <CheckBox

package/dist/form/group_box/group-radio-box/GroupRadioBox.svelte

@@ -118,7 +118,12 @@
     {style}
     className={className}
 >
-    <div bind:this={groupContainer} class="group-radio-box" class:compact onfocusout={handleContainerBlur} onclick={handleContainerClick} aria-hidden="true">
+    <!-- onclick only forwards focus to the first radio when the container's own
+         background is clicked; each RadioButton inside is independently
+         focusable/keyboard-operable, so this isn't an additional action. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div bind:this={groupContainer} class="group-radio-box" class:compact onfocusout={handleContainerBlur} onclick={handleContainerClick} role="group">
         {#each options as op}
             <RadioButton
                 {compact}

package/dist/form/image-files/ImageFilesField.svelte

@@ -6,6 +6,7 @@
     import FileUploadPanel from "../attachment_files/FileUploadPanel.svelte";
     import ImageRender from "./ImageRender.svelte";
     import ImagePreview from "./ImagePreview.svelte";
+    import FormEditor from "../FormEditor.svelte";
     import {getEditorVariant} from "../../unifaceContext";
     import type {EditorVariant} from "../types";
 
@@ -61,24 +62,67 @@
     $effect(() => {
         text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>';
     });
+
+    const handleUploadKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            showDialog();
+        }
+    };
 </script>
 
 <div class="uniface-images-field" {style}>
-    <div class="uniface-common-editor {variant}" tabindex="-1">
+    <FormEditor {variant} {readonly} {disabled}>
         <div class="files-field">
             {#each files as file}
                 <ImageRender {file} {readonly} onRemove={removeFile}
                              onPreview={(file: ImageFile) => {showPreview = true; previewImgSrc = file.uri}}/>
             {/each}
+            {#if !disabled && !readonly}
+                <div class="editor-action-icon">
+                    <i class="icon_google_file_upload" role="button" tabindex="0" aria-label="Upload image"
+                       onclick={showDialog} onkeydown={handleUploadKeyDown}></i>
+                </div>
+            {/if}
         </div>
-        {#if !disabled && !readonly}
-            <div class="editor-action-icon">
-                <i class="icon_google_file_upload" aria-hidden="true" onclick={showDialog}></i>
-            </div>
-        {/if}
-    </div>
+    </FormEditor>
     {#if showUpload}
         <FileUploadPanel bind:visible={showUpload} accept="image/*" {maxFiles} onFileUploaded={appendNewFile} {uploadFile}/>
     {/if}
     <ImagePreview bind:visible={showPreview} src={previewImgSrc}/>
 </div>
+
+<style>
+    .uniface-images-field {
+        width: 100%;
+    }
+
+    .files-field {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 52px;
+        min-width: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        box-sizing: border-box;
+    }
+
+    .editor-action-icon {
+        flex: 0 0 auto;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        color: inherit;
+    }
+
+    .editor-action-icon:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .editor-action-icon i {
+        font-size: 22px;
+    }
+</style>

package/dist/form/image-files/ImagePreview.svelte

@@ -60,7 +60,9 @@
 </script>
 
 {#if visible}
-    <div class="uniface-image-preview-overlay" onclick={() => visible = false} aria-hidden="true">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="uniface-image-preview-overlay" onclick={() => visible = false}>
         <div>
             <div style="width: 100%; height: 100%; overflow: auto">
                 <div class="image-container"
@@ -74,7 +76,11 @@
                     </button>
                 </div>
             </div>
-            <div class="toolbar" onclick={(e: Event) => e.stopPropagation()} aria-hidden="true">
+            <!-- onclick here only stops propagation to the backdrop's close handler;
+                 the real controls are the IconButtons inside. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="toolbar" onclick={(e: Event) => e.stopPropagation()}>
                 <IconButton icon="icon_google_zoom_in" type="default" onclick={zoomIn}></IconButton>
                 <IconButton icon="icon_google_zoom_out" type="default" onclick={zoomOut}></IconButton>
                 <IconButton icon="icon_google_cancel" type="default" onclick={() => visible = false}></IconButton>

package/dist/form/image-files/ImageRender.svelte

@@ -16,22 +16,80 @@
     const removeFile = () => {
         onRemove?.(file);
     }
+
+    const handleActionKeyDown = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler();
+        }
+    };
 </script>
 
-<div style="width: 80px; box-sizing: border-box; padding: 6px 8px;">
+<div class="uniface-image-render">
     <div class="file-icon">
         <img src={file.thumbnail ?? file.uri} alt="" width="40px" height="40px"/>
         <div class="img-overlay">
-            <div>
-                <div class="action-icon" style="top: 15px;">
-                    <i class="icon_google_remove_red_eye" aria-hidden="true" onclick={() => onPreview?.(file)}></i>
-                </div>
-                {#if !readonly}
-                    <div class="action-icon" style="top: 35px;">
-                        <i class="icon_google_delete" aria-hidden="true" onclick={removeFile}></i>
-                    </div>
-                {/if}
+            <div class="action-icon">
+                <i class="icon_google_remove_red_eye" role="button" tabindex="0" aria-label="Preview image"
+                   onclick={() => onPreview?.(file)} onkeydown={handleActionKeyDown(() => onPreview?.(file))}></i>
             </div>
+            {#if !readonly}
+                <div class="action-icon">
+                    <i class="icon_google_delete" role="button" tabindex="0" aria-label="Remove image"
+                       onclick={removeFile} onkeydown={handleActionKeyDown(removeFile)}></i>
+                </div>
+            {/if}
         </div>
     </div>
-</div>
+</div>
+
+<style>
+    .uniface-image-render {
+        width: 80px;
+        box-sizing: border-box;
+        padding: 6px 8px;
+    }
+
+    .file-icon {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        overflow: hidden;
+        background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    .file-icon img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .img-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        background-color: rgba(0, 0, 0, 0.45);
+        opacity: 0;
+        transition: opacity 0.15s ease;
+    }
+
+    .file-icon:hover .img-overlay,
+    .file-icon:focus-within .img-overlay {
+        opacity: 1;
+    }
+
+    .action-icon {
+        display: flex;
+        cursor: pointer;
+        color: #fff;
+    }
+
+    .action-icon i {
+        font-size: 16px;
+    }
+</style>

package/dist/form/input_options_select/InputOptionsSelect.svelte

@@ -163,6 +163,13 @@
         isOpen = false;
     };
 
+    const handleItemKeyDown = (data: any) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleItemClick(data)();
+        }
+    };
+
     const oninput = (event: Event) => {
         isUserTyping = true;
         if (!composing) {
@@ -211,9 +218,10 @@
         {/if}
     </div>
     {#snippet popupLayer()}
-        <div class="options-popover" bind:this={scrollElement} style={mh} onscroll={handleScroll}>
+        <div class="options-popover" bind:this={scrollElement} style={mh} onscroll={handleScroll} role="listbox">
             {#each options as op (op[keyField])}
-                <div class="option-item" onclick={handleItemClick(op)} aria-hidden="true">
+                <div class="option-item" onclick={handleItemClick(op)} onkeydown={handleItemKeyDown(op)}
+                     role="option" tabindex="0" aria-selected={op[keyField] === value}>
                     {#if ItemRender}
                         <ItemRender item={op}/>
                     {:else}

package/dist/form/lookup_editor/LookupEditor.svelte

@@ -50,15 +50,22 @@
         }
     };
 
+    const handleActionKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleActionClick();
+        }
+    };
+
 </script>
 
 <CommonEditor {theme} {clear} {style} {tooltip} {error} {readonly} {disabled} {compact} {variant} textValue={text??''} canClean={!mandatory}>
     <input bind:this={editor} {placeholder} readonly value={text ?? ''} {onfocus} {onblur}/>
     {#snippet trailingIcon()}
         {#if !disabled && !readonly}
-            <i class="icon_google_arrow_drop_down action_icon" role="list" aria-hidden="true"
+            <i class="icon_google_arrow_drop_down action_icon" role="button" tabindex="0" aria-label="Lookup"
                onmousedown={(event: MouseEvent)=> {event.preventDefault()}}
-               onclick={handleActionClick}></i>
+               onclick={handleActionClick} onkeydown={handleActionKeyDown}></i>
         {/if}
     {/snippet}
 </CommonEditor>

package/dist/form/number_editor/NumberEditor.svelte

@@ -31,6 +31,7 @@
         tooltip,
         error,
         variant,
+        theme,
         compact = false,
         value = $bindable(),
         precision,
@@ -76,6 +77,7 @@
     {readonly}
     {disabled}
     {variant}
+    {theme}
     {compact}
     {leadingIcon}
     {trailingIcon}

package/dist/form/options_multi_select/OptionsMultiSelect.svelte

@@ -138,6 +138,20 @@
         }
     }
 
+    const handleEditorKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openPopupLayer();
+        }
+    };
+
+    const handleOptionKeyDown = (key: string, itemDisabled: boolean) => (e: KeyboardEvent) => {
+        if (!itemDisabled && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            toggleOption(key)(e as unknown as MouseEvent);
+        }
+    };
+
     const input$style = "position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none";
 
 </script>
@@ -145,7 +159,7 @@
 <CommonPicker {variant} {style} {compact} {tooltip} {error} {readonly} {disabled} {theme} {placeholder} {value} {mandatory} {clear}
               bind:isOpen {onblur} {onfocus} autoFit {input$style}>
     <div class="option-field">
-        <div class="options-editor" onclick={openPopupLayer} aria-hidden="true" tabindex={-1} role="textbox">
+        <div class="options-editor" onclick={openPopupLayer} onkeydown={handleEditorKeyDown} tabindex="0" role="button" aria-haspopup="listbox" aria-expanded={isOpen}>
             {#if selectedList.length > 0 }
                 {#each selectedList as code}
                     <Tag style="flex-shrink: 0" size={compact ? 'small' : 'middle'} color={tagColor} variant={tagVariant}
@@ -164,12 +178,14 @@
         </div>
     </div>
     {#snippet popupLayer()}
-        <div class="options-popover" style={mh}>
+        <div class="options-popover" style={mh} role="listbox" aria-multiselectable="true">
             {#each options as op}
                 {#if hideOptions.indexOf(op[keyField]) < 0}
                     {@const itemDisabled = disableOptions.indexOf(op[keyField]) > -1}
                     <div class="option-item" class:disabled={itemDisabled} onclick={itemDisabled ? null : toggleOption(op[keyField])}
-                         aria-hidden="true">
+                         onkeydown={handleOptionKeyDown(op[keyField], itemDisabled)}
+                         role="option" tabindex={itemDisabled ? -1 : 0}
+                         aria-selected={selectedList.indexOf(op[keyField])>-1} aria-disabled={itemDisabled}>
                         <CheckBox style="width: 100%; pointer-events: none" {theme} value={selectedList.indexOf(op[keyField])>-1} disabled={itemDisabled}
                                   label={op[textField]}/>
                     </div>

package/dist/form/options_select/OptionsSelect.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="Option extends Record<string, any> = any">
 
     import CommonPicker from "../common_editor/CommonPicker.svelte";
     import SearchBox from "../search_box/SearchBox.svelte";
@@ -8,7 +8,7 @@
     interface Props extends CommonPickerProps {
         emptyText?: string;
         value: any;
-        options: Array<any>;
+        options: Array<Option>;
         keyField?: string;
         textField?: string;
         menu$height?: number;
@@ -16,7 +16,7 @@
         hideOptions?: Array<string>;
         itemRender?: any;
         filterPlaceholder?: string;
-        filterFunction?: (option: any, keyword: string) => boolean;
+        filterFunction?: (option: Option, keyword: string) => boolean;
         noResultsText?: string;
     }
 
@@ -130,6 +130,13 @@
         }
     }
 
+    const handleItemKeyDown = (data: any) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleItemClick(data)();
+        }
+    };
+
 
     let picker: CommonPicker;
 
@@ -138,7 +145,7 @@
 <CommonPicker bind:this={picker} {error} {tooltip} {variant} {style} {compact} {textValue} {readonly} {placeholder} {disabled} bind:isOpen
               {theme} {value} clear={()=> {value = undefined}} {mandatory} {onfocus} {onblur}>
     {#snippet popupLayer()}
-        <div class="uniface-options-popover" style={mh}>
+        <div class="uniface-options-popover" style={mh} role="listbox">
             {#if filterFunction != null}
                 <div class="quick-filter-box">
                     <SearchBox
@@ -163,8 +170,10 @@
                                       disabled={disableOptions.indexOf(op[keyField])>-1}
                                       onclick={handleItemClick(op)}/>
                         {:else}
-                            <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1} aria-hidden="true"
-                                 onclick={handleItemClick(op)}>
+                            <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1}
+                                 role="option" tabindex={disableOptions.indexOf(op[keyField])>-1 ? -1 : 0}
+                                 aria-selected={String(op[keyField]) === String(value)}
+                                 onclick={handleItemClick(op)} onkeydown={handleItemKeyDown(op)}>
                                 <span>{op[textField]}</span>
                             </div>
                         {/if}

package/dist/form/options_select/OptionsSelect.svelte.d.ts

@@ -1,20 +1,42 @@
 import type CommonPickerProps from "../common_editor/CommonPickerProps";
-interface Props extends CommonPickerProps {
-    emptyText?: string;
-    value: any;
-    options: Array<any>;
-    keyField?: string;
-    textField?: string;
-    menu$height?: number;
-    disableOptions?: Array<string>;
-    hideOptions?: Array<string>;
-    itemRender?: any;
-    filterPlaceholder?: string;
-    filterFunction?: (option: any, keyword: string) => boolean;
-    noResultsText?: string;
+declare function $$render<Option extends Record<string, any> = any>(): {
+    props: CommonPickerProps & {
+        emptyText?: string;
+        value: any;
+        options: Array<Option>;
+        keyField?: string;
+        textField?: string;
+        menu$height?: number;
+        disableOptions?: Array<string>;
+        hideOptions?: Array<string>;
+        itemRender?: any;
+        filterPlaceholder?: string;
+        filterFunction?: (option: Option, keyword: string) => boolean;
+        noResultsText?: string;
+    };
+    exports: {
+        focus: () => void;
+    };
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Option extends Record<string, any> = any> {
+    props(): ReturnType<typeof $$render<Option>>['props'];
+    events(): ReturnType<typeof $$render<Option>>['events'];
+    slots(): ReturnType<typeof $$render<Option>>['slots'];
+    bindings(): "value";
+    exports(): {
+        focus: () => void;
+    };
 }
-declare const OptionsSelect: import("svelte").Component<Props, {
-    focus: () => void;
-}, "value">;
-type OptionsSelect = ReturnType<typeof OptionsSelect>;
+interface $$IsomorphicComponent {
+    new <Option extends Record<string, any> = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option>['props']>, ReturnType<__sveltets_Render<Option>['events']>, ReturnType<__sveltets_Render<Option>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Option>['bindings']>;
+    } & ReturnType<__sveltets_Render<Option>['exports']>;
+    <Option extends Record<string, any> = any>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const OptionsSelect: $$IsomorphicComponent;
+type OptionsSelect<Option extends Record<string, any> = any> = InstanceType<typeof OptionsSelect<Option>>;
 export default OptionsSelect;

package/dist/form/prompts_text_editor/PromptsTextEditor.svelte

@@ -17,6 +17,7 @@
 
     let {
         variant,
+        theme,
         compact = false,
         disabled = false,
         readonly = false,
@@ -50,6 +51,13 @@
         e.preventDefault();
     };
 
+    const handleHintKeyDown = (item: string) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleHintClick(item)(e as unknown as MouseEvent);
+        }
+    };
+
 
 
     const clear = () => {
@@ -62,18 +70,19 @@
 </script>
 
 
-<CommonPopupEditor bind:this={editorRef} {variant} {compact} {style} {tooltip} {disabled} {readonly} {prefix} autoFit
+<CommonPopupEditor bind:this={editorRef} {variant} {theme} {compact} {style} {tooltip} {disabled} {readonly} {prefix} autoFit
                    {suffix} {clear} textValue={value}>
     <input bind:this={editor} bind:value {disabled} {readonly} {placeholder} {...eventHandlers}/>
 
     {#snippet popupLayer()}
-        <div class="options-popover" style={mh}>
+        <div class="options-popover" style={mh} role="listbox">
             {#each words as word}
                 <div
                         class="option-item"
                         style="padding-left: 12px; padding-right: 12px"
                         onclick={handleHintClick(word)}
-                        aria-hidden="true"
+                        onkeydown={handleHintKeyDown(word)}
+                        role="option" tabindex="0" aria-selected={word === value}
                 >
                     <span>{word}</span>
                 </div>

package/dist/form/search_box/SearchBox.svelte

@@ -13,6 +13,7 @@
 
     let {
         variant,
+        theme,
         tooltip,
         compact = false,
         style,
@@ -71,7 +72,7 @@
     };
 </script>
 
-<CommonEditor {variant} {compact} {tooltip} {style} {disabled} input$class='search-box'>
+<CommonEditor {variant} {theme} {compact} {tooltip} {style} {disabled} input$class='search-box'>
     {#snippet leadingIcon()}
         <div style="line-height: 16px; font-size: 18px">
             <i class="icon_google_search"></i>

package/dist/form/switch/Switch.svelte

@@ -24,10 +24,10 @@
 </script>
 
 <div class="switch-box">
-    <label class="switch" class:readonly class:disabled aria-hidden="true" onclick={toggleSwitch}>
-        <input type="checkbox" bind:checked={value}>
-        <span class="slider"></span>
-        <span class="text">{value ? uncheckLabel : checkLabel}</span>
+    <label class="switch" class:readonly class:disabled>
+        <input type="checkbox" bind:checked={value} disabled={disabled} aria-readonly={readonly} onclick={toggleSwitch}>
+        <span class="slider" aria-hidden="true"></span>
+        <span class="text" aria-hidden="true">{value ? uncheckLabel : checkLabel}</span>
     </label>
 </div>
 

package/dist/form/text_editor/PasswordEditor.svelte

@@ -18,6 +18,7 @@
         disabled = false,
         readonly = false,
         variant,
+        theme,
         compact = false,
         style,
         value = $bindable(),
@@ -56,7 +57,7 @@
 
 </script>
 
-<CommonEditor textValue={value} {clear} {disabled} {readonly} {variant} {compact} {style} {tooltip} {error}>
+<CommonEditor textValue={value} {clear} {disabled} {readonly} {variant} {theme} {compact} {style} {tooltip} {error}>
     <input bind:this={editor} bind:value type={showPassword ? 'text' : 'password'} {...input$} onchange={handleChangeEvent} {...eventHandlers()} />
     {#snippet trailingIcon()}
         <div class="password-icon">

package/dist/form/text_editor/TextEditor.svelte

@@ -26,6 +26,7 @@
         disabled = false,
         readonly = false,
         variant,
+        theme,
         compact = false,
         style,
         value = $bindable(),
@@ -79,7 +80,7 @@
 </script>
 
 
-<CommonEditor textValue={value} {clear} {suffix} {prefix} {readonly} {disabled} {variant} {compact} {leadingIcon} {trailingIcon} {tooltip}
+<CommonEditor textValue={value} {clear} {suffix} {prefix} {readonly} {disabled} {variant} {theme} {compact} {leadingIcon} {trailingIcon} {tooltip}
               {error}>
     <input bind:this={editor} {...input$} {placeholder} {...eventHandlers}
            oninput={handleInput} onchange={handleChange} bind:value/>

package/dist/form/time_editor/TimeEditor.svelte

@@ -22,6 +22,7 @@
         mandatory = false,
         precision = 'M',
         variant,
+        theme,
         compact = false,
         style,
         value = $bindable<number | undefined>(),
@@ -202,6 +203,7 @@
     {disabled}
     {readonly}
     {variant}
+    {theme}
     {compact}
     {leadingIcon}
     {trailingIcon}

package/dist/form/unit-number-editor/UnitNumberEditor.svelte

@@ -9,6 +9,7 @@
 
     interface Props {
         variant?: EditorVariant;
+        theme?: string;
         compact?: boolean;
         style?: string;
         tooltip?: string;
@@ -30,6 +31,7 @@
 
     let {
         variant,
+        theme,
         compact = false,
         style,
         tooltip,
@@ -100,6 +102,13 @@
         e.preventDefault();
     };
 
+    const handleUnitKeyDown = (item: UnitOption) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleUnitClick(item)(e as unknown as MouseEvent);
+        }
+    };
+
     //
     // const handlePopupClose = () => {
     //     showPopup = false;
@@ -154,6 +163,7 @@
 
 <CommonPopupEditor bind:this={editorRef}
         {variant}
+        {theme}
         {error}
         {compact}
         {style}
@@ -180,10 +190,11 @@
     />
 
     {#snippet popupLayer()}
-        <div class="options-popover" style={mh}>
+        <div class="options-popover" style={mh} role="listbox">
             {#each units as op}
                 <div class="option-item"
-                     onclick={handleUnitClick(op)} aria-hidden="true">
+                     onclick={handleUnitClick(op)} onkeydown={handleUnitKeyDown(op)}
+                     role="option" tabindex="0" aria-selected={op.code === unitCode}>
                     <span>{op.text ?? op.code}</span>
                 </div>
             {/each}

package/dist/form/unit-number-editor/UnitNumberEditor.svelte.d.ts

@@ -3,6 +3,7 @@ import type { EditorVariant } from "../types";
 import type UnitOption from "./UnitOption";
 interface Props {
     variant?: EditorVariant;
+    theme?: string;
     compact?: boolean;
     style?: string;
     tooltip?: string;