From f53e1339ba38ff162f94e4755ba95b0475b1d2ef Mon Sep 17 00:00:00 2001
From: abrahammordev <abrahammordev@gmail.com>
Date: Tue, 24 Mar 2026 12:47:19 +0100
Subject: [PATCH 1/2] Fix (Accessibility) : Implement button element to close
 selected file

---
 .../Component/Input/Field/Renderer.php        |  4 +-
 .../Component/Input/Field/FileInputTest.php   | 84 ++++++++++---------
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/Field/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Input/Field/Renderer.php
index eb592d872722..73a13df1e3d0 100755
--- a/components/ILIAS/UI/src/Implementation/Component/Input/Field/Renderer.php
+++ b/components/ILIAS/UI/src/Implementation/Component/Input/Field/Renderer.php
@@ -919,7 +919,9 @@ protected function renderFilePreview(
     ): Template {
         $template->setCurrentBlock('block_file_preview');
         $template->setVariable('REMOVAL_GLYPH', $default_renderer->render(
-            $this->getUIFactory()->symbol()->glyph()->close()->withAction("#")
+            $this->getUIFactory()->button()->shy('', '#')
+                ->withSymbol($this->getUIFactory()->symbol()->glyph()->close())
+                ->withAriaLabel('close')
         ));
 
         if (null !== $file_info) {
diff --git a/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php b/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php
index ca31d8d3e960..1935450e3bd4 100755
--- a/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php
+++ b/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php
@@ -157,10 +157,11 @@ public function testRender(): void
                         <div class="ui-input-file-input">
                             <div class="ui-input-file-info"><span data-action="expand"></span><span
                                     data-action="collapse"></span><span data-dz-name></span><span data-dz-size></span><span
-                                    data-action="remove"><a tabindex="0" class="glyph" href="#" aria-label="close"><span
-                                            class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></span><span
+                                    data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_1"><span
+                                            class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
+                                        </button></span><span
                                     class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
-                            <div class="ui-input-file-metadata" style="display: none;"><input id="id_1" type="hidden"
+                            <div class="ui-input-file-metadata" style="display: none;"><input id="id_2" type="hidden"
                                     name="name_0[input_0][]" value="" /></div>
                             <div class="ui-input-file-input-progress-container">
                                 <div class="ui-input-file-input-progress-indicator"></div>
@@ -169,7 +170,7 @@ class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                     </template>
                 </div>
                 <div class="ui-input-file-input-dropzone">
-                    <button class="btn btn-link" data-action="#" id="id_2">select_file_from_computer</button>
+                    <button class="btn btn-link" data-action="#" id="id_3">select_file_from_computer</button>
                     <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
@@ -177,7 +178,7 @@ class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
             ',
             $byline,
             null,
-            'id_3'
+            'id_4'
         );
         $this->assertEquals($expected, $this->render($file_input));
     }
@@ -224,14 +225,14 @@ public function testRenderValue(): void
                             <span data-dz-name>test file name 1</span>
                             <span data-dz-size>1 KB</span>
                             <span data-action="remove">
-                                <a tabindex="0" class="glyph" href="#" aria-label="close">
-                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-                                </a>
+                                <button class="btn btn-link" aria-label="close" data-action="#" id="id_1">
+                                    <span class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
+                                </button>
                             </span>
                             <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                         </div>
                         <div class="ui-input-file-metadata" style="display: none;">
-                            <input id="id_1" type="hidden" name="name_0[input_0][]" value="test_file_id_1"/>
+                            <input id="id_2" type="hidden" name="name_0[input_0][]" value="test_file_id_1"/>
                         </div>
                         <div class="ui-input-file-input-progress-container">
                             <div class="ui-input-file-input-progress-indicator"></div>
@@ -241,10 +242,11 @@ public function testRenderValue(): void
                         <div class="ui-input-file-input">
                             <div class="ui-input-file-info"><span data-action="expand"></span><span
                                     data-action="collapse"></span><span data-dz-name></span><span data-dz-size></span><span
