fix(a11y): enhance accessibility for chat settings components (#21715)
This commit adds aria-labels to the text inputs and textareas that previously lacked them, applies role=switch to inputs, and adds accessible titles to floating quick actions.
This commit is contained in:
@@ -129,12 +129,14 @@
|
||||
<input
|
||||
class=" self-center text-xs outline-none w-20"
|
||||
placeholder={$i18n.t('Button Label')}
|
||||
aria-label={$i18n.t('Button Label')}
|
||||
bind:value={button.label}
|
||||
/>
|
||||
|
||||
<input
|
||||
class=" self-center text-xs outline-none w-20 text-gray-600 dark:text-gray-400"
|
||||
placeholder={$i18n.t('Button ID')}
|
||||
aria-label={$i18n.t('Button ID')}
|
||||
bind:value={button.id}
|
||||
/>
|
||||
</div>
|
||||
@@ -143,12 +145,14 @@
|
||||
<Textarea
|
||||
className=" self-center text-xs w-full outline-none"
|
||||
placeholder={$i18n.t('Button Prompt')}
|
||||
ariaLabel={$i18n.t('Button Prompt')}
|
||||
minSize={30}
|
||||
bind:value={button.prompt}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="pl-3 text-xs flex rounded-sm transition"
|
||||
aria-label={$i18n.t('Remove action')}
|
||||
on:click={() => {
|
||||
floatingActionButtons = floatingActionButtons.filter(
|
||||
(b) => b.id !== button.id
|
||||
|
||||
@@ -62,9 +62,9 @@
|
||||
>{$i18n.t('Image Max Compression Size width')}</label
|
||||
>
|
||||
<input
|
||||
id="image-comp-width"
|
||||
bind:value={size.width}
|
||||
type="number"
|
||||
aria-labelledby="image-comp-width"
|
||||
class="w-full bg-transparent outline-hidden text-center"
|
||||
min="0"
|
||||
placeholder={$i18n.t('Width')}
|
||||
@@ -80,9 +80,9 @@
|
||||
>{$i18n.t('Image Max Compression Size height')}</label
|
||||
>
|
||||
<input
|
||||
id="image-comp-height"
|
||||
bind:value={size.height}
|
||||
type="number"
|
||||
aria-labelledby="image-comp-height"
|
||||
class="w-full bg-transparent outline-hidden text-center"
|
||||
min="0"
|
||||
placeholder={$i18n.t('Height')}
|
||||
|
||||
Reference in New Issue
Block a user