Méli-mélo - 2022-09-svgimagemap - Integration to GCWeb (#2019)

* 2022-09-svgimagemap added CSS * Create/Update bcmap.html * Create/Update styles.css * Create/Update cartecb.html * Update bcmap.html * Méli-mélo 2022-09-svgimagemap - Project preparation for GCWeb integration * Méli-mélo - Component: Review To-do List Co-authored-by: Karina Perez <[email protected]> Co-authored-by: Pierre Dubois <[email protected]> Co-authored-by: Eric Guitard <[email protected]>
wet-boew · Sep 22, 2022 · a800b5e · a800b5e
1 parent 9eadf3c
commit a800b5e
Show file tree

Hide file tree

Showing 6 changed files with 327 additions and 0 deletions.
diff --git a/docs/méta-détails/2022-09-svgimagemap-en.html b/docs/méta-détails/2022-09-svgimagemap-en.html
@@ -0,0 +1,11 @@
+---
+title: 2022-09-svgimagemap - Méli-mélo details
+componentName: 2022-09-svgimagemap
+layout: méli-mélo-en
+altLangPage: détails-fr.html
+lang: en
+breadcrumbs: [
+	{ "title": "Méli-mélo", "link": "méli-mélo/méli-mélo-en.html" }
+]
+permalink: /méli-mélo/2022-09-svgimagemap/détails-en.html
+---
diff --git a/docs/méta-détails/2022-09-svgimagemap-fr.html b/docs/méta-détails/2022-09-svgimagemap-fr.html
@@ -0,0 +1,11 @@
+---
+title: 2022-09-svgimagemap - Détails du méli-mélo
+componentName: 2022-09-svgimagemap
+layout: méli-mélo-fr
+altLangPage: détails-en.html
+lang: fr
+breadcrumbs: [
+	{ "title": "Méli-mélo", "link": "méli-mélo/méli-mélo-fr.html" }
+]
+permalink: /méli-mélo/2022-09-svgimagemap/détails-fr.html
+---
diff --git a/méli-mélo/2022-09-svgimagemap/bcmap.html b/méli-mélo/2022-09-svgimagemap/bcmap.html
@@ -0,0 +1,94 @@
+---
+title: "Create an interactive SVG image map"
+dateModified: 2022-09-21
+altLangPage: cartecb.html
+css: styles.css
+---
+
+
+<h2>Instruction</h2> <!-- To ensure this is reusable -->
+
+<ol>
+	<li>Create a SVG</li>
+	<li>Implement SVG and apply the CSS class like the working example bellow</li>
+	<li>Ensure the anchor <code>&lt;a&gt;</code> in the SVG wrap all elements (polygon, path, text) that related to it</li>
+	<li>For accessibility: Apply an <code>aria-label</code> and <code>role="img"</code> on a div that wrap the SVG image. This to comply with SC 1.1.1<li>
+	<li>For accessibility: Provide an alternate version which consist into a list of links</li>
+	<li>For accessibility: Consider and review the <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">SC 1.4.11 Non-Text Contrast</a> pass</li>
+</ol>
+
+<h2>Implementation plan</h2>
+<ol>
+	<li>Test this component with live content</li>
+	<li>Engage with DTO (By end of october 2022), and discuss about guidance on this component/design pattern. Like when to use it? If it match our visual web presence?</li>
+	<li>Make any adjustment, based on DTO (TBS) discussion or/and by implementation experience</li>
+	<li>Produce a ACR (Accessibility Conformance Report)</li>
+	<li>Move this contribution into GCWeb as a provisional feature</li>
+</ol>
+
+<h2>Working Example - Find your service location in your region</h2>
+
+<div aria-label="Image map of BC, alternate version follow" role="img">
+		<svg class="svgimagemap" id="bcregion" version="1.1" viewbox="0 0 2544.33 2544.33" xmlns="http://www.w3.org/2000/svg">
+
+			<a href="#anchor0">
+			<polygon class="st3" points="635.2,1293.57 635.2,1278.28 652.67,1278.28 652.67,1321.96 639.57,1326.33 633.02,1308.86 604.62,1306.67 604.62,1284.83"></polygon>
+			<polygon class="st3" points="408.06,1258.62 405.88,1225.86 388.41,1217.13 368.75,1225.86 357.83,1265.18 349.09,1265.18 353.46,1345.99 386.22,1359.09 405.88,1378.75 421.17,1385.3 381.85,1387.48 377.49,1424.61 434.27,1411.51 464.85,1398.4 467.03,1324.15 501.97,1295.75 508.53,1267.36 453.93,1271.73 440.82,1254.26 421.17,1249.89 414.61,1267.36"></polygon>
+			<polygon class="st3" points="403.69,1442.08 451.74,1439.9 477.95,1404.95 477.95,1481.4 456.11,1483.58 467.03,1522.89 477.95,1555.65 508.53,1588.41 532.55,1597.15 528.18,1649.57 504.16,1614.62 480.13,1612.44 469.21,1562.21 403.69,1479.21 427.72,1470.48"></polygon>
+			<polygon class="st3" points="639.57,1365.64 613.36,1367.83 678.88,1463.92 694.17,1457.37 685.43,1426.79"></polygon>
+			<polygon class="st3" points="665.78,1337.25 681.07,1398.4 711.64,1422.43 702.91,1450.82 720.38,1453 720.77,1410.79 672.63,1333.19"></polygon>
+			<polygon class="st3" points="750.23,1468.99 743.76,1479.76 727.95,1473.3 753.82,1432.34 768.19,1442.4"></polygon>
+			<polygon class="st3" points="768.19,1455.33 767.47,1482.64 751.67,1483.36 754.54,1532.22 793.34,1557.36 796.93,1576.05 776.1,1577.48 791.18,1599.04 814.18,1600.48 815.61,1546.59 813.46,1486.95 784,1453.18"></polygon>
+			<polygon class="st3" points="731.55,1535.09 741.61,1556.65 741.61,1580.36 750.95,1597.6 770.35,1597.6 769.63,1558.08 748.07,1533.65"></polygon>
+			<path class="st3 border-emphasis" d="M43.33,68.33c0,0,646.47,144.15,991.55,174.72s709.81,28.39,709.81,28.39l6.55,1122.59l32.76,32.76 l-19.66,21.84l17.47,13.1l15.29,28.39l17.47-6.55l32.76,10.92l-4.37,28.39l17.47,4.37h15.29l2.18-30.58l15.29,15.29l2.18,34.94 l32.76,24.02l28.39,10.92l-10.92,24.02l4.37,19.66l19.66,21.84l-39.31,13.1l-15.29,21.84l-10.92,28.39l-33.81-10.31v-71.94 l-33.9-18.21l-24.02,4.37l-80.81-43.68l-13.1,45.86l-24.02,39.31l10.92,32.76l26.21,26.21c0,0,0,52.42-6.55,61.15 c-6.55,8.74-48.05,24.02-48.05,24.02l19.66,21.84l-10.92,28.39l-32.76-19.66l-34.94,2.18l-11.49,35.25l-23.98-47.96l-14.76-17.87 l-17.47,24.02l-26.21-2.18l-21.84-8.74l-19.66,2.18l-19.66,13.1l-4.37,26.21l5.65,22.78l-36.23,7.79l-21.84,4.37l-19.18,21.97 l-17.95,15.16l-26.21,2.18l-34.94-13.1l-17.8-28.03l-4.37-19.66l-8.41-13.46l-30.58,8.74l-19.66-28.39l-48.05,6.55l-21.84-15.29 l4.55-27.86l16.17-6.11l1.13-16.26l-10.92-28.39l-10.92-17.47l-13.1-26.21l-6.55-24.02l19.66-24.02v-17.47l-15.29-19.66 l-24.02-19.66l-50.23-2.18l-17.47-2.18l4.37-30.58l-21.84-13.1l-2.18-15.29v-24.02l-30.58-10.92l-13.1-32.76l-16.22,0.16 l-11.14,40.24l12.93,18.68l-5.23,30.47l-0.52,5.82l-34.42,7.29l-7.97-13.75l-24.79,9.39h-30.58l-6.55-28.39l-26.21-4.37 l-2.18-39.31l-41.5-50.23l4.37-37.13l17.47,26.21l52.42,4.37l34.94,24.02l-6.55-28.39c0,0-43.68-26.21-78.63-24.02l-4.37-28.39 l21.84-15.29v-19.66l-24.02-6.55l-21.84,30.58l-21.84,2.18l-10.92,45.86l-28.39-8.74l-52.42-89.55v-34.94l26.21-2.18l6.55-19.66 l-37.13-2.18l-10.92-32.76l-2.18-39.31l10.92-19.66l13.1-19.66l30.58-10.92h26.21l2.18-17.47l-37.13-4.37l4.37-24.02l19.66-21.84 l-6.55-100.47l24.02-4.37l2.18-37.13l-32.76-17.47l-6.55-19.66l-41.5-15.29l-6.55-28.39l-56.78-41.5l-41.5-6.55l-6.55-87.36h-30.58 v-19.66l19.66-2.18l-34.94-98.28l-13.1-54.6l-19.66-43.68l-4.37-69.89l-41.5-63.34l-30.58-10.92v-50.23l-26.21-10.92l-13.1-28.39 l8.74-28.39l-8.74-37.13l-19.66-34.94l-39.31,24.02l-43.68-6.55L253,214.66l-34.94-6.55v54.6l-41.5-15.29l-45.86,43.68 l-10.92-102.65L43.33,68.33z"></path>
+			<path class="st4" d="M1170.64,501.38c-24.15,0-43.73,21.75-43.73,48.58s43.46,109.46,43.46,109.46s43.99-82.63,43.99-109.46 S1194.79,501.38,1170.64,501.38z M1170.64,570.92c-13.13,0-23.77-10.28-23.77-22.95c0-12.68,10.64-22.95,23.77-22.95 s23.77,10.28,23.77,22.95C1194.41,560.64,1183.77,570.92,1170.64,570.92z"></path>
+			<text transform="matrix(1 0 0 1 1090.2041 734.3259)" class="st4 st5 st6">North</text>
+			</a>
+		<a href="#anchor2">
+		<polygon class="st0" points="945.46,1639.49 937.55,1655.29 921.03,1656.73 909.53,1664.63 900.19,1676.85 895.88,1691.22 882.23,1696.25 871.45,1682.6 866.42,1673.98 882.95,1665.35 903.06,1650.98 921.75,1647.39 934.68,1636.61"></polygon>
+		<polygon class="st0" points="855.64,1682.6 839.83,1686.19 840.55,1704.87 831.21,1708.46 830.49,1730.74 855.64,1735.77 859.23,1722.83"></polygon>
+		<polygon class="st0" points="847.02,1755.17 838.4,1769.54 840.55,1785.35 854.92,1798.28 872.17,1795.41 869.29,1768.1"></polygon>
+		<path class="st0" d="M777.32,1915.4l-1.44,17.96l43.11,10.06l2.87,17.24c0,0,63.95-2.16,66.1-0.72c2.16,1.44,3.59,19.4,3.59,19.4 h-46.7v25.15l11.5,7.9l2.16,10.06l-11.5,8.62l-5.03,14.37l22.27,0.72l3.59-10.06l5.03-12.21l17.24-4.31l5.03,16.53l10.06,11.5 l16.53,2.87l3.59-14.37l17.24,2.87l-4.31,28.02h-17.96l-4.31,9.34v11.5l22.27,2.87l16.53-2.87l5.75-15.81l17.24-3.59l4.31,15.81 l9.34,10.78l1.44,12.93l28.74,6.47l-1.44,21.56l-22.99,6.47l-18.68,20.84l7.19,12.93l16.53,0.72l2.87-9.34l15.81-2.16l3.59,15.09 l29.46,2.16l7.19,15.09l-11.5,6.47l2.87,16.53l27.3,4.31l-5.75,17.96l25.15,15.09l53.89,4.31l25.87-2.16l17.96-7.9l4.31,10.78 l-17.96,8.62l-18.68,12.21l-14.37,9.34l5.75,22.27l16.53,6.47l12.21-4.31l15.81-12.21l9.34,7.19v12.21l-15.81,1.44l-0.72,8.62 l18.68,5.75h18.68l10.78,4.31l28.74,20.12l6.47,11.5l30.9,4.31l28.74,5.75l17.24-10.78l14.37-13.65l-2.87-28.02l-20.12-7.19 l-4.31-13.65v-13.65l-11.5-10.06l-10.06-7.9l-2.87-23.71l-7.19-5.75l-1.44-19.4l-10.78-5.03l-16.53-16.53l-33.05-11.5l-35.93-2.16 l-7.19-21.56l-15.81-3.59l0.72-47.42l-12.93-4.31l-5.03-11.5l-7.9-7.19l-4.31-27.3l-19.4,4.31l-12.21,4.31l-13.65-13.65l10.78-2.87 l20.12-1.44l7.19-22.99l-6.47-12.93l-13.65-13.65l-21.56-6.47l-31.61,3.59l-15.09-15.81l-28.02-5.03l-6.47-15.09l-24.43-0.72 l-31.61-5.03l-3.59-7.19l-22.99-5.75l-8.62-18.68l-35.21-2.16l-17.96-28.02l-16.53-9.34l-26.59-7.19l-24.43,4.31l-16.53,10.78 L777.32,1915.4z"></path>
+		<path class="st0 border-emphasis" d="M871.45,1564.76l-17.24,31.61l-11.5,18.68l-7.9,12.93l12.93,2.87l5.03-7.9l12.93-10.06l9.34,2.16l-2.16,20.84 l15.81,4.31l26.59,0.72l10.06-14.37l19.4-2.16l21.56-9.34l9.34,28.74l-1.44,9.34l-12.21,4.31l-30.9,14.37L916,1696.97l-18.68,16.53 l-15.09,20.84l0.72,20.84l1.44,18.68l15.09,2.16l16.53-2.16l10.06-12.21l30.18-3.59l10.78,0.72l2.87,12.93l-15.81,6.47l-23.71-2.16 l-6.47,12.21l-15.09,2.16l-7.19,15.09l-3.59,7.9l16.53,2.87l11.5,5.75l-11.5,9.34h-20.84l-8.62,6.47l-2.87,9.34l4.31,11.5 l18.68,4.31l81.91,1.44l5.03,10.78l-8.62,7.9l-63.23-2.16l-5.03,10.78l8.62,5.03l31.61,2.16l4.31,12.21l27.3,2.87l8.62-11.5h18.68 l10.06,10.06l16.53,6.47h17.24l2.87,21.56l-4.31,9.34c0,0-8.62-0.72-7.9,10.06s4.31,14.37,4.31,14.37l11.5,7.9l15.09,2.16 l30.9,1.44l15.81,10.78l32.33,4.31l15.81-5.75l14.37-24.43l7.19-22.99l2.16-31.61l5.75-5.03l10.78,0.72l1.44,55.33l-15.09,10.78 l-12.21,19.4v30.9l16.53-4.31l6.47-7.19l15.09-12.93l25.87,3.59l14.37-4.31l5.03,11.5l-19.4,5.75l-2.16,10.06l-22.27,0.72 l-2.87,34.49l-21.56,2.87l3.59,17.96l22.99,11.5l21.56,14.37l-0.72,17.96l24.43,1.44l5.03-13.65l12.21-0.72l-2.87-33.77l-7.9-3.59 l5.75-24.43l2.87-37.36l18.68-1.44l-2.87-27.3l22.99-0.72l7.19-62.51l-25.87-12.21l-19.4-36.64l-12.93-20.84l-26.59,7.19 l-23.71-28.02l-46.7,5.03l-23.71-15.81l3.59-23.71l18.68-5.75v-20.12l-7.9-30.9l-30.9-66.82l18.68-17.96v-20.12l-22.99-30.18 l-20.84-12.21l-60.36-0.72v-31.61l-19.4-12.93l-2.16-40.24l-33.05-12.21l-13.65-28.74h-19.4l-9.34,41.67l11.5,17.24l-5.75,34.49 l-26.59,7.19l-10.78-14.37l-25.15,10.78L871.45,1564.76z"></path>
+                <path class="st4" d="M991.27,1697.33c-24.15,0-43.73,21.75-43.73,48.58c0,26.83,43.46,109.46,43.46,109.46s43.99-82.63,43.99-109.46 C1035,1719.07,1015.42,1697.33,991.27,1697.33z M991.27,1766.87c-13.13,0-23.77-10.28-23.77-22.95c0-12.68,10.64-22.95,23.77-22.95 c13.13,0,23.77,10.28,23.77,22.95C1015.04,1756.59,1004.4,1766.87,991.27,1766.87z"></path>
+		<text transform="matrix(1 0 0 1 477.6943 1787.3258)" class="st7 st5 st6" x="-45" y="0">Vancouver</text>
+		<text transform="matrix(1 0 0 1 416.6643 1845.9458)" class="st7 st5 st6" x="-61.03" y="58.62">Island &amp; Coast</text>
+		</a>
+		<a href="#anchor3">
+		<polygon class="st1 border-emphasis" points="1293.6,2118.7 1306.5,2142.4 1330.2,2167.2 1363.6,2193.1 1389.5,2190.9 1406.8,2216.8 1399.2,2240.5
+		1421.8,2270.7 1425.1,2283.6 1655.7,2281.5 1660,2253.5 1671.9,2238.4 1671.9,2220.1 1662.2,2210.4 1637.4,2210.4 1613.7,2198.5
+		1636.3,2192 1636.3,2161.9 1634.2,2147.8 1621.2,2136 1621.2,2104.7 1600.8,2095 1566.3,2083.2 1526.4,2069.2 1507,2062.7
+		1508.1,2035.8 1509.1,2016.3 1544.7,2012 1565.2,1989.4 1561.9,1946.3 1571.7,1940.9 1576,1911.8 1511.3,1907.5 1501.6,1891.3
+		1487.6,1881.6 1467.1,1877.3 1410,1885.9 1370.1,1928 1336,1929.1 1328.1,1984.7 1306.2,1986.9 1304.7,2014.9 1291.1,2016
+		1280.7,2083.2"></polygon>
+		<path class="st4" d="M1410.45,1904.33c-24.15,0-43.73,21.75-43.73,48.58c0,26.83,43.46,109.46,43.46,109.46 s43.99-82.63,43.99-109.46C1454.18,1926.07,1434.6,1904.33,1410.45,1904.33z M1410.45,1973.87c-13.13,0-23.77-10.28-23.77-22.95 c0-12.68,10.64-22.95,23.77-22.95s23.77,10.28,23.77,22.95C1434.22,1963.59,1423.58,1973.87,1410.45,1973.87z"></path>
+		<text transform="matrix(1 0 0 1 1394.0798 2356.3408)" class="st7 st5 st6">Mainland/</text>
+		<text transform="matrix(1 0 0 1 1379.2798 2417.3408)" class="st7 st5 st6" x="10" y="0">Southwest</text>
+		 </a>
+		<a href="#anchor1">
+		<path class="st2 border-emphasis" d="M1647.48,2281.49c0,0,732.89-12.93,819.12-37.72l3.23-16.17l-15.09-12.93l-16.17-21.56l-21.56-3.23 l-12.93-21.56l-2.16-18.32l-16.17-10.78l2.16-52.81l-11.86-8.62l1.08-39.88l-25.87-71.13l-38.8-1.08l-19.4-33.41l-26.94-5.39 l-11.86-48.5l-26.94-15.09l-26.94-17.24l-15.09-20.48l-23.71-15.09l-16.17-39.88l-36.64-20.48l-36.64-8.62l-12.93-31.26 l-10.78-24.79l-36.64-20.48l-15.09-26.94l-18.32-11.86l-23.71,3.23l7.54,18.32l-38.8,11.86l-14.01,20.48l-11.86,26.94l-20.48-20.48 l-9.7-70.06l-36.64-11.86l-23.71,4.31l-79.76-43.11l-12.93,42.03l-30.18,44.19l12.93,35.57l25.87,24.79l-2.16,59.28l-51.73,24.79 l19.4,25.87l-9.7,25.87l-31.26-22.63l-37.72,2.16l-15.09,20.48l-11.86-31.26l-20.48-17.24l-19.4,26.94l-23.71-4.31l-23.71-10.78 l-28.02,7.54l-15.09,9.7l-2.16,23.71l4.31,23.71l28.02,7.54l11.86,8.62l8.62,16.17l65.74,2.16l-5.39,31.26l-10.78,8.62l2.16,33.41 l-19.4,23.71l-36.64,6.47l-2.16,48.5l115.32,40.96l-1.08,33.41l16.17,12.93l-2.16,42.03l-20.48,6.47l22.63,12.93h24.79l9.7,9.7v19.4 l-14.01,10.78V2281.49z"></path>
+		<path class="st4" d="M1866.08,1734.22c-24.15,0-43.73,21.75-43.73,48.58c0,26.83,43.46,109.46,43.46,109.46 s43.99-82.63,43.99-109.46C1909.81,1755.97,1890.23,1734.22,1866.08,1734.22z M1866.08,1803.77c-13.13,0-23.77-10.28-23.77-22.95 c0-12.68,10.64-22.95,23.77-22.95s23.77,10.28,23.77,22.95C1889.85,1793.49,1879.21,1803.77,1866.08,1803.77z"></path>
+		<text transform="matrix(1 0 0 1 1725.8291 1964.1979)"><tspan class="st4 st5 st6" x="0" y="0">Southern</tspan><tspan class="st4 st5 st6" x="31.44" y="58.62">Interior</tspan></text>
+
+		</a>
+
+	</svg>
+</div>
+<details>
+	<summary>Text version</summary>
+	<ul>
+		<li><a href="#anchor0">North</a></li>
+		<li><a href="#anchor1">Southern Interior</a></li>
+		<li><a href="#anchor2">Vancouver Island and Coast</a></li>
+		<li><a href="#anchor3">Mainland / Southern</a></li>
+	</ul>
+</details>
+
+<h2 id="anchor0">North</h2>
+<p>Lorem ipsum</p>
+<h2 id="anchor1">Southern Interior</h2>
+<p>Lorem ipsum</p>
+<h2 id="anchor2">Vancouver Island and Coast</h2>
+<p>Lorem ipsum</p>
+<h2 id="anchor3">Mainland / Southern</h2>
+<p>Lorem ipsum</p>