diff --git a/app/views/govuk_publishing_components/components/_error_alert.html.erb b/app/views/govuk_publishing_components/components/_error_alert.html.erb
index aff5e44c81..d4c2d61cf3 100644
--- a/app/views/govuk_publishing_components/components/_error_alert.html.erb
+++ b/app/views/govuk_publishing_components/components/_error_alert.html.erb
@@ -4,9 +4,15 @@
   id ||= nil
   description ||= nil
   data_attributes ||= {}
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.set_id(id)
+  component_helper.add_class("gem-c-error-alert govuk-!-display-none-print")
+  component_helper.add_data_attribute({ module: "initial-focus" })
+  component_helper.add_role("alert")
 %>
 
-<%= tag.div id: id, class: "gem-c-error-alert govuk-!-display-none-print", data: { module: "initial-focus" }.merge(data_attributes), role: "alert", tabindex: "-1" do %>
+<%= tag.div(**component_helper.all_attributes, tabindex: "-1") do %>
   <% if description.present? %>
     <%= tag.h2 message, class: "gem-c-error-summary__title" %>
     <%= tag.div description, class: "gem-c-error-summary__body" %>
diff --git a/app/views/govuk_publishing_components/components/docs/error_alert.yml b/app/views/govuk_publishing_components/components/docs/error_alert.yml
index db3a52d3c5..c51c900ade 100644
--- a/app/views/govuk_publishing_components/components/docs/error_alert.yml
+++ b/app/views/govuk_publishing_components/components/docs/error_alert.yml
@@ -1,5 +1,6 @@
 name: Error alert
 description: Used at the top of the page, to summarise a unsuccessful user action.
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   - should be focused on page load, to ensure the message is noticed by
     assistive tech