Skip to content

Commit c0db703

Browse files
Copilotjonrohanprimer-css
authored
Allow localization of TextField clear button aria-label (#3879)
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com> Co-authored-by: primer-css <primer-css@users.noreply.github.com> Co-authored-by: Jon Rohan <rohan@github.com>
1 parent 024dc7e commit c0db703

7 files changed

Lines changed: 66 additions & 2 deletions

File tree

‎.changeset/fifty-cheetahs-explode.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/view-components": minor
3+
---
4+
5+
Allow localization of TextField clear button aria-label

‎app/lib/primer/forms/dsl/text_field_input.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class TextFieldInput < Input
66
attr_reader(
77
*%i[
88
name label show_clear_button leading_visual leading_spinner trailing_visual clear_button_id
9-
visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit
9+
clear_button_label visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit
1010
]
1111
)
1212

@@ -21,6 +21,7 @@ def initialize(name:, label:, **system_arguments)
2121
@trailing_visual = system_arguments.delete(:trailing_visual)
2222
@leading_spinner = !!system_arguments.delete(:leading_spinner)
2323
@clear_button_id = system_arguments.delete(:clear_button_id) || SecureRandom.uuid
24+
@clear_button_label = system_arguments.delete(:clear_button_label)
2425
@inset = system_arguments.delete(:inset)
2526
@monospace = system_arguments.delete(:monospace)
2627
@auto_check_src = system_arguments.delete(:auto_check_src)

‎app/lib/primer/forms/text_field.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<%= builder.text_field(@input.name, **@input.input_arguments) %>
1414
<% end %>
1515
<% if @input.show_clear_button? %>
16-
<button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
16+
<button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="<%= @input.clear_button_label || 'Clear' %>" data-action="click:primer-text-field#clearContents">
1717
<%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
1818
</button>
1919
<% end %>

‎previews/primer/alpha/text_field_preview.rb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class TextFieldPreview < ViewComponent::Preview
1515
# @param size [Symbol] select [small, medium, large]
1616
# @param show_clear_button toggle
1717
# @param clear_button_id text
18+
# @param clear_button_label text
1819
# @param full_width toggle
1920
# @param disabled toggle
2021
# @param invalid toggle
@@ -35,6 +36,7 @@ def playground(
3536
size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
3637
show_clear_button: false,
3738
clear_button_id: "my-text-field-clear-button",
39+
clear_button_label: nil,
3840
full_width: true,
3941
disabled: false,
4042
invalid: false,
@@ -56,6 +58,7 @@ def playground(
5658
size: size,
5759
show_clear_button: show_clear_button,
5860
clear_button_id: clear_button_id,
61+
clear_button_label: clear_button_label,
5962
full_width: full_width,
6063
disabled: disabled,
6164
invalid: invalid,
@@ -133,6 +136,12 @@ def show_clear_button
133136
render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field-3", label: "My text field"))
134137
end
135138

139+
# @label Show clear button with custom label
140+
# @snapshot
141+
def show_clear_button_with_custom_label
142+
render(Primer::Alpha::TextField.new(show_clear_button: true, clear_button_label: "Effacer", name: "my-text-field-3-custom", label: "Mon champ de texte"))
143+
end
144+
136145
# @label Full width
137146
# @snapshot
138147
def full_width

‎static/info_arch.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9145,6 +9145,19 @@
91459145
]
91469146
}
91479147
},
9148+
{
9149+
"preview_path": "primer/alpha/text_field/show_clear_button_with_custom_label",
9150+
"name": "show_clear_button_with_custom_label",
9151+
"snapshot": "true",
9152+
"skip_rules": {
9153+
"wont_fix": [
9154+
"region"
9155+
],
9156+
"will_fix": [
9157+
"color-contrast"
9158+
]
9159+
}
9160+
},
91489161
{
91499162
"preview_path": "primer/alpha/text_field/full_width",
91509163
"name": "full_width",

‎static/previews.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7129,6 +7129,19 @@
71297129
]
71307130
}
71317131
},
7132+
{
7133+
"preview_path": "primer/alpha/text_field/show_clear_button_with_custom_label",
7134+
"name": "show_clear_button_with_custom_label",
7135+
"snapshot": "true",
7136+
"skip_rules": {
7137+
"wont_fix": [
7138+
"region"
7139+
],
7140+
"will_fix": [
7141+
"color-contrast"
7142+
]
7143+
}
7144+
},
71327145
{
71337146
"preview_path": "primer/alpha/text_field/full_width",
71347147
"name": "full_width",

‎test/components/alpha/text_field_test.rb‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,29 @@ def test_renders_a_clear_button
4848
assert_selector "button.FormControl-input-trailingAction#clear-button-id"
4949
end
5050

51+
def test_renders_clear_button_with_default_aria_label
52+
render_inline(
53+
Primer::Alpha::TextField.new(
54+
**@default_params,
55+
show_clear_button: true
56+
)
57+
)
58+
59+
assert_selector "button[aria-label='Clear']"
60+
end
61+
62+
def test_renders_clear_button_with_custom_aria_label
63+
render_inline(
64+
Primer::Alpha::TextField.new(
65+
**@default_params,
66+
show_clear_button: true,
67+
clear_button_label: "Effacer"
68+
)
69+
)
70+
71+
assert_selector "button[aria-label='Effacer']"
72+
end
73+
5174
def test_renders_the_component_full_width
5275
render_inline(Primer::Alpha::TextField.new(**@default_params, full_width: true))
5376

0 commit comments

Comments
 (0)