From e1d4c61e9debe29488d06a72ffa7d6336acab70c Mon Sep 17 00:00:00 2001 From: ralf Date: Fri, 26 Apr 2024 09:21:22 +0200 Subject: [PATCH] WIP accessibility: focus, aria-label and -description for date/time fields --- api/js/etemplate/Et2Date/Et2Date.ts | 38 +++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) 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