diff --git a/.changeset/fifty-cheetahs-explode.md b/.changeset/fifty-cheetahs-explode.md new file mode 100644 index 0000000000..c99738637b --- /dev/null +++ b/.changeset/fifty-cheetahs-explode.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": minor +--- + +Allow localization of TextField clear button aria-label diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb index f9d555c2af..51d49af40c 100644 --- a/app/lib/primer/forms/dsl/text_field_input.rb +++ b/app/lib/primer/forms/dsl/text_field_input.rb @@ -6,7 +6,7 @@ class TextFieldInput < Input attr_reader( *%i[ name label show_clear_button leading_visual leading_spinner trailing_visual clear_button_id - visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit + clear_button_label visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit ] ) @@ -21,6 +21,7 @@ def initialize(name:, label:, **system_arguments) @trailing_visual = system_arguments.delete(:trailing_visual) @leading_spinner = !!system_arguments.delete(:leading_spinner) @clear_button_id = system_arguments.delete(:clear_button_id) || SecureRandom.uuid + @clear_button_label = system_arguments.delete(:clear_button_label) @inset = system_arguments.delete(:inset) @monospace = system_arguments.delete(:monospace) @auto_check_src = system_arguments.delete(:auto_check_src) diff --git a/app/lib/primer/forms/text_field.html.erb b/app/lib/primer/forms/text_field.html.erb index 562f01098b..fb2d9593cd 100644 --- a/app/lib/primer/forms/text_field.html.erb +++ b/app/lib/primer/forms/text_field.html.erb @@ -13,7 +13,7 @@ <%= builder.text_field(@input.name, **@input.input_arguments) %> <% end %> <% if @input.show_clear_button? %> - <% end %> diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb index fa7f371063..65e85e34e4 100644 --- a/previews/primer/alpha/text_field_preview.rb +++ b/previews/primer/alpha/text_field_preview.rb @@ -15,6 +15,7 @@ class TextFieldPreview < ViewComponent::Preview # @param size [Symbol] select [small, medium, large] # @param show_clear_button toggle # @param clear_button_id text + # @param clear_button_label text # @param full_width toggle # @param disabled toggle # @param invalid toggle @@ -35,6 +36,7 @@ def playground( size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s, show_clear_button: false, clear_button_id: "my-text-field-clear-button", + clear_button_label: nil, full_width: true, disabled: false, invalid: false, @@ -56,6 +58,7 @@ def playground( size: size, show_clear_button: show_clear_button, clear_button_id: clear_button_id, + clear_button_label: clear_button_label, full_width: full_width, disabled: disabled, invalid: invalid, @@ -133,6 +136,12 @@ def show_clear_button render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field-3", label: "My text field")) end + # @label Show clear button with custom label + # @snapshot + def show_clear_button_with_custom_label + render(Primer::Alpha::TextField.new(show_clear_button: true, clear_button_label: "Effacer", name: "my-text-field-3-custom", label: "Mon champ de texte")) + end + # @label Full width # @snapshot def full_width diff --git a/static/info_arch.json b/static/info_arch.json index 93e6d5f3fc..a5d4423638 100644 --- a/static/info_arch.json +++ b/static/info_arch.json @@ -9157,6 +9157,19 @@ ] } }, + { + "preview_path": "primer/alpha/text_field/show_clear_button_with_custom_label", + "name": "show_clear_button_with_custom_label", + "snapshot": "true", + "skip_rules": { + "wont_fix": [ + "region" + ], + "will_fix": [ + "color-contrast" + ] + } + }, { "preview_path": "primer/alpha/text_field/full_width", "name": "full_width", diff --git a/static/previews.json b/static/previews.json index 5a4b7c9522..fcf8074dd6 100644 --- a/static/previews.json +++ b/static/previews.json @@ -7141,6 +7141,19 @@ ] } }, + { + "preview_path": "primer/alpha/text_field/show_clear_button_with_custom_label", + "name": "show_clear_button_with_custom_label", + "snapshot": "true", + "skip_rules": { + "wont_fix": [ + "region" + ], + "will_fix": [ + "color-contrast" + ] + } + }, { "preview_path": "primer/alpha/text_field/full_width", "name": "full_width", diff --git a/test/components/alpha/text_field_test.rb b/test/components/alpha/text_field_test.rb index 2f07d6bc4d..0dbf5fc25d 100644 --- a/test/components/alpha/text_field_test.rb +++ b/test/components/alpha/text_field_test.rb @@ -48,6 +48,29 @@ def test_renders_a_clear_button assert_selector "button.FormControl-input-trailingAction#clear-button-id" end + def test_renders_clear_button_with_default_aria_label + render_inline( + Primer::Alpha::TextField.new( + **@default_params, + show_clear_button: true + ) + ) + + assert_selector "button[aria-label='Clear']" + end + + def test_renders_clear_button_with_custom_aria_label + render_inline( + Primer::Alpha::TextField.new( + **@default_params, + show_clear_button: true, + clear_button_label: "Effacer" + ) + ) + + assert_selector "button[aria-label='Effacer']" + end + def test_renders_the_component_full_width render_inline(Primer::Alpha::TextField.new(**@default_params, full_width: true))