-                                    data-action="remove"><a tabindex="0" class="glyph" href="#" aria-label="close"><span
-                                            class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></span><span
+                                    data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_3"><span
+                                            class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
+                                        </button></span><span
                                     class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
-                            <div class="ui-input-file-metadata" style="display: none;"><input id="id_2" type="hidden"
+                            <div class="ui-input-file-metadata" style="display: none;"><input id="id_4" type="hidden"
                                     name="name_0[input_0][]" value="" /></div>
                             <div class="ui-input-file-input-progress-container">
                                 <div class="ui-input-file-input-progress-indicator"></div>
@@ -253,7 +255,7 @@ class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                     </template>
                 </div>
                 <div class="ui-input-file-input-dropzone">
-                    <button class="btn btn-link" data-action="#" id="id_3">select_file_from_computer</button>
+                    <button class="btn btn-link" data-action="#" id="id_5">select_file_from_computer</button>
                     <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
@@ -261,7 +263,7 @@ class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
             ',
             null,
             null,
-            'id_4'
+            'id_6'
         );
         $this->assertEquals($expected, $this->render($file_input));
     }
@@ -305,20 +307,20 @@ public function testRenderWithMetadata(): void
                             <span data-dz-name></span>
                             <span data-dz-size></span>
                             <span data-action="remove">
-                                <a tabindex="0" class="glyph" href="#" aria-label="close">
-                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-                                </a>
+                                <button class="btn btn-link" aria-label="close" data-action="#" id="id_1">
+                                    <span class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
+                                </button>
                             </span>
                             <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                         </div>
                         <div class="ui-input-file-metadata" style="display: none;">
                             <fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="name_0[input_1][]">
-                                <label for="id_1">text_input</label>
+                                <label for="id_2">text_input</label>
                                 <div class="c-input__field">
-                                    <input id="id_1" type="text" name="name_0[input_1][]" class="c-field-text"/>
+                                    <input id="id_2" type="text" name="name_0[input_1][]" class="c-field-text"/>
                                 </div>
                             </fieldset>
-                            <input id="id_2" type="hidden" name="name_0[input_2][]" value="file_id"/>
+                            <input id="id_3" type="hidden" name="name_0[input_2][]" value="file_id"/>
                         </div>
                         <div class="ui-input-file-input-progress-container">
                             <div class="ui-input-file-input-progress-indicator"></div>
@@ -333,16 +335,15 @@ class="glyphicon glyphicon-triangle-right"
                                         tabindex="0" class="glyph" href="#" aria-label="collapse_content"><span
                                             class="glyphicon glyphicon-triangle-bottom"
                                             aria-hidden="true"></span></a></span><span data-dz-name></span><span
-                                    data-dz-size></span><span data-action="remove"><a tabindex="0" class="glyph" href="#"
-                                        aria-label="close"><span class="glyphicon glyphicon-remove"
-                                            aria-hidden="true"></span></a></span><span class="ui-input-file-input-error-msg"
+                                    data-dz-size></span><span data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_4"><span class="glyph" role="img"><span class="glyphicon glyphicon-remove"
+                                            aria-hidden="true"></span></span></button></span><span class="ui-input-file-input-error-msg"
                                     data-dz-error-msg></span></div>
                             <div class="ui-input-file-metadata" style="display: none;">
                                 <fieldset class="c-input" data-il-ui-component="text-field-input"
-                                    data-il-ui-input-name="name_0[input_1][]"><label for="id_3">text_input</label>
-                                    <div class="c-input__field"><input id="id_3" type="text" name="name_0[input_1][]"
+                                    data-il-ui-input-name="name_0[input_1][]"><label for="id_5">text_input</label>
+                                    <div class="c-input__field"><input id="id_5" type="text" name="name_0[input_1][]"
                                             class="c-field-text" /></div>
