Make snippet list info focusable

Changelog: changed

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
 

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') }

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