diff --git a/.changeset/warm-books-divide.md b/.changeset/warm-books-divide.md new file mode 100644 index 0000000000..a4048d93df --- /dev/null +++ b/.changeset/warm-books-divide.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +Make dismiss action on Banner translatable diff --git a/app/components/primer/alpha/banner.html.erb b/app/components/primer/alpha/banner.html.erb index 4076221f48..ec1ef85ca1 100644 --- a/app/components/primer/alpha/banner.html.erb +++ b/app/components/primer/alpha/banner.html.erb @@ -22,7 +22,7 @@ Primer::Beta::IconButton.new( scheme: :invisible, icon: :x, - aria: { label: "Dismiss" }, + aria: { label: @dismiss_label }, data: { action: catalyst_action(event: "click", function: "dismiss") }, autofocus: true ) diff --git a/app/components/primer/alpha/banner.rb b/app/components/primer/alpha/banner.rb index 7097672e0e..68538a047e 100644 --- a/app/components/primer/alpha/banner.rb +++ b/app/components/primer/alpha/banner.rb @@ -55,17 +55,21 @@ class Banner < Primer::Component :hide ].freeze + DEFAULT_DISMISS_LABEL = "Dismiss" + # @param full [Boolean] Whether the component should take up the full width of the screen. # @param full_when_narrow [Boolean] Whether the component should take up the full width of the screen when rendered inside smaller viewports. # @param dismiss_scheme [Symbol] Whether the component can be dismissed with an "x" button. <%= one_of(Primer::Alpha::Banner::DISMISS_SCHEMES) %> + # @param dismiss_label [String] The aria-label text of the dismiss "x" button # @param description [String] Description text rendered underneath the message. # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme. # @param scheme [Symbol] <%= one_of(Primer::Alpha::Banner::SCHEME_MAPPINGS.keys) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments) + def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, dismiss_label: DEFAULT_DISMISS_LABEL, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments) @scheme = fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME) @icon = icon || DEFAULT_ICONS[@scheme] @dismiss_scheme = dismiss_scheme + @dismiss_label = dismiss_label @description = description @system_arguments = deny_tag_argument(**system_arguments) diff --git a/previews/primer/alpha/banner_preview.rb b/previews/primer/alpha/banner_preview.rb index 5a291df61c..666a4e2542 100644 --- a/previews/primer/alpha/banner_preview.rb +++ b/previews/primer/alpha/banner_preview.rb @@ -9,13 +9,14 @@ class BannerPreview < ViewComponent::Preview # @param full toggle # @param full_when_narrow toggle # @param dismiss_scheme [Symbol] select [none, remove, hide] + # @param dismiss_label text # @param icon [Symbol] octicon # @param scheme [Symbol] select [default, warning, danger, success] # @param content text # @param description text - def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil) + def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, dismiss_label: Primer::Alpha::Banner::DEFAULT_DISMISS_LABEL, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil) icon = nil if icon == :none - render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content } + render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, dismiss_label: dismiss_label, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content } end # @label Default diff --git a/test/components/alpha/banner_test.rb b/test/components/alpha/banner_test.rb index 396d6ea17b..8b0a4fc2ae 100644 --- a/test/components/alpha/banner_test.rb +++ b/test/components/alpha/banner_test.rb @@ -112,6 +112,13 @@ def test_does_not_render_dismiss_button refute_selector(".Banner-close") end + def test_does_render_dismiss_label + render_inline(Primer::Alpha::Banner.new(dismiss_scheme: :remove, dismiss_label: "My new label")) { "foo" } + + assert_selector(".Banner .Banner-close") + assert_selector("[aria-label='My new label']") + end + def test_renders_action_button_slot render_inline(Primer::Alpha::Banner.new) do |component| component.with_action_button { "submit" }