-                                </fieldset><input id="id_4" type="hidden" name="name_0[input_2][]" value="" />
+                                </fieldset><input id="id_6" type="hidden" name="name_0[input_2][]" value="" />
                             </div>
                             <div class="ui-input-file-input-progress-container">
                                 <div class="ui-input-file-input-progress-indicator"></div>
@@ -351,7 +352,7 @@ class="c-field-text" /></div>
                     </template>
                 </div>
                 <div class="ui-input-file-input-dropzone">
-                    <button class="btn btn-link" data-action="#" id="id_5">select_file_from_computer</button>
+                    <button class="btn btn-link" data-action="#" id="id_7">select_file_from_computer</button>
                     <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
@@ -359,7 +360,7 @@ class="c-field-text" /></div>
             ',
             null,
             null,
-            'id_6',
+            'id_8',
         );
         $this->assertEquals($expected, $this->render($file_input));
     }
@@ -412,20 +413,20 @@ public function testRenderWithMetadataValue(): void
                             <span data-dz-name>test file name 1</span>
                             <span data-dz-size>1 MB</span>
                             <span data-action="remove">
-                                <a tabindex="0" class="glyph" href="#" aria-label="close">
-                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-                                </a>
+                                <button class="btn btn-link" aria-label="close" data-action="#" id="id_1">
+                                    <span class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
+                                </button>
                             </span>
                             <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                         </div>
                         <div class="ui-input-file-metadata" style="display: none;">
                             <fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="name_0[input_1][]">
-                                <label for="id_1">text_input</label>
+                                <label for="id_2">text_input</label>
                                 <div class="c-input__field">
-                                    <input id="id_1" type="text" value="test" name="name_0[input_1][]" class="c-field-text"/>
+                                    <input id="id_2" type="text" value="test" name="name_0[input_1][]" class="c-field-text"/>
                                 </div>
                             </fieldset>
-                            <input id="id_2" type="hidden" name="name_0[input_2][]" value="test_file_id_1"/>
+                            <input id="id_3" type="hidden" name="name_0[input_2][]" value="test_file_id_1"/>
                         </div>
                         <div class="ui-input-file-input-progress-container">
                             <div class="ui-input-file-input-progress-indicator"></div>
@@ -447,15 +448,16 @@ public function testRenderWithMetadataValue(): void
                             <span data-dz-name></span>
                             <span data-dz-size></span>
                             <span
-                                    data-action="remove"><a tabindex="0" class="glyph" href="#" aria-label="close"><span
-                                            class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></span><span
+                                    data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_4"><span
+                                            class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
+                                        </button></span><span
                                     class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                             <div class="ui-input-file-metadata" style="display: none;">
                                 <fieldset class="c-input" data-il-ui-component="text-field-input"
-                                data-il-ui-input-name="name_0[input_1][]"><label for="id_3">text_input</label>
-                                <div class="c-input__field"><input id="id_3" type="text" name="name_0[input_1][]"
+                                data-il-ui-input-name="name_0[input_1][]"><label for="id_5">text_input</label>
+                                <div class="c-input__field"><input id="id_5" type="text" name="name_0[input_1][]"
                                         class="c-field-text" /></div>
-                                </fieldset><input id="id_4" type="hidden" name="name_0[input_2][]" value="" />
+                                </fieldset><input id="id_6" type="hidden" name="name_0[input_2][]" value="" />
                             </div>
                             <div class="ui-input-file-input-progress-container">
                                 <div class="ui-input-file-input-progress-indicator"></div>
@@ -464,7 +466,7 @@ class="c-field-text" /></div>
                     </template>
                 </div>
                 <div class="ui-input-file-input-dropzone">
-                    <button class="btn btn-link" data-action="#" id="id_5">select_file_from_computer</button>
+                    <button class="btn btn-link" data-action="#" id="id_7">select_file_from_computer</button>
                     <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
@@ -472,7 +474,7 @@ class="c-field-text" /></div>
             ',
             null,
             null,
-            'id_6'
+            'id_8'
         );
         $this->assertEquals($expected, $this->render($file_input));
     }

