Merge pull request #621 from tuanchauict/fix-a11y

Fix a11y
tuanchauict · Dec 12, 2024 · 1a1bf45 · 1a1bf45
2 parents 252e46c + f4811ef
commit 1a1bf45
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActionView.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActionView.svelte
@@ -13,8 +13,7 @@ function onActionClick() {
 </script>
 
 <!--Use div here instead of button to avoid the modal is dismissed when click-->
-<!--TODO: Fix this-->
-<div on:click="{onActionClick}">
+<div role="button" tabindex="0" on:click="{onActionClick}" on:keydown="{(e) => e.key === 'Enter' && onActionClick()}">
     {#if tooltip}
         <TooltipTarget text="{tooltip}" direction="{Direction.TOP}" offsetVertical="{4}">
             <slot />

diff --git a/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipTarget.svelte b/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipTarget.svelte
@@ -36,8 +36,13 @@ function hideTooltip() {
 onDestroy(hideTooltip);
 </script>
 
-<div on:mouseover="{showTooltip}" on:mouseout="{hideTooltip}">
-    <slot />
+<div role="tooltip"
+     on:mouseover="{showTooltip}"
+     on:mouseout="{hideTooltip}"
+     on:focus="{() => {}}"
+     on:blur="{hideTooltip}"
+>
+    <slot/>
 </div>
 
 <style lang="scss">

diff --git a/monosketch-svelte/src/lib/ui/pannel/common/NumberTextField.svelte b/monosketch-svelte/src/lib/ui/pannel/common/NumberTextField.svelte
@@ -84,8 +84,7 @@ input[type='number'] {
 }
 
 input[type='number'] {
-    // Firefox
-    -moz-appearance: textfield;
+    appearance: textfield;
 
     // Webkit browsers like Safari, Chrome, etc.
     &::-webkit-inner-spin-button,