-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adjust input field behavior to keep placeholder text visible #6406
Conversation
Netlify Draft Deployment |
@@ -130,6 +137,8 @@ export class KolInputText implements API { | |||
value={this.state._value as string} | |||
{...this.controller.onFacade} | |||
onChange={this.onChange} | |||
onFocus={console.log} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
console.log entfernen
@@ -40,6 +40,9 @@ export class KolInputText implements API { | |||
private ref?: HTMLInputElement; | |||
private oldValue?: string; | |||
|
|||
@State() | |||
private showPlaceholder = true; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
showPlaceholder
wird nie false
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Könnt Ihr mal schauen, ob das "einfacher" ohne State und Methode umgesetzt werden kann?
Einfach:
maxlength={this.state._maxLength}
name={this.state._name}
pattern={this.state._pattern}
placeholder={this.ref?.value === '' || this.ref?.value === undefined ? this.state._placeholder : undefined}
readOnly={this.state._readOnly}
required={this.state._required}
size={this.state._size}
(event.target as HTMLInputElement).value === '' ? (this.showPlaceholder = true) : (this.showPlaceholder = false); | ||
}; | ||
|
||
private readonly SetShowPlaceholder = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Kleine Korrektur: Methoden-Namen beginnen immer mit einem kleinen Buchstaben.
/**
* Beim Screenreader NVDA wird der Placeholder mit
* vorgelesen. Somit kann es vorkommen, dass das
* Label und der Placeholder vorgelesen werden.
*
* Aufgrund dessen, dass das Label immer vorgelesen
* werden muss, kann das zusätzliche Vorlesen des
* Placeholders störend sein.
*
* Damit beim Fokussieren das "doppelte" vorlesen
* vermieden werden kann, wird der Placeholder für
* den fokussierten Feldstatus entfernt.
*
* Hinweis: Für alle Nutzenden müssen alle darge-
* stellten Inhalte, also auch der Place-
* holder, gleichermaßen zugänglich sein.
* Das oben beschriebene Handling erfüllt
* diese Anforderung nicht.
*/ |
Auf Barrierefreiheit getestet. Es wurde kein Fehler hinsichtlich Barrierefreiheit gefunden |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FYI @anicyne
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FYI @anicyne - siehe changed files ,.. Interessanter historischer Kommentar
☑️ Definition of Done checklist