Merge pull request #15009 from itk-dev/feature/password-button-accessibility-again

Feat: password button accessibility again

src/lib/components/chat/Settings/Connections/Connection.svelte

@@ -73,7 +73,7 @@
 			</div>
 
 			<SensitiveInput
-				inputClassName=" outline-hidden bg-transparent w-full"
+				inputClassName="bg-transparent w-full"
 				placeholder={$i18n.t('API Key')}
 				bind:value={key}
 			/>

src/lib/components/common/SensitiveInput.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	const i18n = getContext('i18n');
+	import { getContext } from 'svelte';
+	import { settings } from '$lib/stores';
 	export let value: string = '';
 	export let placeholder = '';
 	export let required = true;
@@ -12,9 +15,11 @@
 </script>
 
 <div class={outerClassName}>
+	<label class="sr-only" for="password-input">{placeholder || $i18n.t('Password')}</label>
 	<input
-		class={`${inputClassName} ${show ? '' : 'password'}`}
+		class={`${inputClassName} ${show ? '' : 'password'} ${($settings?.highContrastMode ?? false) ? '' : ' outline-hidden'}`}
 		{placeholder}
+		id="password-input"
 		bind:value
 		required={required && !readOnly}
 		disabled={readOnly}
@@ -24,6 +29,8 @@
 	<button
 		class={showButtonClassName}
 		type="button"
+		aria-pressed={show}
+		aria-label={$i18n.t('Make password visible in the user interface')}
 		on:click={(e) => {
 			e.preventDefault();
 			show = !show;
@@ -34,6 +41,7 @@
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 16 16"
 				fill="currentColor"
+				aria-hidden="true"
 				class="size-4"
 			>
 				<path
@@ -51,6 +59,7 @@
 				viewBox="0 0 16 16"
 				fill="currentColor"
 				class="size-4"
+				aria-hidden="true"
 			>
 				<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
 				<path