Merge pull request #14845 from itk-dev/feature/accessibility-aria-label-close-button-and-aria-hidden-svg

Feat: accessibility aria label close button and aria hidden svg

src/lib/components/chat/SettingsModal.svelte

@@ -16,6 +16,7 @@
 	import User from '../icons/User.svelte';
 	import Personalization from './Settings/Personalization.svelte';
 	import Search from '../icons/Search.svelte';
+	import XMark from '../icons/XMark.svelte';
 	import Connections from './Settings/Connections.svelte';
 	import Tools from './Settings/Tools.svelte';
 
@@ -541,21 +542,13 @@
 		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
 			<div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div>
 			<button
+				aria-label={$i18n.t('Close settings modal')}
 				class="self-center"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-					/>
-				</svg>
+				<XMark className="w-5 h-5"></XMark>
 			</button>
 		</div>
 

src/lib/components/icons/XMark.svelte

@@ -7,6 +7,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
+	aria-hidden="true"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
 	class={className}