✨ vue-dot: Add label prop in CustomIcon (#1661)

assurance-maladie-digital · Dec 13, 2021 · 34c23b2 · 34c23b2
1 parent 131ba58
commit 34c23b2
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
   - **DatePicker:** Transmission des écouteurs d'événements ([#1649](https://github.com/assurance-maladie-digital/design-system/pull/1649)) ([1f12f67](https://github.com/assurance-maladie-digital/design-system/commit/1f12f67986a3f81c0b8e964d92278eee8cde4707))
   - **FooterBar:** Ajout d'un nouveau composant ([#1652](https://github.com/assurance-maladie-digital/design-system/pull/1652)) ([7c3b521](https://github.com/assurance-maladie-digital/design-system/commit/7c3b5214616f7d2ab61390f322a07c53a2b12126))
   - **DialogBox:** Ajout de la prop `hide-actions` ([#1656](https://github.com/assurance-maladie-digital/design-system/pull/1656)) ([18972d6](https://github.com/assurance-maladie-digital/design-system/commit/18972d60561a4904d9519a3ab1ba6987805fe055))
+  - **CustomIcon:** Ajout de la prop `label` ([#1661](https://github.com/assurance-maladie-digital/design-system/pull/1661))
 
 - 🐛 **Corrections de bugs**
   - **Logo:** Correction du logo Risque Pro ([#1641](https://github.com/assurance-maladie-digital/design-system/pull/1641)) ([c678ffa](https://github.com/assurance-maladie-digital/design-system/commit/c678ffa04fe15cd760055c0887486383cdfba729))
@@ -35,7 +36,7 @@
   - **template:** Déplacement des composants layout dans des dossiers dédiés ([#1657](https://github.com/assurance-maladie-digital/design-system/pull/1657)) ([7b4ebb9](https://github.com/assurance-maladie-digital/design-system/commit/7b4ebb931faf6ffa830f160ca417a43dc4ad9ddf))
 
 - ⬆️ **Dépendances**
-  - **template:** Mise à jour des dépendances ([#1660](https://github.com/assurance-maladie-digital/design-system/pull/1660))
+  - **template:** Mise à jour des dépendances ([#1660](https://github.com/assurance-maladie-digital/design-system/pull/1660)) ([131ba58](https://github.com/assurance-maladie-digital/design-system/commit/131ba58891bd76525649116663b252ba243477aa))
 
 ### FormBuilder
 

diff --git a/packages/docs/src/assets/icons.ts b/packages/docs/src/assets/icons.ts
@@ -1,3 +1,3 @@
 export const icons = {
-	digital: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M69 35c0 18.8-15.4 34-34.5 34C15.5 69 0 53.8 0 35S15.4 1 34.5 1C53.5 1 69 16.2 69 35" fill="currentColor"/><path d="M23.6 19.3l6.8 3.9v-7.8l-6.8 3.9zm8.6 7v18.5l7.7-4.5v-9.6l-7.7-4.5zm-9.5 25l8.6 4.8 18-10.3V25l-17.1-9.7v8.8l9 5.2c.3.2.5.4.5.8v10.6c0 .4-.2.6-.5.8L31.7 47c-.2.2-.6.2-.8 0a.9.9 0 01-.5-.7V25.2l-7.7-4.4v30.4zm8.6 6.7l-.4-.1-9.5-5.4a.9.9 0 01-.4-.8V19.3c0-.3.2-.6.4-.8l9.5-5.4.4-.1h.3l.1.1L50.6 24c.2.1.4.4.4.7v21.7c0 .3-.2.6-.4.7L31.7 58l-.4.1z" fill="#fff"/></svg>'
+	digital: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" focusable="false"><path d="M69 35c0 18.8-15.4 34-34.5 34C15.5 69 0 53.8 0 35S15.4 1 34.5 1C53.5 1 69 16.2 69 35" fill="currentColor"/><path d="M23.6 19.3l6.8 3.9v-7.8l-6.8 3.9zm8.6 7v18.5l7.7-4.5v-9.6l-7.7-4.5zm-9.5 25l8.6 4.8 18-10.3V25l-17.1-9.7v8.8l9 5.2c.3.2.5.4.5.8v10.6c0 .4-.2.6-.5.8L31.7 47c-.2.2-.6.2-.8 0a.9.9 0 01-.5-.7V25.2l-7.7-4.4v30.4zm8.6 6.7l-.4-.1-9.5-5.4a.9.9 0 01-.4-.8V19.3c0-.3.2-.6.4-.8l9.5-5.4.4-.1h.3l.1.1L50.6 24c.2.1.4.4.4.7v21.7c0 .3-.2.6-.4.7L31.7 58l-.4.1z" fill="#fff"/></svg>'
 };
diff --git a/packages/docs/src/content/composants/custom-icon.md b/packages/docs/src/content/composants/custom-icon.md
@@ -23,6 +23,12 @@ Vous pouvez utiliser le slot par défaut pour afficher une icône SVG totalement
 
 <doc-example file="custom-icon/slot"></doc-example>
 
+### Label accessible
+
+Par défaut, l’icône est masquée pour les lecteurs d’écran, mais vous pouvez ajouter un label accessible en utilisant la prop `label`.
+
+<doc-example file="custom-icon/label"></doc-example>
+
 </doc-tab-item>
 
 <doc-tab-item label="API">

diff --git a/packages/docs/src/content/examples/custom-icon/label.vue b/packages/docs/src/content/examples/custom-icon/label.vue
@@ -0,0 +1,14 @@
+<template>
+	<CustomIcon
+		icon="digital"
+		label="Logo de la filière Digital"
+	/>
+</template>
+
+<script lang="ts">
+	import Vue from 'vue';
+	import Component from 'vue-class-component';
+
+	@Component
+	export default class CustomIconLabel extends Vue {}
+</script>
diff --git a/packages/docs/src/data/api/custom-icon.ts b/packages/docs/src/data/api/custom-icon.ts
@@ -44,6 +44,12 @@ export const api: Api = {
 				type: 'string',
 				default: 'undefined',
 				description: 'Applique une taille CSS personnalisée (largeur / hauteur) à l’icône.<br>Par défaut, la taille est de `1,35em`.'
+			},
+			{
+				name: 'label',
+				type: 'string',
+				default: 'undefined',
+				description: 'Le label accessible de l’icône.<br>Par défaut, l’icône est masquée pour les lecteurs d’écran.'
 			}
 		],
 		slots: [

diff --git a/packages/vue-dot/src/elements/CustomIcon/CustomIcon.vue b/packages/vue-dot/src/elements/CustomIcon/CustomIcon.vue
@@ -17,8 +17,11 @@
 			width: size,
 			height: size
 		}"
+		:aria-hidden="!label"
+		:aria-label="label"
+		role="img"
+		focusable="false"
 		class="vd-custom-icon"
-		aria-hidden="true"
 	>
 		<!--
 			Default slot, this makes the content
@@ -77,6 +80,14 @@
 			size: {
 				type: String,
 				default: undefined
+			},
+			/**
+			 * The accessible label of the icon
+			 * By default, the icon is hidden from screen readers
+			 */
+			label: {
+				type: String,
+				default: undefined
 			}
 		}
 	});

diff --git a/packages/vue-dot/src/elements/CustomIcon/tests/__snapshots__/CustomIcon.spec.ts.snap b/packages/vue-dot/src/elements/CustomIcon/tests/__snapshots__/CustomIcon.spec.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CustomIcon renders correctly 1`] = `<span aria-hidden="true" class="vd-custom-icon vd-custom-color" style="color: currentColor;"><span>icon-src</span></span>`;
+exports[`CustomIcon renders correctly 1`] = `<span aria-hidden="true" role="img" focusable="false" class="vd-custom-icon vd-custom-color" style="color: currentColor;"><span>icon-src</span></span>`;
 
-exports[`CustomIcon renders correctly with a custom size 1`] = `<span aria-hidden="true" class="vd-custom-icon vd-custom-color" style="color: currentColor; width: 64px; height: 64px;"><span>icon-src</span></span>`;
+exports[`CustomIcon renders correctly with a custom size 1`] = `<span aria-hidden="true" role="img" focusable="false" class="vd-custom-icon vd-custom-color" style="color: currentColor; width: 64px; height: 64px;"><span>icon-src</span></span>`;