From d9e04d18302ba605262cecff8960ba3e5abf3205 Mon Sep 17 00:00:00 2001
From: abrahammordev <abrahammordev@gmail.com>
Date: Tue, 24 Mar 2026 14:55:35 +0100
Subject: [PATCH 2/2] fix: Update close button HTML generation in FileInputTest

---
 .../Component/Input/Field/FileInputTest.php   | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php b/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php
index 1935450e3bd4..396596201df7 100755
--- a/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php
+++ b/components/ILIAS/UI/tests/Component/Input/Field/FileInputTest.php
@@ -71,6 +71,19 @@ protected function brutallyTrimHTML(string $html): string
         return parent::brutallyTrimHTML($html);
     }
 
+    private function getCloseButtonHtml(string $id): string
+    {
+        $html = $this->brutallyTrimHTML(
+            $this->getDefaultRenderer()->render(
+                $this->getUIFactory()->button()->shy('', '#')
+                    ->withSymbol($this->getUIFactory()->symbol()->glyph()->close())
+                    ->withAriaLabel('close')
+            )
+        );
+
+        return str_replace('id="id_1"', 'id="' . $id . '"', $html);
+    }
+
     private function getUploadHandler(?FileInfoResult $file = null): Field\UploadHandler
     {
         return new class ($file) implements Field\UploadHandler {
@@ -146,20 +159,19 @@ public function testRender(): void
         $label = "label";
         $byline = "byline";
         $file_input = $f->file($this->getUploadHandler(), $label, $byline)->withNameFrom($this->name_source);
+        $close_button = $this->getCloseButtonHtml('id_1');
 
         $expected = $this->getFormWrappedHtml(
             'file-field-input',
             $label,
-            '
+            <<<HTML
             <div class="ui-input-file">
                 <div class="ui-input-file-input-list">
                     <template>
                         <div class="ui-input-file-input">
                             <div class="ui-input-file-info"><span data-action="expand"></span><span
-                                    data-action="collapse"></span><span data-dz-name></span><span data-dz-size></span><span
-                                    data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_1"><span
-                                            class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
-                                        </button></span><span
+                                       data-action="collapse"></span><span data-dz-name></span><span data-dz-size></span><span
+                                    data-action="remove">{$close_button}</span><span
                                     class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                             <div class="ui-input-file-metadata" style="display: none;"><input id="id_2" type="hidden"
                                     name="name_0[input_0][]" value="" /></div>
@@ -175,7 +187,7 @@ class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
             </div>
-            ',
+            HTML,
             $byline,
             null,
             'id_4'
@@ -211,11 +223,13 @@ public function testRenderValue(): void
         )->withValue([
             $test_file_id,
         ])->withNameFrom($this->name_source);
+        $close_button = $this->getCloseButtonHtml('id_1');
+        $close_button_template = $this->getCloseButtonHtml('id_3');
 
         $expected = $this->getFormWrappedHtml(
             'file-field-input',
             '',
-            '
+            <<<HTML
             <div class="ui-input-file">
                 <div class="ui-input-file-input-list">
                     <div class="ui-input-file-input">
@@ -225,9 +239,7 @@ public function testRenderValue(): void
                             <span data-dz-name>test file name 1</span>
                             <span data-dz-size>1 KB</span>
                             <span data-action="remove">
-                                <button class="btn btn-link" aria-label="close" data-action="#" id="id_1">
-                                    <span class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
-                                </button>
+                                {$close_button}
                             </span>
                             <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                         </div>
@@ -242,9 +254,7 @@ public function testRenderValue(): void
                         <div class="ui-input-file-input">
                             <div class="ui-input-file-info"><span data-action="expand"></span><span
                                     data-action="collapse"></span><span data-dz-name></span><span data-dz-size></span><span
-                                    data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_3"><span
-                                            class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
-                                        </button></span><span
+                                    data-action="remove">{$close_button_template}</span><span
                                     class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                             <div class="ui-input-file-metadata" style="display: none;"><input id="id_4" type="hidden"
                                     name="name_0[input_0][]" value="" /></div>
@@ -260,7 +270,7 @@ class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
             </div>
-            ',
+            HTML,
             null,
             null,
             'id_6'
@@ -285,11 +295,13 @@ public function testRenderWithMetadata(): void
                 ""
             ]
         ])->withNameFrom($this->name_source);
