@ticatec/uniface-element 5.0.1 → 5.0.2

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/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

@@ -50,6 +50,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 = () => {
@@ -67,13 +74,14 @@
     <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/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/unit-number-editor/UnitNumberEditor.svelte

@@ -100,6 +100,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;
@@ -180,10 +187,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/general/button/Button.svelte

@@ -4,6 +4,7 @@
 
     interface Props {
         type?: ButtonType;
+        htmlType?: 'button' | 'submit' | 'reset';
         label?: string;
         variant?: 'plain' | 'round' | '';
         disabled?: boolean;
@@ -20,6 +21,7 @@
 
     let {
         type = 'default',
+        htmlType = 'button',
         label = '',
         variant = '',
         disabled = false,
@@ -47,6 +49,7 @@
 <!-- autofocus is an explicit opt-in component API; consumers decide when initial focus is appropriate. -->
 <!-- svelte-ignore a11y_autofocus -->
 <button
+    type={htmlType}
     {style}
     class="uniface-button common-button {variant} {size} {type} {theme}"
     class:disabled={disabled}

package/dist/general/button/Button.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ButtonType } from '../../types';
 interface Props {
     type?: ButtonType;
+    htmlType?: 'button' | 'submit' | 'reset';
     label?: string;
     variant?: 'plain' | 'round' | '';
     disabled?: boolean;

package/dist/general/button/IconButton.svelte

@@ -6,6 +6,7 @@
 
     interface Props {
         type?: ButtonType;
+        htmlType?: 'button' | 'submit' | 'reset';
         disabled?: boolean;
         size?: ButtonSize;
         style?: string;
@@ -18,6 +19,7 @@
 
     let {
         type = 'default',
+        htmlType = 'button',
         disabled = false,
         size = 'medium',
         style,
@@ -40,7 +42,7 @@
 
 </script>
 
-<button class="uniface-button icon-button {size} {type} {theme}" {style} class:disabled {disabled}
+<button type={htmlType} class="uniface-button icon-button {size} {type} {theme}" {style} class:disabled {disabled}
     tabindex={disabled ? -1 : 0} data-tip={disabled ? null : tooltip} onclick={handleClick}>
     {#if children}
         {@render children()}

package/dist/general/button/IconButton.svelte.d.ts

@@ -3,6 +3,7 @@ type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
 type ButtonSize = 'big' | 'medium' | 'small';
 interface Props {
     type?: ButtonType;
+    htmlType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     size?: ButtonSize;
     style?: string;

package/dist/general/button/TextButton.svelte

@@ -9,6 +9,7 @@
         size?: ButtonSize;
         label?: string;
         type?: ButtonType;
+        htmlType?: 'button' | 'submit' | 'reset';
         onclick?: (event: MouseEvent) => void;
         style?: string;
         theme?: string;
@@ -21,6 +22,7 @@
         size = 'medium',
         label = '',
         type = 'default',
+        htmlType = 'button',
         onclick = undefined,
         style = '',
         theme,
@@ -45,6 +47,7 @@
 </script>
 
 <button
+    type={htmlType}
     class="uniface-button text-button {size} {type} {theme}"
     {style}
     class:disabled

package/dist/general/button/TextButton.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     size?: ButtonSize;
     label?: string;
     type?: ButtonType;
+    htmlType?: 'button' | 'submit' | 'reset';
     onclick?: (event: MouseEvent) => void;
     style?: string;
     theme?: string;

package/dist/general/icon/Icon.svelte

@@ -32,17 +32,34 @@
             respClick = true;
         }
     }
+
+    const isInteractive = $derived(onclick != null);
+
+    function handleKeyDown(e: KeyboardEvent) {
+        if (isInteractive && !disabled && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleClickEvent(e as unknown as MouseEvent);
+        }
+    }
 </script>
 
+<!-- role/tabindex are only ever both set together when onclick is provided
+     (isInteractive); svelte-check can't verify that pairing statically. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
     class="uniface-icon {theme} {className}"
     class:clickable={onclick!=null && !disabled}
     class:disabled={disabled}
     onmousedown={(event: MouseEvent) => {event.preventDefault();}}
     {style}
-    aria-hidden="true"
+    role={isInteractive ? 'button' : undefined}
+    tabindex={isInteractive && !disabled ? 0 : undefined}
+    aria-disabled={isInteractive ? disabled : undefined}
+    aria-hidden={isInteractive ? undefined : true}
+    aria-label={isInteractive ? (tooltip || undefined) : undefined}
     data-tip={disabled ? null : tooltip || null}
     onclick={handleClickEvent}
+    onkeydown={handleKeyDown}
 >
     <i class={name}></i>
 </div>

package/dist/general/tag/Tag.svelte

@@ -34,13 +34,21 @@
         event.stopPropagation();
     }
 
+    const handleTagKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            ondelete?.(data?.id);
+        }
+    }
+
 </script>
 
 <div class="uniface-tag" {style} data-theme="{theme}">
     <div class="{size} {variant} {colorClass}" class:removable={removable}>
         <span>{text}</span>
         {#if removable}
-            <i class="icon_google_clear uniface-remove-icon" aria-hidden="true" onclick={handleTagClick}></i>
+            <i class="icon_google_clear uniface-remove-icon" role="button" tabindex="0" aria-label="Remove {text}"
+               onclick={handleTagClick} onkeydown={handleTagKeyDown}></i>
         {/if}
     </div>
 </div>