@ticatec/uniface-element 5.0.0 → 5.0.2

package/dist/form/common_range_editor/CommonRangeEditor.svelte

@@ -40,6 +40,13 @@
         toChild,
         actionIcon
     }: Props = $props();
+
+    const handleCleanKeyDown = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handler();
+        }
+    };
 </script>
 
 <FormEditor {variant} {compact} {disabled} {readonly} {error} {tooltip} {theme} {style} {className}>
@@ -48,14 +55,16 @@
             <div class="range-cell">
                 {@render fromChild()}
                 <div class="clean-icon" class:visible={showFromClean}>
-                    <i class="icon_google_clear" aria-hidden="true" onclick={cleanFrom}></i>
+                    <i class="icon_google_clear" role="button" tabindex={showFromClean ? 0 : -1} aria-label="Clear"
+                       onclick={cleanFrom} onkeydown={handleCleanKeyDown(cleanFrom)}></i>
                 </div>
             </div>
             <div class="divider"></div>
             <div class="range-cell">
                 {@render toChild()}
                 <div class="clean-icon" class:visible={showToClean}>
-                    <i class="icon_google_clear" aria-hidden="true" onclick={cleanTo}></i>
+                    <i class="icon_google_clear" role="button" tabindex={showToClean ? 0 : -1} aria-label="Clear"
+                       onclick={cleanTo} onkeydown={handleCleanKeyDown(cleanTo)}></i>
                 </div>
             </div>
         </div>

package/dist/form/date_picker/DatePicker.svelte

