diff --git a/src/components/Filters/FilterTag.vue b/src/components/Filters/FilterTag.vue
index 524a96a0ee..e0cefec6d2 100644
--- a/src/components/Filters/FilterTag.vue
+++ b/src/components/Filters/FilterTag.vue
@@ -1,17 +1,18 @@
 <template>
-  <button
+  <div
     class="button tiny tag"
     :aria-label="$t('filters.filter-tag-aria', { filterLabel: filterLabel })"
   >
     <span>{{ filterLabel }}</span>
     <span
+      role="button"
       class="close ml-2 p-2"
       tabindex="0"
       @click="onClick"
       @keyup.enter="onClick"
       ><i class="icon cross"
     /></span>
-  </button>
+  </div>
 </template>
 <script>
 export default {
diff --git a/test/unit/specs/components/__snapshots__/filter-display.spec.js.snap b/test/unit/specs/components/__snapshots__/filter-display.spec.js.snap
index 030093df7e..7d85d82ee6 100644
--- a/test/unit/specs/components/__snapshots__/filter-display.spec.js.snap
+++ b/test/unit/specs/components/__snapshots__/filter-display.spec.js.snap
@@ -6,14 +6,14 @@ exports[`FilterDisplay should render correct contents 1`] = `
   class="flex flex-wrap items-center p-4"
 >
   <span
-    class="mr-2 font-semibold"
+    class="mr-2 font-semibold mb-2"
   >
     
     filters.filter-by
   
   </span>
    
-  <button
+  <div
     aria-label="filters.filter-tag-aria"
     class="button tiny tag mx-1 mb-2 ml-2"
   >
@@ -23,12 +23,13 @@ exports[`FilterDisplay should render correct contents 1`] = `
      
     <span
       class="close ml-2 p-2"
+      role="button"
       tabindex="0"
     >
       <i
         class="icon cross"
       />
     </span>
-  </button>
+  </div>
 </div>
 `;
diff --git a/test/unit/specs/components/__snapshots__/filter-tag.spec.js.snap b/test/unit/specs/components/__snapshots__/filter-tag.spec.js.snap
new file mode 100644
index 0000000000..e6f6e464d4
--- /dev/null
+++ b/test/unit/specs/components/__snapshots__/filter-tag.spec.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterTag should render correct contents 1`] = `
+<div
+  aria-label="filters.filter-tag-aria"
+  class="button tiny tag"
+>
+  <span>
+    bar-foo
+  </span>
+   
+  <span
+    class="close ml-2 p-2"
+    role="button"
+    tabindex="0"
+  >
+    <i
+      class="icon cross"
+    />
+  </span>
+</div>
+`;
diff --git a/test/unit/specs/components/filter-block.spec.js b/test/unit/specs/components/filter-block.spec.js
deleted file mode 100644
index 5085601bb1..0000000000
--- a/test/unit/specs/components/filter-block.spec.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import FilterTag from '~/components/Filters/FilterTag'
-import render from '../../test-utils/render'
-
-describe('FilterTag', () => {
-  let options = {}
-  let props = null
-  beforeEach(() => {
-    props = {
-      filter: [{ code: 'foo', name: 'bar', checked: false }],
-      filterType: 'bar',
-    }
-    options = { propsData: props }
-  })
-
-  it('should render correct contents', () => {
-    const wrapper = render(FilterTag, options)
-    expect(wrapper.find('.filter-block').vm).toBeDefined()
-  })
-
-  it('should emit filterChanged event', () => {
-    const wrapper = render(FilterTag, options)
-    wrapper.vm.onClick()
-    expect(wrapper.emitted().filterChanged).toBeTruthy()
-  })
-})
diff --git a/test/unit/specs/components/filter-tag.spec.js b/test/unit/specs/components/filter-tag.spec.js
new file mode 100644
index 0000000000..12a8823a38
--- /dev/null
+++ b/test/unit/specs/components/filter-tag.spec.js
@@ -0,0 +1,30 @@
+import FilterTag from '~/components/Filters/FilterTag'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+
+describe('FilterTag', () => {
+  let options = {}
+  let props = null
+  beforeEach(() => {
+    props = {
+      code: 'foo',
+      label: 'bar-foo',
+      filterType: 'bar',
+    }
+    options = { propsData: props, listeners: { filterChanged: jest.fn() } }
+  })
+
+  it('should render correct contents', () => {
+    const { container } = render(FilterTag, options)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should emit filterChanged event', () => {
+    render(FilterTag, options)
+    userEvent.click(screen.getByRole('button'))
+    expect(options.listeners.filterChanged).toHaveBeenCalledWith({
+      code: 'foo',
+      filterType: 'bar',
+    })
+  })
+})