Merge pull request #623 from tuanchauict/fix-a11y

Fix a11y
tuanchauict · Dec 12, 2024 · d4f0767 · d4f0767
2 parents 98a106e + 046f4a8
commit d4f0767
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 25 deletions.
diff --git a/monosketch-svelte/src/lib/mono/shape/interaction-bound.ts b/monosketch-svelte/src/lib/mono/shape/interaction-bound.ts
@@ -86,7 +86,7 @@ export class ScalableInteractionBound implements InteractionBound {
                 left: right,
                 top: bottom,
             },
-        ]
+        ];
 
         return new ScalableInteractionBound(
             interactionPoints,

diff --git a/monosketch-svelte/src/lib/ui/modal/common/NoBackgroundModal.svelte b/monosketch-svelte/src/lib/ui/modal/common/NoBackgroundModal.svelte
@@ -1,3 +1,9 @@
+<!--
+Elements inside this modal should not block click event propagation.
+This helps the modals identify if the click event was inside the modal or outside to
+dismiss the modal correctly.
+-->
+
 <script lang="ts">
 import { onMount } from 'svelte';
 
@@ -24,9 +30,24 @@ function onKeyDown(event: KeyboardEvent) {
     }
 }
 
+function onClick() {
+    if (!timeout) {
+        return;
+    }
+    clearTimeout(timeout);
+    timeout = null;
+
+    // Ensure the modal is focused when clicked inside.
+    if (document.hasFocus()) {
+        checkbox?.focus();
+    }
+}
+
 function onFocusIn() {
     if (timeout) {
         clearTimeout(timeout);
+
+        timeout = null;
     }
 }
 
@@ -56,7 +77,9 @@ function createStyle() {
 
 <div
     class="modal"
+    role="button"
     tabindex="-1"
+    on:click="{onClick}"
     on:keydown="{onKeyDown}"
     on:focusin="{onFocusIn}"
     on:focusout="{onFocusOut}"

diff --git a/monosketch-svelte/src/lib/ui/modal/menu/common/MenuItem.svelte b/monosketch-svelte/src/lib/ui/modal/menu/common/MenuItem.svelte
@@ -10,14 +10,19 @@ function onItemClick() {
 }
 </script>
 
-<div on:click="{onItemClick}">
+<button on:click="{onItemClick}">
     {title}
-</div>
+</button>
 
 <style lang="scss">
-div {
+button {
     padding: 5px 8px 5px 16px;
     margin: 0;
+    display: block;
+    width: 100%;
+    font-family: inherit;
+    text-align: start;
+    border: none;
     cursor: pointer;
     overflow: hidden;
     color: var(--mainmenu-item-color);

diff --git a/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/FontAdjustmentItem.svelte b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/FontAdjustmentItem.svelte
@@ -6,17 +6,34 @@ const decreaseFont = () => onChange(false);
 </script>
 
 <div class="container">
-    <div class="item decrease" on:click="{decreaseFont}">A</div>
-    <div class="item increase" on:click="{increaseFont}">A</div>
+    <button type="button" class="item decrease"
+            on:click="{decreaseFont}"
+            on:keydown="{(e) => e.key === 'Enter' && decreaseFont()}">
+        A
+    </button>
+    <button type="button" class="item increase"
+            on:click="{increaseFont}"
+            on:keydown="{(e) => e.key === 'Enter' && increaseFont()}">
+        A
+    </button>
 </div>
-
 <style lang="scss">
 .container {
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
+button {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+}
+
 .item {
     width: 50%;
     height: 28px;

diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/common/MenuItem.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/common/MenuItem.svelte
@@ -13,12 +13,17 @@ function onItemClick() {
 </script>
 
 <div class="row" class:normal="{!danger}" class:danger>
-    <div class="icon" on:click="{onItemClick}">
-        <slot name="icon" />
-    </div>
-    <div class="content" on:click="{onItemClick}">
-        <slot name="content" />
+    <div role="button" tabindex="0" class="content-container"
+         on:click="{onItemClick}"
+         on:keydown="{(e) => e.key === 'Enter' && onItemClick()}">
+        <div class="icon" >
+            <slot name="icon" />
+        </div>
+        <div class="content">
+            <slot name="content" />
+        </div>
     </div>
+
     <div class="actions">
         <slot name="actions" />
     </div>
@@ -63,6 +68,15 @@ function onItemClick() {
     }
 }
 
+.content-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-grow: 1;
+    height: 100%;
+}
+
 .content {
     display: flex;
     flex-direction: row;

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
@@ -12,19 +12,18 @@ function onActionClick() {
 }
 </script>
 
-<!--Use div here instead of button to avoid the modal is dismissed when click-->
-<div role="button" tabindex="0" on:click="{onActionClick}" on:keydown="{(e) => e.key === 'Enter' && onActionClick()}">
+<button on:click="{onActionClick}" on:keydown="{(e) => e.key === 'Enter' && onActionClick()}">
     {#if tooltip}
         <TooltipTarget text="{tooltip}" direction="{Direction.TOP}" offsetVertical="{4}">
             <slot />
         </TooltipTarget>
     {:else}
         <slot />
     {/if}
-</div>
+</button>
 
 <style lang="scss">
-div {
+button {
     display: flex;
     background: none;
     border: none;

diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectList.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectList.svelte
@@ -2,7 +2,7 @@
 import ProjectRow from './ProjectRow.svelte';
 import { ProjectAction, type ProjectItem } from '../model';
 import { onDestroy, onMount } from 'svelte';
-import { LifecycleOwner } from '../../../../libs/flow';
+import { LifecycleOwner } from '$libs/flow';
 import { projectDataViewModel } from '../viewmodel';
 
 export let dismiss: () => void;

diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectRow.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectRow.svelte
@@ -14,7 +14,6 @@ function openProject() {
 }
 
 function onActionClick(action: ProjectAction) {
-    console.log('clicked', action);
     onAction(project, action);
 }
 </script>

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

diff --git a/monosketch-svelte/src/lib/ui/nav/project/WorkingProjectView.svelte b/monosketch-svelte/src/lib/ui/nav/project/WorkingProjectView.svelte
@@ -6,7 +6,7 @@ import { TargetBounds } from '$ui/modal/model';
 export let projectId: string;
 export let projectName: string;
 
-function showDropDownMenu(e: MouseEvent) {
+function showDropDownMenu(e: Event) {
     modalViewModel.currentProjectDropDownMenuTargetFlow.value = {
         id: projectId,
         targetBounds: TargetBounds.fromElement(e.currentTarget as HTMLElement),
@@ -15,7 +15,9 @@ function showDropDownMenu(e: MouseEvent) {
 </script>
 
 <div class="container">
-    <div class="info-container" on:click="{showDropDownMenu}">
+    <div role="button" tabindex="0" class="info-container"
+         on:click="{showDropDownMenu}"
+         on:keydown="{(e) => e.key === 'Enter' && showDropDownMenu(e)}">
         <span class="info">
             {projectName}
         </span>