+        $close_button = $this->getCloseButtonHtml('id_1');
+        $close_button_template = $this->getCloseButtonHtml('id_4');
 
         $expected = $this->getFormWrappedHtml(
             'file-field-input',
             $label,
-            '
+            <<<HTML
             <div class="ui-input-file">
                 <div class="ui-input-file-input-list">
                     <div class="ui-input-file-input">
@@ -307,9 +319,7 @@ public function testRenderWithMetadata(): void
                             <span data-dz-name></span>
                             <span data-dz-size></span>
                             <span data-action="remove">
-                                <button class="btn btn-link" aria-label="close" data-action="#" id="id_1">
-                                    <span class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
-                                </button>
+                                {$close_button}
                             </span>
                             <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                         </div>
@@ -335,8 +345,7 @@ class="glyphicon glyphicon-triangle-right"
                                         tabindex="0" class="glyph" href="#" aria-label="collapse_content"><span
                                             class="glyphicon glyphicon-triangle-bottom"
                                             aria-hidden="true"></span></a></span><span data-dz-name></span><span
-                                    data-dz-size></span><span data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_4"><span class="glyph" role="img"><span class="glyphicon glyphicon-remove"
-                                            aria-hidden="true"></span></span></button></span><span class="ui-input-file-input-error-msg"
+                                    data-dz-size></span><span data-action="remove">{$close_button_template}</span><span class="ui-input-file-input-error-msg"
                                     data-dz-error-msg></span></div>
                             <div class="ui-input-file-metadata" style="display: none;">
                                 <fieldset class="c-input" data-il-ui-component="text-field-input"
@@ -357,7 +366,7 @@ class="c-field-text" /></div>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
             </div>
-            ',
+            HTML,
             null,
             null,
             'id_8',
@@ -390,12 +399,14 @@ public function testRenderWithMetadataValue(): void
                 "test",
             ]
         ])->withNameFrom($this->name_source);
+        $close_button = $this->getCloseButtonHtml('id_1');
+        $close_button_template = $this->getCloseButtonHtml('id_4');
 
 
         $expected = $this->getFormWrappedHtml(
             'file-field-input',
             $label,
-            '
+            <<<HTML
             <div class="ui-input-file">
                 <div class="ui-input-file-input-list">
                     <div class="ui-input-file-input">
@@ -413,9 +424,7 @@ public function testRenderWithMetadataValue(): void
                             <span data-dz-name>test file name 1</span>
                             <span data-dz-size>1 MB</span>
                             <span data-action="remove">
-                                <button class="btn btn-link" aria-label="close" data-action="#" id="id_1">
-                                    <span class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
-                                </button>
+                                {$close_button}
                             </span>
                             <span class="ui-input-file-input-error-msg" data-dz-error-msg></span>
                         </div>
@@ -447,10 +456,7 @@ public function testRenderWithMetadataValue(): void
                             </span>
                             <span data-dz-name></span>
                             <span data-dz-size></span>
-                            <span
-                                    data-action="remove"><button class="btn btn-link" aria-label="close" data-action="#" id="id_4"><span
-                                            class="glyph" role="img"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
-                                        </button></span><span
+                            <span data-action="remove">{$close_button_template}</span><span
                                     class="ui-input-file-input-error-msg" data-dz-error-msg></span></div>
                             <div class="ui-input-file-metadata" style="display: none;">
                                 <fieldset class="c-input" data-il-ui-component="text-field-input"
@@ -471,7 +477,7 @@ class="c-field-text" /></div>
                 </div>
                 <div class="help-block"> file_notice 0 B | ui_file_upload_max_nr 1</div>
             </div>
-            ',
+            HTML,
             null,
             null,
             'id_8'