Generate unique labels for all form control inputs

.changeset/silver-peas-fix.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Generate unique labels for all form control inputs in previews

previews/primer/alpha/form_control_preview/playground.html.erb

@@ -8,10 +8,12 @@
 
 <br>
 
+<% field_id = "bar-#{SecureRandom.hex}" %>
+
 <%= form_with(url: "/foo") do |f| %>
-  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: "bar" })) do |component| %>
+  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: field_id })) do |component| %>
     <% component.with_input do |input_arguments| %>
-      <%= f.text_field(:bar, **input_arguments) %>
+      <%= f.text_field(:bar, id: field_id, **input_arguments) %>
     <% end %>
   <% end %>
 <% end %>

test/components/alpha/form_control_test.rb

@@ -21,8 +21,10 @@ def test_basic_structure
       def test_label_describes_input
         render_preview(:playground)
 
-        assert_selector(".FormControl-label[for=bar]")
-        assert_selector("input[type=text][name=bar]")
+        label = page.find_css(".FormControl-label")[0]
+        input_id = label.attributes.fetch("for").value
+
+        assert_selector(%(input[type=text]##{input_id}[name=bar]))
       end
 
       def test_described_by_ids