From f546698d83357dec5e75abb5fbc7122ee32ed96b Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Tue, 11 Mar 2025 12:10:11 -0600
Subject: [PATCH] Make snippet list info focusable
Changelog: changed
---
app/helpers/snippets_helper.rb | 15 ++++++++++++---
app/views/shared/snippets/_snippet.html.haml | 7 +++----
.../shared/snippets/_snippet.html.haml_spec.rb | 16 ++++++++--------
3 files changed, 23 insertions(+), 15 deletions(-)
diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index dc4db2c2021dc..efe87500b4c59 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -76,10 +76,19 @@ def snippet_file_count(snippet)
tooltip = n_('%d file', '%d files', file_count) % file_count
- tag.span(class: 'file_count', title: tooltip, data: { toggle: 'tooltip', container: 'body' }) do
- concat(sprite_icon('documents', css_class: 'gl-align-middle'))
+ render Pajamas::ButtonComponent.new(
+ category: :tertiary,
+ size: :small,
+ icon: 'documents',
+ button_options: {
+ title: tooltip,
+ data: { toggle: 'tooltip', container: 'body' },
+ aria: { label: tooltip },
+ class: "file_count gl-min-h-0 gl-min-w-0 !gl-bg-transparent !gl-p-0"
+ }
+ ) do
concat(' ')
- concat(file_count)
+ concat(file_count.to_s)
end
end
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index 6e19f2b199bda..2989d379268f4 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -26,12 +26,11 @@
= _('created %{timeAgo} by %{author}').html_safe % { timeAgo: created_at, author: author }
.sm:gl-flex.gl-flex-col.gl-items-end{ data: { testid: 'snippet-file-count-content', qa_snippet_files: snippet.statistics&.file_count } }
- .gl-flex.gl-gap-4.gl-items-center
+ .gl-flex.gl-gap-3.gl-items-center
- if notes_count > 0
- %span.has-tooltip{ title: _('Comments') }
- = sprite_icon('comments')
+ = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, icon: 'comments', button_options: { class: 'has-tooltip !gl-bg-transparent !gl-p-0', title: _('Comments'), aria: { label: _('Comments') } }) do
= notes_count
= snippet_file_count(snippet)
- %span.has-tooltip{ title: visibility_level_label(snippet.visibility_level), data: { testid: 'snippet-visibility-content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }
+ = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, button_options: { class: 'has-tooltip !gl-bg-transparent !gl-p-0', title: _(visibility_level_label(snippet.visibility_level)), aria: { label: _(snippet.visibility_level) }, data: { testid: 'snippet-visibility-content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }) do
= visibility_level_icon(snippet.visibility_level)
.gl-whitespace-nowrap.gl-text-sm.gl-text-subtle= _('updated %{timeAgo}').html_safe % { timeAgo: time_ago_with_tooltip(snippet.updated_at, placement: 'bottom') }
diff --git a/spec/views/shared/snippets/_snippet.html.haml_spec.rb b/spec/views/shared/snippets/_snippet.html.haml_spec.rb
index ae33821c79a30..ec0116e4bbf8c 100644
--- a/spec/views/shared/snippets/_snippet.html.haml_spec.rb
+++ b/spec/views/shared/snippets/_snippet.html.haml_spec.rb
@@ -20,8 +20,8 @@
render 'shared/snippets/snippet', snippet: snippet
- expect(rendered).to have_selector("span.file_count", text: '3')
- expect(rendered).to have_selector("span.file_count[title=\"3 files\"]")
+ expect(rendered).to have_selector(".file_count", text: '3')
+ expect(rendered).to have_selector(".file_count[title=\"3 files\"]")
end
it 'renders correct file count and tooltip when file_count is 1' do
@@ -29,8 +29,8 @@
render 'shared/snippets/snippet', snippet: snippet
- expect(rendered).to have_selector("span.file_count", text: '1')
- expect(rendered).to have_selector("span.file_count[title=\"1 file\"]")
+ expect(rendered).to have_selector(".file_count", text: '1')
+ expect(rendered).to have_selector(".file_count[title=\"1 file\"]")
end
it 'does not render file count when file count is 0' do
@@ -38,7 +38,7 @@
render 'shared/snippets/snippet', snippet: snippet
- expect(rendered).not_to have_selector('span.file_count')
+ expect(rendered).not_to have_selector('.file_count')
end
end
@@ -48,7 +48,7 @@
render 'shared/snippets/snippet', snippet: snippet
- expect(rendered).not_to have_selector('span.file_count')
+ expect(rendered).not_to have_selector('.file_count')
end
end
@@ -63,7 +63,7 @@
end
it 'does not render tooltip' do
- expect(rendered).not_to have_selector("span.has-tooltip[title='This snippet is hidden because its author has been banned']")
+ expect(rendered).not_to have_selector(".has-tooltip[title='This snippet is hidden because its author has been banned']")
end
end
@@ -80,7 +80,7 @@
end
it 'renders tooltip' do
- expect(rendered).to have_selector("span.has-tooltip[title='This snippet is hidden because its author has been banned']")
+ expect(rendered).to have_selector(".has-tooltip[title='This snippet is hidden because its author has been banned']")
end
end
end
--
GitLab