@@ -59,7 +59,7 @@
               bind:isOpen autoFit={false} {textValue} {readonly} {disabled}>
     {#snippet popupLayer()}
         <div class="date-popover">
-            <Calendar value={value} {min} {max} onselect={handleCalendarSelect}/>
+            <Calendar value={value} {min} {max} onchange={handleCalendarSelect}/>
         </div>
     {/snippet}
 </CommonPicker>

package/dist/form/date_picker/DateTimePicker.svelte

@@ -123,7 +123,7 @@
                 <Calendar
                         style="border-right: 1px solid var(--uniface-inside-border-color, #f0f0f0)"
                         value={currentValue}
-                        onselect={handleCalendarSelect}
+                        onchange={handleCalendarSelect}
                         {min} {max}/>
                 <TimePanel style="width: 120px" value={currentValue} {precision} onchange={handleTimeChange}/>
             </div>

package/dist/form/date_picker/ScrollBar.svelte

@@ -2,12 +2,16 @@
 
     import type {OnChangeHandler} from "../../types";
 
-    export let value: number;
-    export let mode: 24 | 60 = 60;
-    export let enable: boolean = true;
-    export let onchange: OnChangeHandler<number> = null as unknown as OnChangeHandler<number>;
+    interface Props {
+        value: number;
+        mode?: 24 | 60;
+        enable?: boolean;
+        onchange?: OnChangeHandler<number>;
+    }
+
+    let {value = $bindable(), mode = 60, enable = true, onchange}: Props = $props();
 
-    let list: Array<any> = [];
+    let list: Array<any> = $state([]);
 
     const decValue = () => {
         if (enable) {
@@ -75,25 +79,29 @@
 
     let timer: any;
 
-    $:resetList();
+    $effect(() => {
+        void value;
+        void mode;
+        resetList();
+    });
 
 </script>
-<div class="scroll-bar" on:wheel={handleMouseWheel}>
+<div class="scroll-bar" onwheel={handleMouseWheel}>
     <div class="action-bar">
         <div class="arrow-up" class:disabled={!enable}>
-            <i class="icon_google_keyboard_arrow_up" on:click={decValue} on:keydown={handleKeyDown(decValue)} on:dragstart={(e)=>{e.preventDefault()}}
-                 on:mousedown={handleMouseDown(-1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}
+            <i class="icon_google_keyboard_arrow_up" onclick={decValue} onkeydown={handleKeyDown(decValue)} ondragstart={(e)=>{e.preventDefault()}}
+                 onmousedown={handleMouseDown(-1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
                  role="button" tabindex="0" aria-label="Decrease value"></i>
         </div>
     </div>
     {#each list as v}
-        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" on:click={()=>{handleDigitalClick(v)}} on:keydown={handleKeyDown(() => handleDigitalClick(v))} class:inactive={v!=value}
+        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" onclick={()=>{handleDigitalClick(v)}} onkeydown={handleKeyDown(() => handleDigitalClick(v))} class:inactive={v!=value}
              role="button" tabindex="0" aria-label="Select {v}"><span>{v}</span></div>
     {/each}
     <div class="action-bar">
         <div class="arrow-down" class:disabled={!enable}>
-            <i class="icon_google_keyboard_arrow_down" on:click={incValue} on:keydown={handleKeyDown(incValue)} on:dragstart={(e)=>{e.preventDefault()}}
-                 on:mousedown={handleMouseDown(1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}
+            <i class="icon_google_keyboard_arrow_down" onclick={incValue} onkeydown={handleKeyDown(incValue)} ondragstart={(e)=>{e.preventDefault()}}
+                 onmousedown={handleMouseDown(1)} onmouseup={handleMouseUp} onmouseleave={handleMouseUp}
                  role="button" tabindex="0" aria-label="Increase value"></i>
         </div>
     </div>

package/dist/form/date_picker/ScrollBar.svelte.d.ts

@@ -1,24 +1,10 @@
 import type { OnChangeHandler } from "../../types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ScrollBar: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: number;
     mode?: 24 | 60;
     enable?: boolean;
     onchange?: OnChangeHandler<number>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ScrollBar = InstanceType<typeof ScrollBar>;
+}
+declare const ScrollBar: import("svelte").Component<Props, {}, "value">;
+type ScrollBar = ReturnType<typeof ScrollBar>;
 export default ScrollBar;

package/dist/form/date_range/DateRangeEditor.svelte

@@ -80,6 +80,13 @@
         toValue = normalizeValue(value.toDate(), false);
         isOpen = false;
     };
+
+    const handleIconKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            showPopover();
+        }
+    };
 </script>
 
 <div bind:this={rootElement}>
@@ -91,7 +98,8 @@
             <input style="width: 100%; text-align: center" readonly onclick={showPopover} value={textTo}/>
         {/snippet}
         {#snippet actionIcon()}
-            <i class="icon_google_event_note action-icon" aria-hidden="true" onclick={showPopover}></i>
+            <i class="icon_google_event_note action-icon" role="button" tabindex="0" aria-label="Open date range picker"
+               onclick={showPopover} onkeydown={handleIconKeyDown}></i>
         {/snippet}
     </CommonRangeEditor>
 
@@ -101,12 +109,12 @@
                 <Calendar
                     style="border-right: 1px solid #f0f0f0"
                     value={fromValue}
-                    onselect={handleFormCalendarSelect}
+                    onchange={handleFormCalendarSelect}
                     {min}
                     max={maxFrom}/>
                 <Calendar
                     value={toValue}
-                    onselect={handleToCalendarSelect}
+                    onchange={handleToCalendarSelect}
                     min={minTo}
                     {max}/>
             </div>

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,20 +60,27 @@
 </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"
                      style="width: {containerWidth}px; height: {containerHeight}px; {imgStyle}">
-                    <img onclick={(e: Event) => e.stopPropagation()}
-                         src={src}
-                         alt="Preview"
-                         onload={handleImageLoad}
-                         style="width: {imgPanelWidth}px; height: {imgPanelHeight}px;"
-                    />
+                    <button type="button" class="image-content" aria-label="Preview image" onclick={(e: Event) => e.stopPropagation()}>
+                        <img src={src}
+                             alt="Preview"
+                             onload={handleImageLoad}
+                             style="width: {imgPanelWidth}px; height: {imgPanelHeight}px;"
+                        />
+                    </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>
@@ -120,10 +127,17 @@
             img {
                 transition: transform 0.3s ease;
             }
+
+            .image-content {
+                display: inline-flex;
+                padding: 0;
+                border: 0;
+                background: transparent;
+            }
         }
 
         &:hover .toolbar {
             display: flex;
         }
     }
-</style>
+</style>

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/memo_editor/MemoEditor.svelte

@@ -78,7 +78,7 @@
                 {disabled}
                 rows={autoHeight ? undefined : rows}
                 {wrap}
-                {maxLength}
+                maxlength={maxLength}
                 bind:value
                 {...events}
                 {...input$}
@@ -168,4 +168,4 @@
         z-index: 10;
     }
 
-</style>
+</style>

package/dist/form/number_editor/NumberEditor.svelte

@@ -45,7 +45,7 @@
         ...restProps
     }: Props = $props();
 
-    let numberInput: NumberInput;
+    let numberInput = $state<NumberInput>();
 
     export function focus() {
         numberInput?.focus();
@@ -94,4 +94,4 @@
             {...input$}
         />
     {/if}
-</CommonEditor>
+</CommonEditor>

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>
@@ -214,16 +230,8 @@
         outline: none;
     }
 
-    .options-editor.disabled {
-        filter: grayscale(1);
-    }
-
-    .options-editor.disabled * {
-        cursor: not-allowed;
-    }
-
     .options-editor .placeholder {
         color: var(--uniface-editor-color-placeholder);
     }
 
-</style>
+</style>

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}