diff --git a/app/components/modal_component.rb b/app/components/modal_component.rb
index 1de8852a8c..f4b279278b 100644
--- a/app/components/modal_component.rb
+++ b/app/components/modal_component.rb
@@ -1,11 +1,15 @@
 # frozen_string_literal: true
 
 class ModalComponent < ViewComponent::Base
-  def initialize(id:, close_button: true, instant: false, modal_class: :small)
+  def initialize(id:, close_button: true, instant: false, modal_class: :small, **options)
     @id = id
     @close_button = close_button
     @instant = instant
     @modal_class = modal_class
+    @options = options
+    @data_controller = "modal #{@options.delete(:'data-controller')}".squish
+    @data_action =
+      "keyup@document->modal#closeIfEscapeKey #{@options.delete(:'data-action')}".squish
   end
 
   private
diff --git a/app/components/modal_component/modal_component.html.haml b/app/components/modal_component/modal_component.html.haml
index 7be73deca4..76a484c528 100644
--- a/app/components/modal_component/modal_component.html.haml
+++ b/app/components/modal_component/modal_component.html.haml
@@ -1,4 +1,4 @@
-%div{ id: @id, "data-controller": "modal", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-modal-instant-value": @instant }
+%div{ id: @id, "data-controller": @data_controller, "data-action": @data_action, "data-modal-instant-value": @instant, **@options }
   .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
   .reveal-modal.fade.modal-component{ "data-modal-target": "modal", class: @modal_class }
     = content
diff --git a/spec/components/modal_component_spec.rb b/spec/components/modal_component_spec.rb
new file mode 100644
index 0000000000..e50dbd3d1f
--- /dev/null
+++ b/spec/components/modal_component_spec.rb
@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe ModalComponent, type: :component do
+  it "renders default 'data-action' and 'data-controller'" do
+    render_inline(described_class.new(id: "test-id"))
+
+    expect(page).to have_selector "#test-id"
+    expect(page).to have_selector '[data-controller="modal"]'
+    expect(page).to have_selector '[data-action="keyup@document->modal#closeIfEscapeKey"]'
+  end
+
+  it "accepts html attributes options" do
+    render_inline(described_class.new(id: "test-id", 'data-test': "some data"))
+
+    expect(page).to have_selector "#test-id"
+    expect(page).to have_selector '[data-test="some data"]'
+  end
+
+  it "merges 'data-controller' attribute when present in options" do
+    render_inline(described_class.new(id: "test-id", 'data-controller': "other-controller"))
+
+    expect(page).to have_selector "#test-id"
+    expect(page).to have_selector '[data-controller="modal other-controller"]'
+  end
+
+  it "merges 'data-action' attribute when present in options" do
+    render_inline(described_class.new(id: "test-id", 'data-action': "click->other-controller#test"))
+
+    expect(page).to have_selector "#test-id"
+    expect(page).to have_selector(
+      '[data-action="keyup@document->modal#closeIfEscapeKey click->other-controller#test"]'
+    )
+  end
+end