Revert "[TASK] Make clearable button more accessible"

This reverts commit 75b558b.

The proposed and merged solution decreases the overall usability in the
TYPO3 backend as users are now forced to press the <TAB> key twice to
actually switch the focus to another field.

One could also argue that the change that is reverted is not suitable
for the target group that mostly uses keyboard navigation as said users
were already able to clear fields previously.

Once we have a solution that satisfies both target groups, another
patch will be pushed.

Change-Id: I2cfea2aee81d2c67cba91eb5eb6d5675d6d999c6
Resolves: #102504
Reverts: #102372
Releases: main, 12.4
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81905
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Reviewed-by: Jochen Roth <rothjochen@gmail.com>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Jochen Roth <rothjochen@gmail.com>

Build/Sources/Sass/typo3/_main_form.scss

@@ -206,10 +206,10 @@ select {
     }
 
     .close {
-        border: 2px solid transparent;
+        border: none;
         background-color: transparent;
         position: absolute;
-        height: 20px;
+        height: 16px;
         z-index: 3;
         top: 50%;
         inset-inline-end: .5em;
@@ -220,12 +220,6 @@ select {
             opacity: .5;
         }
 
-        &:focus {
-            opacity: .5;
-            outline: 0;
-            border-color: var(--typo3-component-link-hover-color);
-        }
-
         .icon {
             vertical-align: 0;
         }

Build/Sources/TypeScript/backend/input/clearable.ts

@@ -33,7 +33,7 @@ class Clearable {
     //
     // https://github.com/typo3/typo3.icons
     const closeIcon =
-      `<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close" aria-hidden="true">
+      `<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">
         <span class="icon-markup">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                 <path
@@ -78,7 +78,6 @@ class Clearable {
       const clearButton = Clearable.createCloseButton();
       const toggleClearButtonVisibility = (): void => {
         clearButton.style.visibility = this.value.length === 0 ? 'hidden' : 'visible';
-        clearButton.tabIndex = this.value.length === 0 ? -1 : 0;
       };
 
       clearButton.addEventListener('click', (e: Event): void => {

Build/Sources/TypeScript/install/renderable/clearable.ts

@@ -33,7 +33,7 @@ class Clearable {
     //
     // https://github.com/typo3/typo3.icons
     const closeIcon =
-      `<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close" aria-hidden="true">
+      `<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">
         <span class="icon-markup">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                 <path
@@ -78,7 +78,6 @@ class Clearable {
       const clearButton = Clearable.createCloseButton();
       const toggleClearButtonVisibility = (): void => {
         clearButton.style.visibility = this.value.length === 0 ? 'hidden' : 'visible';
-        clearButton.tabIndex = this.value.length === 0 ? -1 : 0;
       };
 
       clearButton.addEventListener('click', (e: Event): void => {

typo3/sysext/backend/Resources/Public/Css/backend.css

@@ -4257,9 +4257,8 @@ select.icon-select option{padding-inline-start:22px}
 .form-control-clearable-wrapper{position:relative;border:0;padding:0}
 .form-control-clearable-wrapper input[type=search]::-webkit-search-cancel-button{display:none}
 .form-control-clearable-wrapper .form-control{padding-inline-end:2.3em}
-.form-control-clearable-wrapper .close{border:2px solid transparent;background-color:transparent;position:absolute;height:20px;z-index:3;top:50%;inset-inline-end:.5em;transform:translate(0,-50%);opacity:.2}
+.form-control-clearable-wrapper .close{border:none;background-color:transparent;position:absolute;height:16px;z-index:3;top:50%;inset-inline-end:.5em;transform:translate(0,-50%);opacity:.2}
 .form-control-clearable-wrapper .close:hover{opacity:.5}
-.form-control-clearable-wrapper .close:focus{opacity:.5;outline:0;border-color:var(--typo3-component-link-hover-color)}
 .form-control-clearable-wrapper .close .icon{vertical-align:0}
 .form-control-clearable-wrapper:focus{box-shadow:none;border-color:inherit}
 .form-notice-capslock{position:absolute;inset-inline-end:25px;top:50%;margin-top:-10px;height:20px;width:20px;padding:3px;z-index:10;background-color:#fff}