Skip to content

Commit

Permalink
feat(text-area): provide additional context for AT users when charact…
Browse files Browse the repository at this point in the history
…er limit exceeds (#7299)

**Related Issue:** #6630 

## Summary

This PR will provide additional context for Assistive Technology users
when character limit exceeds.

After this change, an example error message looks like below:

`The current character length is 14, which exceeds the maximum character
length of 10.`
  • Loading branch information
anveshmekala authored Jul 10, 2023
1 parent 569f387 commit c5678eb
Show file tree
Hide file tree
Showing 43 changed files with 79 additions and 94 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Invalid",
"tooLong": "Character limit exceeded",
"longText": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
"tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "غير صالح",
"tooLong": "تم تجاوز حد الأحرف",
"longText": "طول الأحرف الحالي هو {currentLength}، والذي يتجاوز الحد الأقصى لطول أحرف {maxLength}."
"tooLong": "طول الأحرف الحالي هو {currentLength}، والذي يتجاوز الحد الأقصى لطول أحرف {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Невалидно",
"tooLong": "Превишен лимит за символи",
"longText": "Текущата дължина на знака е{currentLength}, която надвишава максималната дължина на знака от{maxLength}."
"tooLong": "Текущата дължина на знака е{currentLength}, която надвишава максималната дължина на знака от{maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Nevažeće",
"tooLong": "Premašeno je ograničenje znakova",
"longText": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
"tooLong": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "No vàlid",
"tooLong": "S'ha excedit el límit de caràcters",
"longText": "La longitud de caràcters actual és de {currentLength}, que supera la longitud de caràcters màxima de {maxLength}."
"tooLong": "La longitud de caràcters actual és de {currentLength}, que supera la longitud de caràcters màxima de {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Neplatný",
"tooLong": "Překročen limit počtu znaků",
"longText": "Aktuální počet znaků je {currentLength}, což překračuje maximální počet znaků {maxLength}."
"tooLong": "Aktuální počet znaků je {currentLength}, což překračuje maximální počet znaků {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Ugyldig",
"tooLong": "Grænsen for antallet af tegn er overskredet",
"longText": "Den aktuelle tegnlængde er {currentLength}, hvilket overskrider den maksimale tegnlængde på {maxLength}."
"tooLong": "Den aktuelle tegnlængde er {currentLength}, hvilket overskrider den maksimale tegnlængde på {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Ungültig",
"tooLong": "Zeichenlimit wurde überschritten",
"longText": "Die aktuelle Zeichenanzahl beträgt {currentLength} und überschreitet damit die maximal zulässige Anzahl von {maxLength} Zeichen."
"tooLong": "Die aktuelle Zeichenanzahl beträgt {currentLength} und überschreitet damit die maximal zulässige Anzahl von {maxLength} Zeichen."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Μη έγκυρο",
"tooLong": "Υπέρβαση ορίου χαρακτήρων",
"longText": "Το τρέχον μήκος χαρακτήρων είναι {currentLength}, το οποίο υπερβαίνει το μέγιστο μήκος χαρακτήρων του {maxLength}."
"tooLong": "Το τρέχον μήκος χαρακτήρων είναι {currentLength}, το οποίο υπερβαίνει το μέγιστο μήκος χαρακτήρων του {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Invalid",
"tooLong": "Character limit exceeded",
"longText": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
"tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "No válido",
"tooLong": "Se superó el límite de caracteres",
"longText": "La longitud de caracteres actual es de {currentLength}, lo cual supera la longitud de caracteres máxima de {maxLength}."
"tooLong": "La longitud de caracteres actual es de {currentLength}, lo cual supera la longitud de caracteres máxima de {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Sobimatu",
"tooLong": "Tähemärkide piirang on ületatud",
"longText": "Praegune tähemärkide arv on {currentLength}, mis ületab tähemärkide maksimaalse arvu{maxLength}."
"tooLong": "Praegune tähemärkide arv on {currentLength}, mis ületab tähemärkide maksimaalse arvu{maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Virheellinen",
"tooLong": "Merkkien määrä ylitetty",
"longText": "Nykyinen merkkipituus on {currentLength}, joka ylittää {maxLength} merkkien enimmäispituuden."
"tooLong": "Nykyinen merkkipituus on {currentLength}, joka ylittää {maxLength} merkkien enimmäispituuden."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Non valide",
"tooLong": "Limite de caractères dépassée",
"longText": "La longueur actuelle de caractères est de {currentLength}, ce qui dépasse la longueur maximale de {maxLength} caractères."
"tooLong": "La longueur actuelle de caractères est de {currentLength}, ce qui dépasse la longueur maximale de {maxLength} caractères."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "לא תקין",
"tooLong": "חריגה ממגבלת מספר התווים",
"longText": "אורך התו הנוכחי הוא {currentLength}, אשר חורג מאורך התו המרבי של {maxLength}."
"tooLong": "אורך התו הנוכחי הוא {currentLength}, אשר חורג מאורך התו המרבי של {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Nevažeće",
"tooLong": "Premašeno je ograničenje znakova",
"longText": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
"tooLong": "Trenutni broj znakova je {currentLength}, što premašuje maksimalni broj znakova od {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Érvénytelen",
"tooLong": "Karakterkorlát túllépve",
"longText": "Az aktuális karakterhossz {currentLength}, ami meghaladja a maximális {maxLength} karakterhosszúságot."
"tooLong": "Az aktuális karakterhossz {currentLength}, ami meghaladja a maximális {maxLength} karakterhosszúságot."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Tidak valid",
"tooLong": "Batas karakter terlampaui",
"longText": "Panjang karakter saat ini adalah {currentLength}, yang mana melebihi panjang karakter maksimum {maxLength}."
"tooLong": "Panjang karakter saat ini adalah {currentLength}, yang mana melebihi panjang karakter maksimum {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Non valido",
"tooLong": "Limite di caratteri superato",
"longText": "La lunghezza in caratteri corrente è {currentLength}, superiore al limite massimo di {maxLength}."
"tooLong": "La lunghezza in caratteri corrente è {currentLength}, superiore al limite massimo di {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "無効",
"tooLong": "文字制限を超えています",
"longText": "現在の文字数は {currentLength} です。これは、文字数の最大値である {maxLength} 文字を超過しています。"
"tooLong": "現在の文字数は {currentLength} です。これは、文字数の最大値である {maxLength} 文字を超過しています。"
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "잘못됨",
"tooLong": "문자 제한을 초과함",
"longText": "현재 문자 길이({currentLength})가 최대 문자 길이({maxLength})를 초과합니다."
"tooLong": "현재 문자 길이({currentLength})가 최대 문자 길이({maxLength})를 초과합니다."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Neteisingas",
"tooLong": "Viršytas simbolių limitas",
"longText": "Dabartinis simbolių skaičius yra {currentLength}, o tai viršija maksimalų {maxLength} simbolių ilgį."
"tooLong": "Dabartinis simbolių skaičius yra {currentLength}, o tai viršija maksimalų {maxLength} simbolių ilgį."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Nederīgs",
"tooLong": "Pārsniegts rakstzīmju skaita ierobežojums",
"longText": "Pašreizējais rakstzīmju garums ir {currentLength}, kas pārsniedz maksimālo rakstzīmju garumu {maxLength}."
"tooLong": "Pašreizējais rakstzīmju garums ir {currentLength}, kas pārsniedz maksimālo rakstzīmju garumu {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Ongeldig",
"tooLong": "Tekenlimiet overschreden",
"longText": "Het huidige aantal tekens is {currentLength}, wat meer is dan het maximumaantal van {maxLength} tekens."
"tooLong": "Het huidige aantal tekens is {currentLength}, wat meer is dan het maximumaantal van {maxLength} tekens."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Ugyldig",
"tooLong": "Maksimumsgrensen for antall tegn er overskredet",
"longText": "Den nåværende tegnlengden er {currentLength}, som overskrider den maksimalt tillatte tegnlengden på {maxLength}."
"tooLong": "Den nåværende tegnlengden er {currentLength}, som overskrider den maksimalt tillatte tegnlengden på {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Niepoprawny",
"tooLong": "Przekroczono limit liczby znaków",
"longText": "Bieżąca liczba znaków wynosi {currentLength}, co przekracza maksymalną liczbę znaków {maxLength}."
"tooLong": "Bieżąca liczba znaków wynosi {currentLength}, co przekracza maksymalną liczbę znaków {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Inválido",
"tooLong": "Limite de caracteres excedido",
"longText": "O comprimento atual do caractere é {currentLength}, que exceda o comprimento máximo de caracteres de {maxLength}."
"tooLong": "O comprimento atual do caractere é {currentLength}, que exceda o comprimento máximo de caracteres de {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Inválido",
"tooLong": "Limite de carateres ultrapassado",
"longText": "O comprimento atual dos caracteres é {currentLength}, o que excede o comprimento máximo de caracteres de {maxLength}."
"tooLong": "O comprimento atual dos caracteres é {currentLength}, o que excede o comprimento máximo de caracteres de {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Nevalid",
"tooLong": "Limită de caractere depășită",
"longText": "Lungimea maximă a caracterelor curentă este {currentLength}, ceea ce depășește lungimea maximă a caracterelor de maximum {maxLength}."
"tooLong": "Lungimea maximă a caracterelor curentă este {currentLength}, ceea ce depășește lungimea maximă a caracterelor de maximum {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Недопустимый",
"tooLong": "Превышен лимит символов",
"longText": "Текущая длина символов - {currentLength}, что превышает максимальную длину символов {maxLength}."
"tooLong": "Текущая длина символов - {currentLength}, что превышает максимальную длину символов {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Neplatné",
"tooLong": "Bol prekročený limit počtu znakov",
"longText": "Aktuálna dĺžka znaku je {currentLength}, čo presahuje maximálnu dĺžku {maxLength}."
"tooLong": "Aktuálna dĺžka znaku je {currentLength}, čo presahuje maximálnu dĺžku {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Neveljavno",
"tooLong": "Presežena je omejitev znakov",
"longText": "Trenutna dolžina znakov znaša {currentLength}, kar presega maksimalno dolžino znakov {maxLength}."
"tooLong": "Trenutna dolžina znakov znaša {currentLength}, kar presega maksimalno dolžino znakov {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Nevažeće",
"tooLong": "Prekoračeno ograničenje znakova",
"longText": "Trenutno ograničenje za broj karaktera je {currentLength}, što prekoračuje maksimalni broj dužine karaktera od {maxLength}."
"tooLong": "Trenutno ograničenje za broj karaktera je {currentLength}, što prekoračuje maksimalni broj dužine karaktera od {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Ogiltig",
"tooLong": "Teckengränsen överskriden",
"longText": "Den aktuella teckenlängden är {currentLength}, vilket överskrider den maximala teckenlängden på {maxLength}."
"tooLong": "Den aktuella teckenlängden är {currentLength}, vilket överskrider den maximala teckenlängden på {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "ไม่ถูกต้อง",
"tooLong": "เกินขีดจำกัดอักขระ",
"longText": "ความยาวจำนวนอักขระในปัจจุบันคือ {currentLength} ซึ่งเกินความยาวจำนวนอักขระสูงสุดที่ {maxLength}"
"tooLong": "ความยาวจำนวนอักขระในปัจจุบันคือ {currentLength} ซึ่งเกินความยาวจำนวนอักขระสูงสุดที่ {maxLength}"
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Geçersiz",
"tooLong": "Karakter sınırı aşıldı",
"longText": "Mevcut karakter uzunluğu {currentLength} ve maksimum karakter uzunluğu {maxLength}'i aşıyor."
"tooLong": "Mevcut karakter uzunluğu {currentLength} ve maksimum karakter uzunluğu {maxLength}'i aşıyor."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Неприпустимий",
"tooLong": "Перевищено обмеження кількості символів",
"longText": "Поточна довжина символу становить {currentLength}, що перевищує максимальну довжину символів {maxLength}."
"tooLong": "Поточна довжина символу становить {currentLength}, що перевищує максимальну довжину символів {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "Không hợp lệ",
"tooLong": "Đã vượt quá giới hạn ký tự",
"longText": "Độ dài ký tự hiện tại là {currentLength}, vượt quá độ dài ký tự tối đa {maxLength}."
"tooLong": "Độ dài ký tự hiện tại là {currentLength}, vượt quá độ dài ký tự tối đa {maxLength}."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "无效",
"tooLong": "超出字符限制",
"longText": "当前字符长度为 {currentLength},超过了最大字符长度 {maxLength}。"
"tooLong": "当前字符长度为 {currentLength},超过了最大字符长度 {maxLength}。"
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "無效",
"tooLong": "已超過字元限制",
"longText": "目前字元長度為 {currentLength},超過了最大字元長度 {maxLength}。"
"tooLong": "目前字元長度為 {currentLength},超過了最大字元長度 {maxLength}。"
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"invalid": "無效",
"tooLong": "已超過字元限制",
"longText": "目前字元長度為 {currentLength},超過了最大字元長度 {maxLength}。"
"tooLong": "目前字元長度為 {currentLength},超過了最大字元長度 {maxLength}。"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface CharacterLengthObj {
currentLength: string;
maxLength: string;
}
46 changes: 34 additions & 12 deletions packages/calcite-components/src/components/text-area/text-area.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
InteractiveComponent,
updateHostInteraction
} from "../../utils/interactive";
import { CharacterLengthObj } from "./interfaces";

