filamentphp
diff --git a/‎packages/forms/dist/components/file-upload.js‎
Lines changed: 6 additions & 6 deletions b/‎packages/forms/dist/components/file-upload.js‎
Lines changed: 6 additions & 6 deletions
diff --git a/‎packages/forms/dist/components/tags-input.js‎
Lines changed: 1 addition & 1 deletion b/‎packages/forms/dist/components/tags-input.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages/forms/resources/js/components/file-upload.js‎
Lines changed: 16 additions & 0 deletions b/‎packages/forms/resources/js/components/file-upload.js‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎packages/forms/resources/js/components/tags-input.js‎
Lines changed: 37 additions & 1 deletion b/‎packages/forms/resources/js/components/tags-input.js‎
Lines changed: 37 additions & 1 deletion
diff --git a/‎packages/forms/resources/lang/en/components.php‎
Lines changed: 50 additions & 0 deletions b/‎packages/forms/resources/lang/en/components.php‎
Lines changed: 50 additions & 0 deletions
diff --git a/‎packages/forms/src/Components/CheckboxList.php‎
Lines changed: 3 additions & 0 deletions b/‎packages/forms/src/Components/CheckboxList.php‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎packages/forms/src/Components/ColorPicker.php‎
Lines changed: 7 additions & 0 deletions b/‎packages/forms/src/Components/ColorPicker.php‎
Lines changed: 7 additions & 0 deletions
diff --git a/‎packages/forms/src/Components/FileUpload.php‎
Lines changed: 5 additions & 0 deletions b/‎packages/forms/src/Components/FileUpload.php‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎packages/forms/src/Components/KeyValue.php‎
Lines changed: 8 additions & 2 deletions b/‎packages/forms/src/Components/KeyValue.php‎
Lines changed: 8 additions & 2 deletions
diff --git a/‎packages/forms/src/Components/Repeater.php‎
Lines changed: 7 additions & 3 deletions b/‎packages/forms/src/Components/Repeater.php‎
Lines changed: 7 additions & 3 deletions
@@ -35,6 +35,7 @@ export default function fileUploadFormComponent({
     confirmSvgEditingMessage,
     deleteUploadedFileUsing,
     disabledSvgEditingMessage,
+    downloadActionLabel,
     getUploadedFilesUsing,
     hasCircleCropper,
     hasImageEditor,
@@ -63,6 +64,7 @@ export default function fileUploadFormComponent({
     maxSize,
     mimeTypeMap,
     minSize,
+    openActionLabel,
     panelAspectRatio,
     panelLayout,
     placeholder,
@@ -605,6 +607,13 @@ export default function fileUploadFormComponent({
             anchor.href = downloadableUrl
             anchor.download = file.file.name
 
+            // A published pre-change view override passes no label, so skip the attributes
+            // instead of rendering a literal "undefined".
+            if (downloadActionLabel) {
+                anchor.setAttribute('aria-label', downloadActionLabel)
+                anchor.setAttribute('title', downloadActionLabel)
+            }
+
             return anchor
         },
 
@@ -620,6 +629,13 @@ export default function fileUploadFormComponent({
             anchor.href = openableUrl
             anchor.target = '_blank'
 
+            // A published pre-change view override passes no label, so skip the attributes
+            // instead of rendering a literal "undefined".
+            if (openActionLabel) {
+                anchor.setAttribute('aria-label', openActionLabel)
+                anchor.setAttribute('title', openActionLabel)
+            }
+
             return anchor
         },
 
 
@@ -1,9 +1,40 @@
-export default function tagsInputFormComponent({ state, splitKeys }) {
+export default function tagsInputFormComponent({
+    state,
+    splitKeys,
+    tagAddedMessage,
+    tagRemovedMessage,
+}) {
     return {
         newTag: '',
 
         state,
 
+        liveRegionClearTimeout: null,
+
+        announce(message) {
+            // A published pre-change view override has no `liveRegion` ref, so bail out
+            // instead of throwing and breaking tag entry for those users.
+            const liveRegion = this.$refs.liveRegion
+
+            if (!liveRegion) {
+                return
+            }
+
+            if (this.liveRegionClearTimeout !== null) {
+                clearTimeout(this.liveRegionClearTimeout)
+            }
+
+            liveRegion.textContent = message
+
+            // Clear the announcement once it has been read, so stale messages do not
+            // remain reachable by the screen reader virtual cursor.
+            this.liveRegionClearTimeout = setTimeout(() => {
+                liveRegion.textContent = ''
+
+                this.liveRegionClearTimeout = null
+            }, 3000)
+        },
+
         createTag() {
             this.newTag = this.newTag.trim()
 
@@ -19,11 +50,16 @@ export default function tagsInputFormComponent({ state, splitKeys }) {
 
             this.state.push(this.newTag)
 
+            // A function replacement inserts the tag literally, so `$` sequences in it are not treated as substitution patterns by `String.replace()`. The message is optional so a published pre-change view override does not throw.
+            this.announce(tagAddedMessage?.replace(':tag', () => this.newTag))
+
             this.newTag = ''
         },
 
         deleteTag(tagToDelete) {
             this.state = this.state.filter((tag) => tag !== tagToDelete)
+
+            this.announce(tagRemovedMessage?.replace(':tag', () => tagToDelete))
         },
 
         reorderTags(event) {
 
@@ -122,8 +122,26 @@
 
     ],
 
+    'color_picker' => [
+
+        'panel_label' => 'Color picker',
+
+    ],
+
     'file_upload' => [
 
+        'actions' => [
+
+            'download' => [
+                'label' => 'Download',
+            ],
+
+            'open' => [
+                'label' => 'Open in new tab',
+            ],
+
+        ],
+
         'editor' => [
 
             'label' => 'Image editor',
@@ -270,6 +288,18 @@
 
         ],
 
+        'columns' => [
+
+            'actions' => [
+                'label' => 'Actions',
+            ],
+
+            'reorder' => [
+                'label' => 'Reorder',
+            ],
+
+        ],
+
         'fields' => [
 
             'key' => [
@@ -341,6 +371,18 @@
 
     'repeater' => [
 
+        'columns' => [
+
+            'actions' => [
+                'label' => 'Actions',
+            ],
+
+            'reorder' => [
+                'label' => 'Reorder',
+            ],
+
+        ],
+
         'actions' => [
 
             'add' => [
@@ -606,6 +648,10 @@
             'searching_message' => 'Searching...',
         ],
 
+        'toolbar' => [
+            'aria_label' => 'Editor toolbar',
+        ],
+
         'tools' => [
             'align_center' => 'Align center',
             'align_end' => 'Align end',
@@ -745,6 +791,10 @@
 
         'placeholder' => 'New tag',
 
+        'tag_added' => 'Added: :tag',
+
+        'tag_removed' => 'Removed: :tag',
+
     ],
 
     'text_input' => [
 
@@ -528,6 +528,7 @@ public function toEmbeddedHtml(): string
 
                         <div class="fi-input-wrp-content-ctn">
                             <input
+                                aria-label="<?= e($this->getSearchPrompt()) ?>"
                                 placeholder="<?= e($this->getSearchPrompt()) ?>"
                                 type="search"
                                 x-model.debounce.<?= $this->getSearchDebounce() ?>="search"
@@ -627,6 +628,8 @@ class="fi-fo-checkbox-list-option-ctn"
                 <div
                     x-cloak
                     x-show="search && ! visibleCheckboxListOptions.length"
+                    role="status"
+                    aria-live="polite"
                     class="fi-fo-checkbox-list-no-search-results-message"
                 >
                     <?= e($this->getNoSearchResultsMessage()) ?>
 
@@ -109,6 +109,9 @@ public function toEmbeddedHtml(): string
 
         $inputAttributes = $this->getExtraInputAttributeBag()
             ->merge([
+                // `aria-expanded` / `aria-haspopup` are not supported on a plain textbox, so only
+                // `aria-controls` (a global ARIA attribute) associates the input with its panel.
+                'aria-controls' => "{$id}-panel",
                 'autocomplete' => 'off',
                 'disabled' => $isDisabled,
                 'id' => $id,
@@ -158,6 +161,7 @@ public function toEmbeddedHtml(): string
             />
 
             <div
+                aria-hidden="true"
                 class="fi-fo-color-picker-preview my-auto me-3 size-5 shrink-0 rounded-full select-none"
                 x-on:click="togglePanelVisibility()"
                 x-bind:class="{
@@ -172,6 +176,9 @@ class="fi-fo-color-picker-preview my-auto me-3 size-5 shrink-0 rounded-full sele
                 x-cloak
                 x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
                 x-ref="panel"
+                id="<?= e($id) ?>-panel"
+                role="dialog"
+                aria-label="<?= e(__('filament-forms::components.color_picker.panel_label')) ?>"
                 class="fi-fo-color-picker-panel"
             >
                 <<?= $tag ?> x-ref="picker" color="<?= e($this->getState()) ?>" />
 
@@ -960,6 +960,8 @@ public function toEmbeddedHtml(): string
                         state: $wire.<?= $this->applyStateBindingModifiers("\$entangle('{$statePath}')") ?>,
                         uploadButtonPosition: <?= Js::from($this->getUploadButtonPosition()) ?>,
                         uploadingMessage: <?= Js::from($this->getUploadingMessage()) ?>,
+                        downloadActionLabel: <?= Js::from(__('filament-forms::components.file_upload.actions.download.label')) ?>,
+                        openActionLabel: <?= Js::from(__('filament-forms::components.file_upload.actions.open.label')) ?>,
                         uploadProgressIndicatorPosition: <?= Js::from($this->getUploadProgressIndicatorPosition()) ?>,
                         uploadUsing: (fileKey, file, success, error, progress) => {
                             $wire.upload(
@@ -990,6 +992,7 @@ public function toEmbeddedHtml(): string
                 x-show="error"
                 x-text="error"
                 x-cloak
+                role="alert"
                 class="fi-fo-file-upload-error-message"
             ></div>
 
@@ -1016,7 +1019,9 @@ class="fi-fo-file-upload-editor-overlay"
 
                     <div class="fi-fo-file-upload-editor-window">
                         <div class="fi-fo-file-upload-editor-image-ctn">
+                            <?php // Decorative: Cropper.js drives this image and the editor dialog is labelled elsewhere. ?>
                             <img
+                                alt=""
                                 x-ref="editor"
                                 class="fi-fo-file-upload-editor-image"
                             />
 
@@ -413,7 +413,9 @@ public function toEmbeddedHtml(): string
                                     scope="col"
                                     x-show="rows.length"
                                     class="fi-has-action"
-                                ></th>
+                                >
+                                    <span class="fi-sr-only"><?= e(__('filament-forms::components.key_value.columns.reorder.label')) ?></span>
+                                </th>
                             <?php } ?>
 
                             <th scope="col">
@@ -429,7 +431,9 @@ class="fi-has-action"
                                     scope="col"
                                     x-show="rows.length"
                                     class="fi-has-action"
-                                ></th>
+                                >
+                                    <span class="fi-sr-only"><?= e(__('filament-forms::components.key_value.columns.actions.label')) ?></span>
+                                </th>
                             <?php } ?>
                         </tr>
                     </thead>
@@ -463,6 +467,7 @@ class="fi-fo-key-value-table-row-sortable-handle"
 
                                 <td>
                                     <input
+                                        aria-label="<?= e($this->getKeyLabel()) ?>"
                                         <?= ((! $canEditKeys) || $isDisabled) ? 'disabled' : '' ?>
                                         placeholder="<?= e($keyPlaceholder) ?>"
                                         type="text"
@@ -474,6 +479,7 @@ class="fi-input"
 
                                 <td>
                                     <input
+                                        aria-label="<?= e($this->getValueLabel()) ?>"
                                         <?= ((! $canEditValues) || $isDisabled) ? 'disabled' : '' ?>
                                         placeholder="<?= e($valuePlaceholder) ?>"
                                         type="text"
 
@@ -1951,7 +1951,9 @@ protected function toTableEmbeddedHtml(): string
                     <thead>
                         <tr>
                             <?php if ($hasReorderColumn) { ?>
-                                <th class="fi-fo-table-repeater-empty-header-cell"></th>
+                                <th scope="col" class="fi-fo-table-repeater-empty-header-cell">
+                                    <span class="fi-sr-only"><?= e(__('filament-forms::components.repeater.columns.reorder.label')) ?></span>
+                                </th>
                             <?php } ?>
 
                             <?php foreach ($tableColumns as $column) { ?>
@@ -1968,7 +1970,7 @@ protected function toTableEmbeddedHtml(): string
                                     $thAttributes = $thAttributes->style(['width: ' . e($columnWidth)]);
                                 }
                                 ?>
-                                <th <?= $thAttributes->toHtml() ?>>
+                                <th scope="col" <?= $thAttributes->toHtml() ?>>
                                     <?php if (! $column->isHeaderLabelHidden()) { ?>
                                         <?= e($column->getLabel()) ?><?php if ($column->isMarkedAsRequired()) { ?><sup class="fi-fo-table-repeater-header-required-mark">*</sup><?php } ?>
                                     <?php } else { ?>
@@ -1980,7 +1982,9 @@ protected function toTableEmbeddedHtml(): string
                             <?php } ?>
 
                             <?php if ($hasActionsColumn) { ?>
-                                <th class="fi-fo-table-repeater-empty-header-cell"></th>
+                                <th scope="col" class="fi-fo-table-repeater-empty-header-cell">
+                                    <span class="fi-sr-only"><?= e(__('filament-forms::components.repeater.columns.actions.label')) ?></span>
+                                </th>
                             <?php } ?>
                         </tr>
                     </thead>