1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5427],{20680:function(e,a,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/badge/badge/accessibility",function(){return t(62423)}])},62423:function(e,a,t){"use strict";t.r(a);t(67294);var n=t(3905),s=t(38409),d=t(23673);function i(e,a){if(null==e)return{};var t,n,s=function(e,a){if(null==e)return{};var t,n,s={},d=Object.keys(e);for(n=0;n<d.length;n++)t=d[n],a.indexOf(t)>=0||(s[t]=e[t]);return s}(e,a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(e);for(n=0;n<d.length;n++)t=d[n],a.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var l={};function r(e){var a=e.components,t=i(e,["components"]);return(0,n.mdx)("wrapper",Object.assign({},l,t,{components:a,mdxType:"MDXLayout"}),(0,n.mdx)("p",null,"Since the ",(0,n.mdx)("inlineCode",{parentName:"p"},"Badge")," typically serves as a visual cue, there are situations\nwhere it can be necessary to add extra cues for screen readers with the\n",(0,n.mdx)("inlineCode",{parentName:"p"},".sr-only"),"-util (used on the ",(0,n.mdx)("a",Object.assign({parentName:"p"},{href:"/components/card/wager-card"}),"WagerCard"),"):"),(0,n.mdx)("pre",null,(0,n.mdx)("code",Object.assign({parentName:"pre"},{className:"language-jsx",metastring:"noPreview label=example",noPreview:!0,label:"example"}),"<Badge>\n <span className='sr-only'>status:</span> Ny\n</Badge>\n")),(0,n.mdx)("h2",null,"Relevant WCAG Success Criteria"),(0,n.mdx)("details",null,(0,n.mdx)("summary",null,"1.4.1 Use of Color (A)"),(0,n.mdx)("blockquote",null,(0,n.mdx)("p",{parentName:"blockquote"},"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."),(0,n.mdx)("p",{parentName:"blockquote"},(0,n.mdx)("a",Object.assign({parentName:"p"},{href:"https://www.w3.org/WAI/WCAG21/Understanding/use-of-color"}),"W3C article: Understanding Success Criterion 1.4.1"))),(0,n.mdx)("h4",null,"1.4.1 and the label-component"),(0,n.mdx)("p",null,(0,n.mdx)("strong",{parentName:"p"},"Don't assign semantic meaning")," to the badge-color without other ques like text or symbols.")))}r.isMDXComponent=!0;var o=t(36485),c={accessibility:{title:"Accessibility",slug:"/components/badge/badge/accessibility"},index:{title:"Preview",slug:"/components/badge/badge"},dev:{title:"Dev",slug:"/components/badge/badge/dev"}};a.default=function(e){return(0,n.mdx)(s.Z,{title:"Accessibility",info:{entityName:"Badge",entityDisplayName:"Badge",entityPath:"/vercel/path0/node_modules/@ntds/badge/dist/Badge",version:"2.0.1",displayName:"Accessibility",packageDisplayName:"Badge",file:"/vercel/path0/node_modules/@ntds/badge/dist/Badge/Badge.test.js",relativePath:"badge/dist/Badge",packageName:"badge",componentSubPath:"/vercel/path0/pages/components/badge/badge",packagePath:"/vercel/path0/pages/components/badge",slug:"/components/badge/badge/accessibility",mdFiles:{accessibility:"/vercel/path0/node_modules/@ntds/badge/dist/Badge/Accessibility.md",index:"/vercel/path0/node_modules/@ntds/badge/dist/Badge/Guide.md",dev:"/vercel/path0/node_modules/@ntds/badge/dist/Badge/Readme.md"},mainMdFile:"/vercel/path0/node_modules/@ntds/badge/dist/Badge/Accessibility.md",docFile:"/vercel/path0/node_modules/@ntds/badge/dist/Badge/Badge.doc.json",slugMap:{accessibility:{title:"Accessibility",slug:"/components/badge/badge/accessibility"},index:{title:"Preview",slug:"/components/badge/badge"},dev:{title:"Dev",slug:"/components/badge/badge/dev"}},hasSubPages:!0,type:"packagePage"},reactDocs:o,menuMap:c},(0,n.mdx)("h1",{className:"main"},"Accessibility"),(0,n.mdx)(r,Object.assign({},e)),(0,n.mdx)(d.Z,{version:"2.0.1"}))}},36485:function(e){"use strict";e.exports=JSON.parse('{"slug":"badge","name":"Badge","srcFile":"components/badge/src/Badge/Badge.tsx","docs":{"tags":{},"filePath":"/home/runner/work/ntds/ntds/packages/components/badge/src/Badge/Badge.tsx","description":"","displayName":"Badge","methods":[],"props":{"render":{"defaultValue":null,"description":"<p>Hook into the top render method of the wrapping element</p>\\n","name":"render","declarations":[{"fileName":"badge/src/Badge/Badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(props: Omit<Props, \\"render\\" | \\"elementRef\\">) => Element"}},"elementRef":{"defaultValue":null,"description":"<p>Get the DOM-reference from the button-element</p>\\n","name":"elementRef","declarations":[{"fileName":"badge/src/Badge/Badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Ref<HTMLSpanElement>"}},"tw":{"defaultValue":null,"description":"<p>Tailwind overrides</p>\\n","name":"tw","declarations":[{"fileName":"badge/src/Badge/Badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"TwGroupKeys"}},"children":{"defaultValue":null,"description":"<p>Usually simple text, but can be anything.</p>\\n","name":"children","declarations":[{"fileName":"badge/src/Badge/Badge.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"ReactNode"}}}}}')}},function(e){e.O(0,[5681,9517,2358,9353,5689,4803,9774,2888,179],(function(){return a=20680,e(e.s=a);var a}));var a=e.O();_N_E=a}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.