[BUGFIX] Don't make clearable button tabbable 94/61794/3
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Tue, 24 Sep 2019 12:39:40 +0000 (14:39 +0200)
committerFrank Nägler <frank.naegler@typo3.org>
Tue, 24 Sep 2019 13:36:10 +0000 (15:36 +0200)
The clearable button now has a `tabindex="-1"` attribute to disallow
focussing it via <TAB>.

Resolves: #89248
Related: #89215
Releases: master
Change-Id: I8bd637461d7c1e3b8ff51aa3a588a497787b0185
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/61794
Tested-by: Nicole Cordes <typo3@cordes.co>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Frank Nägler <frank.naegler@typo3.org>
Reviewed-by: Nicole Cordes <typo3@cordes.co>
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Input/Clearable.ts
Build/Sources/TypeScript/install/Resources/Public/TypeScript/Renderable/Clearable.ts
typo3/sysext/backend/Resources/Public/JavaScript/Input/Clearable.js
typo3/sysext/install/Resources/Public/JavaScript/Renderable/Clearable.js

index 9e92e54..3f170a6 100644 (file)
@@ -41,6 +41,7 @@ class Clearable {
 
     const closeButton = document.createElement('button');
     closeButton.type = 'button';
+    closeButton.tabIndex = -1;
     closeButton.innerHTML = closeIcon;
     closeButton.style.visibility = 'hidden';
     closeButton.classList.add('close');
index 0546b0e..c9d051f 100644 (file)
@@ -41,6 +41,7 @@ class Clearable {
 
     const closeButton = document.createElement('button');
     closeButton.type = 'button';
+    closeButton.tabIndex = -1;
     closeButton.innerHTML = closeIcon;
     closeButton.style.visibility = 'hidden';
     closeButton.classList.add('close');
index 573c40f..9fc4918 100644 (file)
@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports"],function(e,t){"use strict";class n{static createCloseButton(){const e=document.createElement("button");return e.type="button",e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n                <path\n                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n                    0l.7.7c.2.2.2.5 0 .7z"\n                    class="icon-color"/>\n            </svg>\n        </span>\n    </span>',e.style.visibility="hidden",e.classList.add("close"),e}constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.isClearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");const t=document.createElement("div");t.classList.add("form-control-clearable"),this.parentNode.insertBefore(t,this),t.appendChild(this);const s=n.createCloseButton(),i=()=>{s.style.visibility=0===this.value.length?"hidden":"visible"};s.addEventListener("click",t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),i()}),t.appendChild(s),this.addEventListener("focus",i),this.addEventListener("keyup",i),i(),this.isClearable=!0}}}return new n});
\ No newline at end of file
+define(["require","exports"],function(e,t){"use strict";class n{static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n                <path\n                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n                    0l.7.7c.2.2.2.5 0 .7z"\n                    class="icon-color"/>\n            </svg>\n        </span>\n    </span>',e.style.visibility="hidden",e.classList.add("close"),e}constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.isClearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");const t=document.createElement("div");t.classList.add("form-control-clearable"),this.parentNode.insertBefore(t,this),t.appendChild(this);const s=n.createCloseButton(),i=()=>{s.style.visibility=0===this.value.length?"hidden":"visible"};s.addEventListener("click",t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),i()}),t.appendChild(s),this.addEventListener("focus",i),this.addEventListener("keyup",i),i(),this.isClearable=!0}}}return new n});
\ No newline at end of file
index 408eaca..df93e65 100644 (file)
@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports"],function(e,t){"use strict";class n{static createCloseButton(){const e=document.createElement("button");return e.type="button",e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n                <path\n                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n                    0l.7.7c.2.2.2.5 0 .7z"\n                    class="icon-color"/>\n              </svg>\n            </span>\n          </span>',e.style.visibility="hidden",e.classList.add("close"),e}constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.dataset.clearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");const t=document.createElement("div");t.classList.add("form-control-clearable"),this.parentNode.insertBefore(t,this),t.appendChild(this);const s=n.createCloseButton(),i=()=>{s.style.visibility=0===this.value.length?"hidden":"visible"};s.addEventListener("click",t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),i()}),t.appendChild(s),this.addEventListener("focus",i),this.addEventListener("keyup",i),i(),this.dataset.clearable="true"}}}return new n});
\ No newline at end of file
+define(["require","exports"],function(e,t){"use strict";class n{static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n                <path\n                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n                    0l.7.7c.2.2.2.5 0 .7z"\n                    class="icon-color"/>\n              </svg>\n            </span>\n          </span>',e.style.visibility="hidden",e.classList.add("close"),e}constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.dataset.clearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");const t=document.createElement("div");t.classList.add("form-control-clearable"),this.parentNode.insertBefore(t,this),t.appendChild(this);const s=n.createCloseButton(),i=()=>{s.style.visibility=0===this.value.length?"hidden":"visible"};s.addEventListener("click",t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),i()}),t.appendChild(s),this.addEventListener("focus",i),this.addEventListener("keyup",i),i(),this.dataset.clearable="true"}}}return new n});
\ No newline at end of file