fix: clipboard aria-label & term role (#490)

* fix: clipboard aria-label & term role * update snapshot
diplodoc-platform · Aug 21, 2024 · abc298f · abc298f
1 parent b4f3c2c
commit abc298f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/src/transform/plugins/code.ts b/src/transform/plugins/code.ts
@@ -7,7 +7,7 @@ const wrapInClipboard = (element: string | undefined, id: number) => {
     return `
     <div class="yfm-clipboard">
         ${element}
-        <button class="yfm-clipboard-button">
+        <button class="yfm-clipboard-button" aria-label="Copy">
             <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-icon" data-animation="${id}">
                 <path
                     fill="currentColor"

diff --git a/src/transform/plugins/term/index.ts b/src/transform/plugins/term/index.ts
@@ -99,6 +99,7 @@ const term: MarkdownItPluginCb = (md, options) => {
                     token = new state.Token('term_open', 'i', 1);
                     token.attrSet('class', 'yfm yfm-term_title');
                     token.attrSet('term-key', ':' + termKey);
+                    token.attrSet('role', 'term');
                     token.attrSet('aria-describedby', ':' + termKey + '_element');
                     token.attrSet('tabindex', '0');
                     token.attrSet('id', generateID());

diff --git a/test/__snapshots__/term.test.ts.snap b/test/__snapshots__/term.test.ts.snap
@@ -33,7 +33,7 @@ exports[`Terms Should create term in table with definition template 1`] = `
 </thead>
 <tbody>
 <tr>
-<td><i class=\\"yfm yfm-term_title\\" term-key=\\":html\\" aria-describedby=\\":html_element\\" tabindex=\\"0\\" id=\\"\\">HTML</i></td>
+<td><i class=\\"yfm yfm-term_title\\" term-key=\\":html\\" role=\\"term\\" aria-describedby=\\":html_element\\" tabindex=\\"0\\" id=\\"\\">HTML</i></td>
 <td style=\\"text-align:center\\">1993</td>
 </tr>
 </tbody>
@@ -44,13 +44,13 @@ exports[`Terms Should create term in table with definition template 1`] = `
 exports[`Terms Should create term in text with definition template 1`] = `
 "<template id=\\":html_template\\" label=\\"html\\"><dfn class=\\"yfm yfm-term_dfn\\" id=\\":html_element\\" role=\\"tooltip\\"><p>The HyperText Markup Language or <strong>HTML</strong> is the standard markup language for documents designed to be displayed in a web browser.</p>
 </dfn></template><h1>Web</h1>
-<p>The <i class=\\"yfm yfm-term_title\\" term-key=\\":html\\" aria-describedby=\\":html_element\\" tabindex=\\"0\\" id=\\"\\">HTML</i> specification</p>
+<p>The <i class=\\"yfm yfm-term_title\\" term-key=\\":html\\" role=\\"term\\" aria-describedby=\\":html_element\\" tabindex=\\"0\\" id=\\"\\">HTML</i> specification</p>
 "
 `;
 
 exports[`Terms Term should use content from include 1`] = `
 "<template id=\\":html_template\\" label=\\"html\\"><dfn class=\\"yfm yfm-term_dfn\\" id=\\":html_element\\" role=\\"tooltip\\"><p>The HyperText Markup Language or <strong>HTML</strong> is the standard markup language for documents designed to be displayed in a web browser.</p>
 </dfn></template><h1>Web</h1>
-<p>The <i class=\\"yfm yfm-term_title\\" term-key=\\":html\\" aria-describedby=\\":html_element\\" tabindex=\\"0\\" id=\\"\\">HTML</i> specification</p>
+<p>The <i class=\\"yfm yfm-term_title\\" term-key=\\":html\\" role=\\"term\\" aria-describedby=\\":html_element\\" tabindex=\\"0\\" id=\\"\\">HTML</i> specification</p>
 "
 `;