Document error id and add test

- error message component already accepted an id attribute but this wasn't documented or tested

app/views/govuk_publishing_components/components/docs/error_message.yml

@@ -7,13 +7,14 @@ accessibility_criteria: |
 
   Error message must:
 
-  - be associated with an input. The `error_message_id` must match the `aria-describedby` property on the input your label is associated with.
+  - be associated with an input. The `error_message_id` must match the `aria-describedby` property on the input your label is associated with. Note that if `id` is not passed to the component an id will be generated automatically.
 
   If error message is within a label it will be announced in its entirety by screen readers. By associating error messages with inputs using `aria-describedby`, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight.
 examples:
   default:
     data:
       text: "Please enter your National Insurance Number"
+      id: "error_id"
   with_items:
     description: Error items are a common pattern where a collection of error is passed with each item having a text attribute of the error
     data:

spec/components/error_message_spec.rb

@@ -11,6 +11,12 @@ def component_name
     assert_select(".govuk-error-message", text: "Error: Please enter your National Insurance number")
   end
 
+  it "renders error message with a given ID" do
+    render_component(text: "Please enter your National Insurance number", id: "error_id")
+
+    assert_select(".govuk-error-message[id=error_id]")
+  end
+
   it "escapes HTML in items and allows HTML safe strings" do
     render_component(items: [
       { text: "Error where HTML is <strong>escaped</strong>" },