use props to configure all texts + remove a11ySummary

Ennoriel · Oct 23, 2023 · 1b7dccc · 1b7dccc
1 parent d0b5876
commit 1b7dccc
Show file tree

Hide file tree

Showing 22 changed files with 260 additions and 242 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-awesome-color-picker",
-	"version": "3.0.0-beta.5",
+	"version": "3.0.0-beta.6",
 	"description": "A highly customizable color picker component library",
 	"homepage": "https://svelte-awesome-color-picker.vercel.app",
 	"repository": {
@@ -51,7 +51,7 @@
 		"prettier-plugin-svelte": "^3.0.3",
 		"rehype-autolink-headings": "^7.0.0",
 		"rehype-slug": "^6.0.0",
-		"svelte-awesome-slider": "^0.0.5",
+		"svelte-awesome-slider": "^0.0.6",
 		"svelte-check": "^3.5.2",
 		"svelte-preprocess": "^5.0.4",
 		"svelte2tsx": "^0.6.23",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/generate_props.js b/scripts/generate_props.js
@@ -20,13 +20,13 @@ function get_component_content(path) {
 }
 
 function parse_component_props_docs(componentName, componentStr) {
-	const componentDocArray = componentStr.match(/(\/\*\*([^/]|\n|\r)*\*\/\r?\n\s*)?export (let|const).*/g);
+	const componentDocArray = componentStr.match(/(\/\*\*([^*]|\n|\r)*\*\/\r?\n\s*)?export (let|const).*/g);
 
 	if (!componentDocArray) return;
 
 	return componentDocArray.map((t) => {
 		const attrs = t.match(
-			/(?:\/\*\*(?<description>(?:[^/]|\n|\r)*)\*\/\r?\n\s*)?export (?:let|const) (?<name>\w+)(?:: (?<type>[^=;]*))?(?: ?= (?<def>[^;]*))?/m
+			/(?:\/\*\*(?<description>(?:[^*]|\n|\r)*)\*\/\r?\n\s*)?export (?:let|const) (?<name>\w+)(?:: (?<type>[^=;]*))?(?: ?= (?<def>[^;]*))?/m
 		);
 
 		const description = attrs.groups.description
@@ -71,7 +71,7 @@ function replace_content(path, startTag, endTag, str) {
 function generate_docs(path, componentName, componentDocParsed) {
 	const componentDocForComponent =
 		`| name | type | default value | usage |
-| --- | --- | --- | --- |
+| :-- | --- | --- | --- |
 ` +
 		componentDocParsed
 			.map(({ name, type, defaultValue, description }) => {

diff --git a/src/lib/components/ColorPicker.svelte b/src/lib/components/ColorPicker.svelte
@@ -3,6 +3,7 @@
 	import type { RgbaColor, HsvaColor, Colord } from 'colord';
 	import { colord } from 'colord';
 	import type { A11yColor, Components } from '../type/types';
+	import { defaultTexts, type TextsPartial, type A11yTextsPartial } from '../texts';
 	import Picker from './Picker.svelte';
 	import { Slider } from 'svelte-awesome-slider';
 	import PickerIndicator from './variant/default/PickerIndicator.svelte';
@@ -65,13 +66,15 @@
 	/** required WCAG contrast level */
 	export let a11yLevel: 'AA' | 'AAA' = 'AA';
 
-	/** used with the A11yVariant. Define the accessibility guidelines (HTML) */
-	export let a11yGuidelines: string =
-		'<p style="margin: 0; font-size: 12px;">Learn more at <a href="https://webaim.org/articles/contrast/" target="_blank">WebAIM contrast guide</a></p>';
-
 	/** used with the A11yVariant. If set to false, the accessibility panel will always be shown */
 	export let isA11yClosable: boolean = true;
 
+	/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	export let texts: TextsPartial | undefined = undefined;
+
+	/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	export let a11yTexts: A11yTextsPartial | undefined = undefined;
+
 	/**
 	 * Internal old values to trigger color conversion
 	 */
@@ -97,6 +100,20 @@
 		};
 	}
 
+	function getTexts() {
+		return {
+			label: {
+				...defaultTexts.label,
+				...texts?.label
+			},
+			color: {
+				...defaultTexts.color,
+				...texts?.color
+			},
+			changeTo: defaultTexts.changeTo ?? texts?.changeTo
+		};
+	}
+
 	function mousedown({ target }: MouseEvent) {
 		if (isDialog) {
 			if (labelElement.contains(target as Node) || labelElement.isSameNode(target as Node)) {
@@ -198,6 +215,7 @@
 				bind:value={hsv.h}
 				direction={sliderDirection}
 				reverse={sliderDirection === 'vertical'}
+				ariaLabel={getTexts().label.h}
 			/>
 		</div>
 		{#if isAlpha}
@@ -209,11 +227,20 @@
 					bind:value={hsv.a}
 					direction={sliderDirection}
 					reverse={sliderDirection === 'vertical'}
+					ariaLabel={getTexts().label.a}
 				/>
 			</div>
 		{/if}
 		{#if isTextInput}
-			<svelte:component this={getComponents().textInput} bind:hex bind:rgb bind:hsv {isAlpha} {textInputModes} />
+			<svelte:component
+				this={getComponents().textInput}
+				bind:hex
+				bind:rgb
+				bind:hsv
+				{isAlpha}
+				{textInputModes}
+				texts={getTexts()}
+			/>
 		{/if}
 		{#if getComponents().a11yNotice}
 			<svelte:component
@@ -222,7 +249,7 @@
 				{a11yColors}
 				{color}
 				{hex}
-				{a11yGuidelines}
+				{a11yTexts}
 				{isA11yClosable}
 				{a11yLevel}
 			/>
@@ -261,8 +288,9 @@ import ColorPicker from 'svelte-awesome-color-picker';
 @prop disableCloseClickOutside: boolean = false — If set to true, it will not be possible to close the color picker by clicking outside
 @prop a11yColors: Array&lt;A11yColor&gt; = [{ hex: '#ffffff' }] — used with the A11yVariant. Define the accessibility examples in the color picker
 @prop a11yLevel: 'AA' | 'AAA' = 'AA' — required WCAG contrast level
-@prop a11yGuidelines: string — used with the A11yVariant. Define the accessibility guidelines (HTML)
 @prop isA11yClosable: boolean = true — used with the A11yVariant. If set to false, the accessibility panel will always be shown
+@prop texts: TextsPartial | undefined = undefined — all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts)
+@prop a11yTexts: A11yTextsPartial | undefined = undefined — all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts)
 -->
 <style>
 	span {

diff --git a/src/lib/components/Picker.svelte b/src/lib/components/Picker.svelte
@@ -84,10 +84,16 @@
 >
 	<svelte:component this={components.pickerIndicator} {pos} {isDark} />
 	<div class="s" style:--pos-y={pos.y}>
-		<Slider bind:value={s} keyboardOnly ariaValueText={(value) => `${value}%`} />
+		<Slider bind:value={s} keyboardOnly ariaValueText={(value) => `${value}%`} ariaLabel="saturation color" />
 	</div>
 	<div class="v" style:--pos-x={pos.x}>
-		<Slider bind:value={v} keyboardOnly ariaValueText={(value) => `${value}%`} direction="vertical" />
+		<Slider
+			bind:value={v}
+			keyboardOnly
+			ariaValueText={(value) => `${value}%`}
+			direction="vertical"
+			ariaLabel="brightness color"
+		/>
 	</div>
 </div>
 

diff --git a/src/lib/components/variant/accessibility/A11yNotice.svelte b/src/lib/components/variant/accessibility/A11yNotice.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { defaultA11yTexts, type A11yTextsPartial } from '$lib/texts';
 	import type { A11yColor } from '$lib/type/types';
 	import type { Components } from '$lib/type/types';
 	import { extend, type Colord } from 'colord';
 	import a11yPlugin from 'colord/plugins/a11y';
+	import { getNumberOfGradeFailed } from './grades';
 
 	/** customize the ColorPicker component parts. Can be used to display a Chrome variant or an Accessibility Notice */
 	export let components: Components;
@@ -19,20 +21,29 @@
 	/** required WCAG contrast level */
 	export let a11yLevel: 'AA' | 'AAA';
 
-	/** define the accessibility guidelines (HTML) */
-	export let a11yGuidelines: string;
-
 	/** if set to false, the accessibility panel will always be shown */
 	export let isA11yClosable: boolean;
 
+	/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	export let a11yTexts: A11yTextsPartial | undefined = undefined;
+
 	let open = true;
 
 	extend([a11yPlugin]);
 
+	function getTexts() {
+		return {
+			...defaultA11yTexts,
+			...a11yTexts
+		};
+	}
+
 	$: _a11yColors = a11yColors.map((a11yColor) => ({
 		...a11yColor,
 		contrast: color?.contrast(a11yColor.hex)
 	}));
+
+	$: count = _a11yColors.map((color) => getNumberOfGradeFailed(color, a11yLevel)).reduce((acc, c) => acc + c);
 </script>
 
 <!-- https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ -->
@@ -41,7 +52,7 @@
 		{#if isA11yClosable}
 			{open ? '⯆' : '⯈'}&nbsp;
 		{/if}
-		<svelte:component this={components.a11ySummary} a11yColors={_a11yColors} {a11yLevel} />
+		{getTexts().nbGradeSummary(count)}
 	</button>
 	{#if open}
 		{#each _a11yColors as { contrast, hex: a11yHex, placeholder, reverse, size }}
@@ -53,11 +64,12 @@
 				bgColor={reverse ? hex : a11yHex}
 				{placeholder}
 				{size}
+				contrastText={getTexts().contrast}
 			/>
 		{/each}
-		{#if a11yGuidelines}
+		{#if getTexts().guidelines}
 			<span>
-				{@html a11yGuidelines}
+				{@html getTexts().guidelines}
 			</span>
 		{/if}
 	{/if}
@@ -82,8 +94,8 @@ import { A11yVariant } from 'svelte-awesome-color-picker';
 @prop color: Colord | undefined — Colord color
 @prop a11yColors: Array&lt;A11yColor&gt; — define the accessibility examples in the color picker
 @prop a11yLevel: 'AA' | 'AAA' — required WCAG contrast level
-@prop a11yGuidelines: string — define the accessibility guidelines (HTML)
 @prop isA11yClosable: boolean — if set to false, the accessibility panel will always be shown
+@prop a11yTexts: A11yTextsPartial | undefined = undefined — all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts)
 -->
 <style>
 	div {
@@ -93,7 +105,9 @@ import { A11yVariant } from 'svelte-awesome-color-picker';
 	button {
 		background: none;
 		border: none;
-		padding: 2px 8px;
+		padding: 0 8px;
+		margin: 0;
+		line-height: 32px;
 	}
 	button:disabled {
 		color: inherit;

diff --git a/src/lib/components/variant/accessibility/A11ySingleNotice.svelte b/src/lib/components/variant/accessibility/A11ySingleNotice.svelte
@@ -18,14 +18,17 @@
 
 	/** RGAA contrast between the text and its background. Between 1 and 21 */
 	export let contrast: number = 1;
+
+	/** define the accessibility "contrast" text */
+	export let contrastText: string;
 </script>
 
 <div class="a11y-single-notice">
 	<p class="lorem {size === 'large' && 'large'}" style:color={textColor} style:background-color={bgColor}>
 		{placeholder || 'Lorem Ipsum'}
 	</p>
 	<div class="score">
-		<p>contrast: {contrast >= 10 ? contrast.toFixed(1) : contrast}</p>
+		<p>{contrastText}: {contrast >= 10 ? contrast.toFixed(1) : contrast}</p>
 		<span class="grade" class:grade-ok={isGradeAchieved(contrast, size, 'AA')}>AA</span>
 		{#if a11yLevel === 'AAA'}
 			<span class="grade" class:grade-ok={isGradeAchieved(contrast, size, 'AAA')}>AAA</span>
@@ -53,6 +56,7 @@ import { A11yVariant } from 'svelte-awesome-color-picker';
 @prop textColor: string — placeholder text color
 @prop bgColor: string — placeholder background color
 @prop contrast: number = 1 — RGAA contrast between the text and its background. Between 1 and 21
+@prop contrastText: string — define the accessibility "contrast" text
 -->
 <style>
 	.a11y-single-notice {

diff --git a/src/lib/components/variant/accessibility/A11ySummary.svelte b/src/lib/components/variant/accessibility/A11ySummary.svelte