diff --git a/api/js/etemplate/Et2Date/Et2Date.ts b/api/js/etemplate/Et2Date/Et2Date.ts index 8b43284d94..436eac712a 100644 --- a/api/js/etemplate/Et2Date/Et2Date.ts +++ b/api/js/etemplate/Et2Date/Et2Date.ts @@ -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 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