2 files changed, 33 insertions, 1 deletions
diff --git a/src/components/glyph/glyph.svelte b/src/components/glyph/glyph.svelte
index e430d42..60f99eb 100644
--- a/src/components/glyph/glyph.svelte
+++ b/src/components/glyph/glyph.svelte
@@ -5,7 +5,7 @@
 	export let uuid;
 </script>
 
-<div class="glyphicon" aria-hidden="true" title={$_('glyph.title')}>
+<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
 	{#each getGlyphHash(uuid) as fragment}
 		<span class={fragment.glyph} style="color: {fragment.color} ">
 			{fragment.glyph}
diff --git a/src/components/glyph/glyph.test.js b/src/components/glyph/glyph.test.js
new file mode 100644
index 0000000..93ddc8a
--- /dev/null
+++ b/src/components/glyph/glyph.test.js
@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$/config/i18n';
+
+import Glyph from './glyph.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Glyph component', () => {
+
+  beforeEach(() => {
+
+    internals.results = render(Glyph, { props: {
+      uuid: '9fb14ebc-bc64-400b-915f-d429ec44b8fe'
+    } });
+  });
+
+  test('Should act as an image', () => {
+
+    expect(internals.results.getByRole('img'))
+      .toBeVisible();
+  });
+
+  test('Should render 4 glyphs', () => {
+
+    expect(internals.results.getByRole('img'))
+      .toHaveTextContent(/^. . . .$/);
+  });
+});