fix: add aria-label to textarea code preview

cds-snc · Mar 19, 2024 · 4fc2dde · 4fc2dde
1 parent 4ede843
commit 4fc2dde
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/.eleventy.js b/.eleventy.js
@@ -166,10 +166,12 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPairedShortcode('viewCode', (content, lang, id, name) => {
     const langStrings = {
       en: {
+        code: 'Code display',
         view: 'View code',
         copy: 'Copy code',
       },
       fr: {
+        code: 'TO DO',
         view: 'Voir le code',
         copy: 'Copier le code',
       },
@@ -180,7 +182,7 @@ module.exports = function (eleventyConfig) {
 
     return `
         <div class="code-showcase mb-400">
-          <textarea class="showcase text-light mb-400 p-400" id="${id}" rows="8" aria-hidden="true" readonly>${content}</textarea>
+          <textarea class="showcase text-light mb-400 p-400" id="${id}" rows="8" aria-label="${langStrings[lang].code} - ${name}" aria-hidden="true" readonly>${content}</textarea>
           <div>
             <gcds-button
               class="showcase-view-button"