Skip to content

Commit 15348f2

Browse files
lcreidlcreid
committed
Generate id for aria label
1 parent 61bb4c5 commit 15348f2

4 files changed

Lines changed: 77 additions & 74 deletions

File tree

‎README.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -784,8 +784,8 @@ This generates:
784784
This generates:
785785

786786
```html
787-
<div aria-labelledby="user_misc_label" class="mb-3" role="group">
788-
<div class="form-label" id="user_misc_label">Skill level</div>
787+
<div aria-labelledby="user_skill_level" class="mb-3" role="group">
788+
<div class="form-label" id="user_skill_level">Skill level</div>
789789
<div class="form-check">
790790
<input class="form-check-input" id="user_skill_level_1" name="user[skill_level]" type="radio" value="1">
791791
<label class="form-check-label" for="user_skill_level_1">Mind reading</label>
@@ -796,8 +796,8 @@ This generates:
796796
</div>
797797
</div>
798798
<input id="user_skills" name="user[skills][]" type="hidden" value="">
799-
<div aria-labelledby="user_misc_label" class="mb-3" role="group">
800-
<div class="form-label" id="user_misc_label">Skills</div>
799+
<div aria-labelledby="user_skills" class="mb-3" role="group">
800+
<div class="form-label" id="user_skills">Skills</div>
801801
<div class="form-check">
802802
<input class="form-check-input" id="user_skills_1" name="user[skills][]" type="checkbox" value="1">
803803
<label class="form-check-label" for="user_skills_1">Mind reading</label>
@@ -832,8 +832,8 @@ To add `data-` attributes to a collection of radio buttons, map your models to a
832832
This generates:
833833

834834
```html
835-
<div aria-labelledby="user_misc_label" class="mb-3" role="group">
836-
<div class="form-label" id="user_misc_label">Misc</div>
835+
<div aria-labelledby="user_misc" class="mb-3" role="group">
836+
<div class="form-label" id="user_misc">Misc</div>
837837
<div class="form-check">
838838
<input class="form-check-input" id="user_misc_1" name="user[misc]" type="radio" value="1">
839839
<label class="form-check-label" for="user_misc_1">Foo</label>
@@ -1496,8 +1496,8 @@ Generated HTML:
14961496
<input class="form-control is-invalid" id="user_email" name="user[email]" required="required" type="email" value="steve.example.com">
14971497
<div class="invalid-feedback">is invalid</div>
14981498
</div>
1499-
<div aria-labelledby="user_misc_label" class="mb-3" role="group">
1500-
<div class="form-label" id="user_misc_label">Misc</div>
1499+
<div aria-labelledby="user_misc" class="mb-3" role="group">
1500+
<div class="form-label" id="user_misc">Misc</div>
15011501
<div class="form-check">
15021502
<input checked class="form-check-input is-invalid" id="user_misc_1" name="user[misc]" type="radio" value="1">
15031503
<label class="form-check-label" for="user_misc_1">Mind reading</label>
@@ -1509,8 +1509,8 @@ Generated HTML:
15091509
</div>
15101510
</div>
15111511
<input id="user_preferences" name="user[preferences][]" type="hidden" value="">
1512-
<div aria-labelledby="user_misc_label" class="mb-3" role="group">
1513-
<div class="form-label" id="user_misc_label">Preferences</div>
1512+
<div aria-labelledby="user_preferences" class="mb-3" role="group">
1513+
<div class="form-label" id="user_preferences">Preferences</div>
15141514
<div class="form-check">
15151515
<input checked class="form-check-input is-invalid" id="user_preferences_1" name="user[preferences][]" type="checkbox" value="1">
15161516
<label class="form-check-label" for="user_preferences_1">Good</label>

‎lib/bootstrap_form/inputs/inputs_collection.rb‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ def field_group(name, options, &)
105105
:add_control_col_class, :append, :control_col, :floating, :help, :icon, :id,
106106
:input_group_class, :label, :label_col, :layout, :prepend
107107
),
108-
aria: { labelledby: :user_misc_label },
108+
aria: { labelledby: options[:id] || default_id(name) },
109109
role: :group
110110
) do
111111
legend = generate_legend(name, options)
@@ -116,12 +116,15 @@ def field_group(name, options, &)
116116

117117
def generate_legend(name, options)
118118
legend_class = group_label_class(field_layout(options)) || "form-label"
119+
id = options[:id] || default_id(name)
119120

120121
tag.div(
121122
**{ class: legend_class }.compact,
122-
id: "user_misc_label" # FIXME: This can't be hard-coded, obviously.
123+
id:
123124
) { label_text(name, options.dig(:label, :text)) }
124125
end
126+
127+
def default_id(name) = raw("#{object_name}_#{name}") # rubocop:disable Rails/OutputSafety
125128
end
126129
end
127130
end

