feat: add basic accessibility attributes to image cropping and code m…

…odule(#697)
imzbf · Oct 17, 2024 · 417c818 · 417c818
1 parent ca5df2c
commit 417c818
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 30 deletions.
diff --git a/packages/MdEditor/layouts/Content/markdownIt/code/index.ts b/packages/MdEditor/layouts/Content/markdownIt/code/index.ts
@@ -87,15 +87,19 @@ const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
       tokens[idx].info = tokens[idx].info.replace(mandatoryRe, '');
 
       const codeRendered = defaultRender!(tokens, idx, options, env, slf);
-      return `<${tagContainer} ${slf.renderAttrs(tmpToken as Token)}>
-        <${tagHeader} class="${prefix}-code-head">
-          <div class="${prefix}-code-flag"><span></span><span></span><span></span></div>
-          <div class="${prefix}-code-action">
-            <span class="${prefix}-code-lang">${tokens[idx].info.trim()}</span>
-            <span class="${prefix}-copy-button" data-tips="${codeCodeText}"${isIcon ? ' data-is-icon=true' : ''}>${copyBtnHtml}</span>
-            ${tagContainer === 'details' ? collapseTips : ''}
-          </div>
-        </${tagHeader}>${codeRendered}</${tagContainer}>`;
+      return `
+        <${tagContainer} ${slf.renderAttrs(tmpToken as Token)}>
+          <${tagHeader} class="${prefix}-code-head">
+            <div class="${prefix}-code-flag"><span></span><span></span><span></span></div>
+            <div class="${prefix}-code-action">
+              <span class="${prefix}-code-lang">${tokens[idx].info.trim()}</span>
+              <span class="${prefix}-copy-button" data-tips="${codeCodeText}"${isIcon ? ' data-is-icon=true' : ''}>${copyBtnHtml}</span>
+              ${tagContainer === 'details' ? collapseTips : ''}
+            </div>
+          </${tagHeader}>
+          ${codeRendered}
+        </${tagContainer}>
+      `;
     }
 
     let token,
@@ -128,31 +132,59 @@ const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
 
       checked = i - idx > 0 ? '' : 'checked';
 
-      labels += `<li>
-          <input type="radio" id="label-${prefix}-codetab-label-1-${_opts.editorId}-${idx}-${i - idx}" name="${prefix}-codetab-label-${_opts.editorId}-${idx}" class="${className}" ${checked}>
-          <label for="label-${prefix}-codetab-label-1-${_opts.editorId}-${idx}-${i - idx}" onclick="this.getRootNode().querySelectorAll('.${className}').forEach(e => e.click())">${
-            tab || getLangName(token)
-          }</label>
+      labels += `
+        <li>
+          <input
+            type="radio"
+            id="label-${prefix}-codetab-label-1-${_opts.editorId}-${idx}-${i - idx}"
+            name="${prefix}-codetab-label-${_opts.editorId}-${idx}"
+            class="${className}"
+            ${checked}
+          >
+          <label
+            for="label-${prefix}-codetab-label-1-${_opts.editorId}-${idx}-${i - idx}"
+            onclick="this.getRootNode().querySelectorAll('.${className}').forEach(e => e.click())"
+          >
+            ${tab || getLangName(token)}
+          </label>
         </li>`;
 
-      pres += `<input type="radio" name="${prefix}-codetab-pre-${_opts.editorId}-${idx}" class="${className}" ${checked}>
-      ${defaultRender!(tokens, i, options, env, slf)}`;
-
-      langs += `<input type="radio" name="${prefix}-codetab-lang-${_opts.editorId}-${idx}" class="${className}" ${checked}>
-      <span class=${prefix}-code-lang>${getLangName(token)}</span>`;
+      pres += `
+        <div role="tabpanel">
+          <input
+            type="radio"
+            name="${prefix}-codetab-pre-${_opts.editorId}-${idx}"
+            class="${className}"
+            ${checked}
+            role="presentation">
+          ${defaultRender!(tokens, i, options, env, slf)}
+        </div>`;
+
+      langs += `
+        <input
+          type="radio"
+          name="${prefix}-codetab-lang-${_opts.editorId}-${idx}"
+          class="${className}"
+          ${checked}
+          role="presentation">
+        <span class=${prefix}-code-lang role="note">${getLangName(token)}</span>`;
     }
 
-    return `<${tagContainer} ${slf.renderAttrs(tmpToken as Token)}>
-    <${tagHeader} class="${prefix}-code-head">
-      <div class="${prefix}-code-flag">
-        <ul class="${prefix}-codetab-label">${labels}</ul>
-      </div>
-      <div class="${prefix}-code-action">
-        <span class="${prefix}-codetab-lang">${langs}</span>
-        <span class="${prefix}-copy-button" data-tips="${codeCodeText}"${isIcon ? ' data-is-icon=true' : ''}>${copyBtnHtml}</span>
-        ${tagContainer === 'details' ? collapseTips : ''}
-      </div>
-    </${tagHeader}>${pres}</${tagContainer}>`;
+    return `
+      <${tagContainer} ${slf.renderAttrs(tmpToken as Token)}>
+        <${tagHeader} class="${prefix}-code-head">
+          <div class="${prefix}-code-flag">
+            <ul class="${prefix}-codetab-label" role="tablist">${labels}</ul>
+          </div>
+          <div class="${prefix}-code-action">
+            <span class="${prefix}-codetab-lang">${langs}</span>
+            <span class="${prefix}-copy-button" data-tips="${codeCodeText}"${isIcon ? ' data-is-icon=true' : ''}>${copyBtnHtml}</span>
+            ${tagContainer === 'details' ? collapseTips : ''}
+          </div>
+        </${tagHeader}>
+        ${pres}
+      </${tagContainer}>
+    `;
   };
 
   md.renderer.rules.fence = fenceGroup;

diff --git a/packages/MdEditor/layouts/Modals/Clip.tsx b/packages/MdEditor/layouts/Modals/Clip.tsx
@@ -204,6 +204,7 @@ export default defineComponent({
           type="file"
           multiple={false}
           style={{ display: 'none' }}
+          aria-label={ult.value.imgTitleItem?.upload}
         />
       </Modal>
     );