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ęć

Wyświetl plik

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

Wyświetl plik

@ -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 {

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`] = `
<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"/>