From c150c950576b64aa4946a4dc44abb5a26a7b6137 Mon Sep 17 00:00:00 2001
From: Evelyn Hathaway <git@evelyn.dev>
Date: Mon, 6 Jul 2020 21:56:54 -0700
Subject: [PATCH] fix: add edge cases for quotes, use sanitize function for
 aria-label (#63)

---
 preview/preview.md                            |  2 +-
 src/index.ts                                  | 19 ++++++++++---------
 tap-snapshots/test-badgen.spec.ts-TAP.test.js |  6 +++---
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/preview/preview.md b/preview/preview.md
index a430b04..8fce20b 100644
--- a/preview/preview.md
+++ b/preview/preview.md
@@ -60,4 +60,4 @@
 
 ## Edge Cases
 
-![](/<{[(&)]}>/<{[(&)]}>)
+![](/'"<{[(&)]}>"'/'"<{[(&)]}>"')
diff --git a/src/index.ts b/src/index.ts
index b768c69..76310ce 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -52,7 +52,7 @@ export function badgen ({
   const accessibleText = createAccessibleText({label, status})
 
   if (style === 'flat') {
-    return `<svg width="${scale * width / 10}" height="${scale * 20}" viewBox="0 0 ${width} 200" xmlns="http://www.w3.org/2000/svg"${xlink} role="img" aria-label="${sanitizeAttribute(accessibleText)}">
+    return `<svg width="${scale * width / 10}" height="${scale * 20}" viewBox="0 0 ${width} 200" xmlns="http://www.w3.org/2000/svg"${xlink} role="img" aria-label="${accessibleText}">
   <title>${accessibleText}</title>
   <g>
     <rect fill="#${labelColor}" width="${sbRectWidth}" height="200"/>
@@ -68,7 +68,7 @@ export function badgen ({
 </svg>`
   }
 
-  return `<svg width="${scale * width / 10}" height="${scale * 20}" viewBox="0 0 ${width} 200" xmlns="http://www.w3.org/2000/svg"${xlink} role="img" aria-label="${sanitizeAttribute(accessibleText)}">
+  return `<svg width="${scale * width / 10}" height="${scale * 20}" viewBox="0 0 ${width} 200" xmlns="http://www.w3.org/2000/svg"${xlink} role="img" aria-label="${accessibleText}">
   <title>${accessibleText}</title>
   <linearGradient id="a" x2="0" y2="100%">
     <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
@@ -100,7 +100,7 @@ function bare ({ status, color, style }) {
   status = sanitize(status)
 
   if (style === 'flat') {
-    return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-labeled="${sanitizeAttribute(status)}">
+    return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${status}">
   <title>${status}</title>
   <g>
     <rect fill="#${color}" x="0" width="${stRectWidth}" height="200"/>
@@ -112,7 +112,7 @@ function bare ({ status, color, style }) {
 </svg>`
   }
 
-  return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-labeled="${sanitizeAttribute(status)}">
+  return `<svg width="${stRectWidth / 10}" height="20" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${status}">
   <title>${status}</title>
   <linearGradient id="a" x2="0" y2="100%">
     <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
@@ -131,11 +131,12 @@ function bare ({ status, color, style }) {
 }
 
 function sanitize (str: string): string {
-  return str.replace(/\u0026/g, '&amp;').replace(/\u003C/g, '&lt;')
-}
-
-function sanitizeAttribute (str: string): string {
-  return str.replace(/\u0022/g, '\"')
+  return str
+    .replace(/\u0026/g, '&amp;')
+    .replace(/\u003C/g, '&lt;')
+    .replace(/\u003E/g, '&gt;')
+    .replace(/\u0022/g, '&quot;')
+    .replace(/\u0027/g, '&apos;')
 }
 
 interface AccessibleTextProps {
diff --git a/tap-snapshots/test-badgen.spec.ts-TAP.test.js b/tap-snapshots/test-badgen.spec.ts-TAP.test.js
index cea8802..14bc83b 100644
--- a/tap-snapshots/test-badgen.spec.ts-TAP.test.js
+++ b/tap-snapshots/test-badgen.spec.ts-TAP.test.js
@@ -172,7 +172,7 @@ exports[`test/badgen.spec.ts TAP generate badge with { status, icon, iconWidth }
 `
 
 exports[`test/badgen.spec.ts TAP generate bare badge with { status } > snapshot 1`] = `
-<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-labeled="v1.0.0">
+<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="v1.0.0">
   <title>v1.0.0</title>
   <linearGradient id="a" x2="0" y2="100%">
     <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
@@ -191,7 +191,7 @@ exports[`test/badgen.spec.ts TAP generate bare badge with { status } > snapshot
 `
 
 exports[`test/badgen.spec.ts TAP generate bare badge with { status, color } > snapshot 1`] = `
-<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-labeled="v1.0.0">
+<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="v1.0.0">
   <title>v1.0.0</title>
   <linearGradient id="a" x2="0" y2="100%">
     <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
@@ -210,7 +210,7 @@ exports[`test/badgen.spec.ts TAP generate bare badge with { status, color } > sn
 `
 
 exports[`test/badgen.spec.ts TAP generate bare badge with { status, style } > snapshot 1`] = `
-<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-labeled="v1.0.0">
+<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="v1.0.0">
   <title>v1.0.0</title>
   <g>
     <rect fill="#08C" x="0" width="470" height="200"/>