mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(textinput/passwordinput): apply aria-describedby to hint text

Browse source 
* Aria-describedby

Resolves base aria-describedby attribute from #1633.

* Update PasswordInput.svelte
This commit is contained in:
Carson McCue 2023-02-19 11:53:00 -08:00 • committed by GitHub
commit b435be4f12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/TextInput/PasswordInput.svelte
View file

@ -89,6 +89,7 @@
const ctx = getContext("Form"); const ctx = getContext("Form");
$: isFluid = !!ctx && ctx.isFluid; $: isFluid = !!ctx && ctx.isFluid;
$: helperId = `helper-${id}`;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;
</script> </script>
@ -122,6 +123,7 @@
</label> </label>
{#if !isFluid && helperText} {#if !isFluid && helperText}
<div <div
id="{helperId}"
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}" class:bx--form__helper-text--inline="{inline}"
@ -167,7 +169,13 @@
bind:this="{ref}" bind:this="{ref}"
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}" aria-invalid="{invalid || undefined}"
aria-describedby="{invalid ? errorId : warn ? warnId : undefined}" aria-describedby="{invalid
? errorId
: warn
? warnId
: helperText
? helperId
: undefined}"
id="{id}" id="{id}"
name="{name}" name="{name}"
placeholder="{placeholder}" placeholder="{placeholder}"

10
src/TextInput/TextInput.svelte
View file

@ -95,6 +95,7 @@
}; };
$: isFluid = !!ctx && ctx.isFluid; $: isFluid = !!ctx && ctx.isFluid;
$: helperId = `helper-${id}`;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;
</script> </script>
@ -182,7 +183,13 @@
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}" aria-invalid="{invalid || undefined}"
data-warn="{warn || undefined}" data-warn="{warn || undefined}"
aria-describedby="{invalid ? errorId : warn ? warnId : undefined}" aria-describedby="{invalid
? errorId
: warn
? warnId
: helperText
? helperId
: undefined}"
disabled="{disabled}" disabled="{disabled}"
id="{id}" id="{id}"
name="{name}" name="{name}"
@ -219,6 +226,7 @@
</div> </div>
{#if !invalid && !warn && !isFluid && !inline && helperText} {#if !invalid && !warn && !isFluid && !inline && helperText}
<div <div
id="{helperId}"
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}" class:bx--form__helper-text--inline="{inline}"