‎test/bootstrap_collection_checkboxes_test.rb‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
1818
collection = [Address.new(id: 1, street: "Foobar")]
1919
expected = <<~HTML
2020
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
21-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
22-
<div id="user_misc_label" class="form-label">This is a checkbox collection</div>
21+
<div role="group" aria-labelledby="user_misc" class="mb-3">
22+
<div id="user_misc" class="form-label">This is a checkbox collection</div>
2323
<div class="form-check">
2424
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
2525
<label class="form-check-label" for="user_misc_1">Foobar</label>
@@ -37,8 +37,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
3737
collection = [Address.new(id: 1, street: "Foobar")]
3838
expected = <<~HTML
3939
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
40-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
41-
<div id="user_misc_label" class="form-label">This is a checkbox collection</div>
40+
<div role="group" aria-labelledby="user_misc" class="mb-3">
41+
<div id="user_misc" class="form-label">This is a checkbox collection</div>
4242
<div class="form-check">
4343
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
4444
<label class="form-check-label" for="user_misc_1">Foobar</label>
@@ -56,8 +56,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
5656
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
5757
expected = <<~HTML
5858
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
59-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
60-
<div id="user_misc_label" class="form-label">Misc</div>
59+
<div role="group" aria-labelledby="user_misc" class="mb-3">
60+
<div id="user_misc" class="form-label">Misc</div>
6161
<div class="form-check">
6262
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
6363
<label class="form-check-label" for="user_misc_1">
@@ -81,8 +81,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
8181
collection = [struct.new(1, "Foo"), struct.new("二", "Bar")]
8282
expected = <<~HTML
8383
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
84-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
85-
<div id="user_misc_label" class="form-label">Misc</div>
84+
<div role="group" aria-labelledby="user_misc" class="mb-3">
85+
<div id="user_misc" class="form-label">Misc</div>
8686
<div class="form-check">
8787
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
8888
<label class="form-check-label" for="user_misc_1">Foo</label>
@@ -101,8 +101,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
101101
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
102102
expected = <<~HTML
103103
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
104-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
105-
<div id="user_misc_label" class="form-check form-check-inline ps-0">Misc</div>
104+
<div role="group" aria-labelledby="user_misc" class="mb-3">
105+
<div id="user_misc" class="form-check form-check-inline ps-0">Misc</div>
106106
<div class="form-check form-check-inline">
107107
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
108108
<label class="form-check-label" for="user_misc_1">
@@ -125,8 +125,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
125125
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
126126
expected = <<~HTML
127127
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
128-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
129-
<div id="user_misc_label" class="form-label">Misc</div>
128+
<div role="group" aria-labelledby="user_misc" class="mb-3">
129+
<div id="user_misc" class="form-label">Misc</div>
130130
<div class="form-check">
131131
<input checked="checked" class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
132132
<label class="form-check-label" for="user_misc_1">
@@ -152,8 +152,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
152152
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
153153
expected = <<~HTML
154154
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
155-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
156-
<div id="user_misc_label" class="form-label">Misc</div>
155+
<div role="group" aria-labelledby="user_misc" class="mb-3">
156+
<div id="user_misc" class="form-label">Misc</div>
157157
<div class="form-check">
158158
<input checked="checked" class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
159159
<label class="form-check-label" for="user_misc_1"> Foo</label>
@@ -175,8 +175,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
175175
collection = [Address.new(id: 1, street: "Foo St")]
176176
expected = <<~HTML
177177
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
178-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
179-
<div id="user_misc_label" class="form-label">Misc</div>
178+
<div role="group" aria-labelledby="user_misc" class="mb-3">
179+
<div id="user_misc" class="form-label">Misc</div>
180180
<div class="form-check">
181181
<input class="form-check-input" id="user_misc_foo_st" name="user[misc][]" type="checkbox" value="Foo St" />
182182
<label class="form-check-label" for="user_misc_foo_st">
@@ -192,8 +192,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
192192
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
193193
expected = <<~HTML
194194
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
195-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
196-
<div id="user_misc_label" class="form-label">Misc</div>
195+
<div role="group" aria-labelledby="user_misc" class="mb-3">
196+
<div id="user_misc" class="form-label">Misc</div>
197197
<div class="form-check">
198198
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
199199
<label class="form-check-label" for="user_misc_1">
@@ -216,8 +216,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
216216
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
217217
expected = <<~HTML
218218
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
219-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
220-
<div id="user_misc_label" class="form-label">Misc</div>
219+
<div role="group" aria-labelledby="user_misc" class="mb-3">
220+
<div id="user_misc" class="form-label">Misc</div>
221221
<div class="form-check">
222222
<input class="form-check-input" id="user_misc_address_1" name="user[misc][]" type="checkbox" value="address_1" />
223223
<label class="form-check-label" for="user_misc_address_1">
@@ -240,8 +240,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
240240
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
241241
expected = <<~HTML
242242
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
243-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
244-
<div id="user_misc_label" class="form-label">Misc</div>
243+
<div role="group" aria-labelledby="user_misc" class="mb-3">
244+
<div id="user_misc" class="form-label">Misc</div>
245245
<div class="form-check">
246246
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
247247
<label class="form-check-label" for="user_misc_1">
@@ -264,8 +264,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
264264
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
265265
expected = <<~HTML
266266
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
267-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
268-
<div id="user_misc_label" class="form-label">Misc</div>
267+
<div role="group" aria-labelledby="user_misc" class="mb-3">
268+
<div id="user_misc" class="form-label">Misc</div>
269269
<div class="form-check">
270270
<input class="form-check-input" id="user_misc_address_1" name="user[misc][]" type="checkbox" value="address_1" />
271271
<label class="form-check-label" for="user_misc_address_1">
@@ -289,8 +289,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
289289
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
290290
expected = <<~HTML
291291
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
292-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
293-
<div id="user_misc_label" class="form-label">Misc</div>
292+
<div role="group" aria-labelledby="user_misc" class="mb-3">
293+
<div id="user_misc" class="form-label">Misc</div>
294294
<div class="form-check">
295295
<input checked="checked" class="form-check-input" id="user_misc_address_1" name="user[misc][]" type="checkbox" value="address_1" />
296296
<label class="form-check-label" for="user_misc_address_1">
@@ -316,8 +316,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
316316
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
317317
expected = <<~HTML
318318
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
319-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
320-
<div id="user_misc_label" class="form-label">Misc</div>
319+
<div role="group" aria-labelledby="user_misc" class="mb-3">
320+
<div id="user_misc" class="form-label">Misc</div>
321321
<div class="form-check">
322322
<input checked="checked" class="form-check-input" id="user_misc_address_1" name="user[misc][]" type="checkbox" value="address_1" />
323323
<label class="form-check-label" for="user_misc_address_1">
@@ -342,8 +342,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
342342
test "collection_check_boxes renders with include_hidden options correctly" do
343343
collection = [Address.new(id: 1, street: "Foo"), Address.new(id: 2, street: "Bar")]
344344
expected = <<~HTML
345-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
346-
<div id="user_misc_label" class="form-label">Misc</div>
345+
<div role="group" aria-labelledby="user_misc" class="mb-3">
346+
<div id="user_misc" class="form-label">Misc</div>
347347
<div class="form-check">
348348
<input class="form-check-input" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
349349
<label class="form-check-label" for="user_misc_1">Foo</label>
@@ -365,8 +365,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
365365
expected = <<~HTML
366366
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
367367
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
368-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
369-
<div id="user_misc_label" class="form-label">Misc</div>
368+
<div role="group" aria-labelledby="user_misc" class="mb-3">
369+
<div id="user_misc" class="form-label">Misc</div>
370370
<div class="form-check">
371371
<input class="form-check-input is-invalid" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
372372
<label class="form-check-label" for="user_misc_1">Foo</label>
@@ -393,8 +393,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
393393
["2", "Bar", { "data-city": "west" }]
394394
]
395395
expected = <<~HTML
396-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
397-
<div id="user_misc_label" class="form-label">Misc</div>
396+
<div role="group" aria-labelledby="user_misc" class="mb-3">
397+
<div id="user_misc" class="form-label">Misc</div>
398398
<div class="form-check">
399399
<input class="form-check-input" data-city="east" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
400400
<label class="form-check-label" for="user_misc_1">Foo</label>
@@ -415,8 +415,8 @@ class BootstrapCollectionCheckboxesTest < ActionView::TestCase
415415
expected = <<~HTML
416416
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
417417
<input #{autocomplete_attr_55336} id="user_misc" name="user[misc][]" type="hidden" value="" />
418-
<div role="group" aria-labelledby="user_misc_label" class="mb-3">
419-
<div id="user_misc_label" class="form-label">Misc</div>
418+
<div role="group" aria-labelledby="user_misc" class="mb-3">
419+
<div id="user_misc" class="form-label">Misc</div>
420420
<div class="form-check">
421421
<input checked="checked" class="form-check-input is-invalid" id="user_misc_1" name="user[misc][]" type="checkbox" value="1" />
422422
<label class="form-check-label" for="user_misc_1"> Foo</label>

0 commit comments

Comments
 (0)