kopia lustrzana https://github.com/badgen/badgen
fix: add edge cases for quotes, use sanitize function for aria-label (#63)
rodzic
e8da026791
commit
c150c95057
|
@ -60,4 +60,4 @@
|
|||
|
||||
## Edge Cases
|
||||
|
||||
![](/<{[(&)]}>/<{[(&)]}>)
|
||||
![](/'"<{[(&)]}>"'/'"<{[(&)]}>"')
|
||||
|
|
19
src/index.ts
19
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, '&').replace(/\u003C/g, '<')
|
||||
}
|
||||
|
||||
function sanitizeAttribute (str: string): string {
|
||||
return str.replace(/\u0022/g, '\"')
|
||||
return str
|
||||
.replace(/\u0026/g, '&')
|
||||
.replace(/\u003C/g, '<')
|
||||
.replace(/\u003E/g, '>')
|
||||
.replace(/\u0022/g, '"')
|
||||
.replace(/\u0027/g, ''')
|
||||
}
|
||||
|
||||
interface AccessibleTextProps {
|
||||
|
|
|
@ -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"/>
|
||||
|
|
Ładowanie…
Reference in New Issue