extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-21 21:02:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP accessibility: focus, aria-label and -description for date/time fields

Browse Source
This commit is contained in:
ralf 2024-04-26 09:21:22 +02:00
parent 6e84a75714
commit e1d4c61e9d
1 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
api/js/etemplate/Et2Date/Et2Date.ts
View File

@ -482,6 +482,26 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
// initializeComponent() so this._inputNode is not available before this
this.findInputField().addEventListener('change', this._updateValueOnChange);
this.findInputField().addEventListener("input", this._handleInputChange);
// pass aria(Label|Description) to real input node
const input = this.getInputNode();
if (input)
{
input.ariaLabel = this.ariaLabel || this.placeholder;
input.ariaDescription = this.ariaDescription || this.statustext ||
this.egw().lang('Format')+' '+this.getOptions().altFormat.split('').map(c => {
switch(c)
{
case 'Y': return this.egw().lang('Year');
case 'm': return this.egw().lang('Month');
case 'd': return this.egw().lang('Day');
case 'h':
case 'H': return this.egw().lang('Hour');
case 'i': return this.egw().lang('Minute');
default: return c;
}
}).join(' ');
}
}
}
@ -925,6 +945,24 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
return <HTMLInputElement>this._inputNode?.shadowRoot?.querySelector('input:not([type="hidden"])');
}
getInputNode()
{
if(typeof egwIsMobile == "function" && egwIsMobile())
{
return super.getInputNode();
}
return this.findInputField();
}
focus()
{
if(!(typeof egwIsMobile == "function" && egwIsMobile()))
{
this.open();
}
this.getInputNode()?.focus();
}
/**
* The interactive (form) element.
* This is an et2-textbox, which causes some problems with flatpickr