mirror
/
badgen
kopia lustrzana https://github.com/badgen/badgen
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

fix: add edge cases for quotes, use sanitize function for aria-label (#63)

pull/65/head
Evelyn Hathaway 2020-07-06 21:56:54 -07:00 zatwierdzone przez GitHub
rodzic e8da026791
commit c150c95057
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
3 zmienionych plików z 14 dodań i 13 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
preview/preview.md
Wyświetl plik

@ -60,4 +60,4 @@
## Edge Cases ## Edge Cases
![](/<{[(&)]}>/<{[(&)]}>) ![](/'"<{[(&)]}>"'/'"<{[(&)]}>"')

19
src/index.ts
Wyświetl plik

@ -52,7 +52,7 @@ export function badgen ({
const accessibleText = createAccessibleText({label, status}) const accessibleText = createAccessibleText({label, status})
if (style === 'flat') { 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> <title>${accessibleText}</title>
<g> <g>
<rect fill="#${labelColor}" width="${sbRectWidth}" height="200"/> <rect fill="#${labelColor}" width="${sbRectWidth}" height="200"/>
@ -68,7 +68,7 @@ export function badgen ({
</svg>` </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> <title>${accessibleText}</title>
<linearGradient id="a" x2="0" y2="100%"> <linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-opacity=".1" stop-color="#EEE"/> <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
@ -100,7 +100,7 @@ function bare ({ status, color, style }) {
status = sanitize(status) status = sanitize(status)
if (style === 'flat') { 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> <title>${status}</title>
<g> <g>
<rect fill="#${color}" x="0" width="${stRectWidth}" height="200"/> <rect fill="#${color}" x="0" width="${stRectWidth}" height="200"/>
@ -112,7 +112,7 @@ function bare ({ status, color, style }) {
</svg>` </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> <title>${status}</title>
<linearGradient id="a" x2="0" y2="100%"> <linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-opacity=".1" stop-color="#EEE"/> <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
@ -131,11 +131,12 @@ function bare ({ status, color, style }) {
} }
function sanitize (str: string): string { function sanitize (str: string): string {
return str.replace(/\u0026/g, '&amp;').replace(/\u003C/g, '&lt;') return str
} .replace(/\u0026/g, '&amp;')
.replace(/\u003C/g, '&lt;')
function sanitizeAttribute (str: string): string { .replace(/\u003E/g, '&gt;')
return str.replace(/\u0022/g, '\"') .replace(/\u0022/g, '&quot;')
.replace(/\u0027/g, '&apos;')
} }
interface AccessibleTextProps { interface AccessibleTextProps {

6
tap-snapshots/test-badgen.spec.ts-TAP.test.js
Wyświetl plik

@ -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`] = ` 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> <title>v1.0.0</title>
<linearGradient id="a" x2="0" y2="100%"> <linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-opacity=".1" stop-color="#EEE"/> <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`] = ` 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> <title>v1.0.0</title>
<linearGradient id="a" x2="0" y2="100%"> <linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-opacity=".1" stop-color="#EEE"/> <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`] = ` 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> <title>v1.0.0</title>
<g> <g>
<rect fill="#08C" x="0" width="470" height="200"/> <rect fill="#08C" x="0" width="470" height="200"/>