fix(a11y): set role button for term

linter
diplodoc-platform · Sep 2, 2024 · 0467211 · 0467211
1 parent b9be4a2
commit 0467211
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/js/term/utils.ts b/src/js/term/utils.ts
@@ -24,12 +24,13 @@ export function setDefinitionId(definitionElement: HTMLElement, termElement: HTM
     definitionElement?.setAttribute('term-id', termId);
 }
 
-export function setDefinitonAriaLive(
+export function setDefinitonAriaAttributes(
     definitionElement: HTMLElement,
     termElement: HTMLElement,
 ): void {
     const ariaLive = termElement.getAttribute('aria-live') || 'polite';
     definitionElement?.setAttribute('aria-live', ariaLive);
+    definitionElement?.setAttribute('aria-modal', 'true');
 }
 
 export function setDefinitionPosition(
@@ -167,7 +168,7 @@ export function openDefinition(target: HTMLElement) {
     }
 
     setDefinitionId(definitionElement, target);
-    setDefinitonAriaLive(definitionElement, target);
+    setDefinitonAriaAttributes(definitionElement, target);
     setDefinitionPosition(definitionElement, target);
 
     definitionElement.classList.toggle(openClass);

diff --git a/src/transform/plugins/anchors/index.ts b/src/transform/plugins/anchors/index.ts
@@ -171,7 +171,11 @@ const index: MarkdownItPluginCb<Options> = (md, options) => {
     }
 
     md.renderer.rules.anchor_hidden_desc = function (tokens, index) {
-        return '<span class="visually-hidden" data-no-index="true">' + escapeHtml(tokens[index].content) + '</span>';
+        return (
+            '<span class="visually-hidden" data-no-index="true">' +
+            escapeHtml(tokens[index].content) +
+            '</span>'
+        );
     };
 };
 

diff --git a/src/transform/plugins/term/index.ts b/src/transform/plugins/term/index.ts
@@ -99,7 +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('role', 'button');
                     token.attrSet('aria-describedby', ':' + termKey + '_element');
                     token.attrSet('tabindex', '0');
                     token.attrSet('id', generateID());

diff --git a/src/transform/plugins/term/termDefinitions.ts b/src/transform/plugins/term/termDefinitions.ts
@@ -140,8 +140,9 @@ function processTermDefinition(
     token = new state.Token('dfn_open', 'dfn', 1);
     token.attrSet('class', 'yfm yfm-term_dfn');
     token.attrSet('id', ':' + label + '_element');
-    token.attrSet('role', 'tooltip');
+    token.attrSet('role', 'dialog');
     token.attrSet('aria-live', 'polite');
+    token.attrSet('aria-modal', 'true');
 
     state.tokens.push(token);