/**
* @slot - A slot for adding text.
Expand Down Expand Up @@ -363,6 +364,8 @@ export class TextArea

@State() effectiveLocale = "";

@State() localizedCharacterLengthObj: CharacterLengthObj;

@Watch("effectiveLocale")
effectiveLocaleChange(): void {
updateMessages(this, this.effectiveLocale);
Expand Down Expand Up @@ -402,26 +405,39 @@ export class TextArea
}
};

renderCharacterLimit = (): VNode => {
return this.maxLength ? (
<span class={CSS.characterLimit}>
<span class={{ [CSS.characterOverLimit]: this.value?.length > this.maxLength }}>
{this.getLocalizedCharacterLength()}
renderCharacterLimit = (): VNode | null => {
if (this.maxLength) {
this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
return (
<span class={CSS.characterLimit}>
<span class={{ [CSS.characterOverLimit]: this.value?.length > this.maxLength }}>
{this.localizedCharacterLengthObj.currentLength}
</span>
{"/"}
{this.localizedCharacterLengthObj.maxLength}
</span>
{"/"}
{numberStringFormatter.localize(this.maxLength.toString())}
</span>
) : null;
);
}
return null;
};

getLocalizedCharacterLength(): string {
getLocalizedCharacterLength(): CharacterLengthObj {
const currentLength = this.value ? this.value.length.toString() : "0";
const maxLength = this.maxLength.toString();
if (this.numberingSystem === "latn") {
return { currentLength, maxLength };
}

numberStringFormatter.numberFormatOptions = {
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem,
signDisplay: "never",
useGrouping: this.groupSeparator
};
return numberStringFormatter.localize(this.value ? this.value.length.toString() : "0");
return {
currentLength: numberStringFormatter.localize(currentLength),
maxLength: numberStringFormatter.localize(maxLength)
};
}

resizeObserver = createObserver("resize", async () => {
Expand All @@ -439,10 +455,16 @@ export class TextArea
syncHiddenFormInput(input: HTMLInputElement): void {
input.setCustomValidity("");
if (this.value?.length > this.maxLength) {
input.setCustomValidity(this.messages.tooLong);
input.setCustomValidity(this.replacePlaceHoldersInMessages());
}
}

private replacePlaceHoldersInMessages(): string {
return this.messages.tooLong
.replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
.replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
}

// height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.
// throttle is used to avoid flashing of textarea when user resizes.
private setHeightAndWidthToAuto = throttle(
Expand Down

0 comments on commit c5678eb

Please sign in to comment.