✨ Add label attribute for accessible name

Author: heppokofrontend

src/class/HTMLCodeBlockElement.ts

@@ -39,7 +39,30 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     return endgine.highlightAuto(src);
   }
 
-  #shadowRoot: ShadowRoot;
+  #slots = (() => {
+    /**
+     * @param name - The value of name attribute for the slot element
+     * @returns - The slot element
+     */
+    const mkslot = (name: string, id?: string) => {
+      const slot = document.createElement('slot');
+
+      slot.name = name;
+
+      if (id) {
+        slot.id = id;
+      }
+
+      return slot;
+    };
+
+    return {
+      name: mkslot('name', 'name'),
+      copyButton: mkslot('copy-button'),
+      code: mkslot('code'),
+    };
+  })();
+  #a11yName: HTMLElement;
   #codeBlock: HTMLElement;
   #codeWrap: HTMLPreElement;
   /** Actual value of the accessor `value` */
@@ -50,22 +73,24 @@ export default class HTMLCodeBlockElement extends HTMLElement {
   #language: string = '';
   /** Actual value of the accessor `controls` */
   #controls: boolean = false;
-
   /** Outputs the resulting syntax-highlighted markup to the DOM. */
   #render = function (this: HTMLCodeBlockElement) {
     if (!this.parentNode) {
       return;
     }
 
     /** The resulting syntax-highlighted markup */
-    const markup = HTMLCodeBlockElement.highlight(this.#value, {
+    const {value: markup} = HTMLCodeBlockElement.highlight(this.#value, {
       language: this.#language,
-    }).value;
+    });
 
     // initialize
     this.textContent = '';
+    this.#a11yName.textContent = this.#label;
+    this.#slots.name.hidden = !this.#label;
     this.#codeBlock.textContent = '';
     this.#codeBlock.insertAdjacentHTML('afterbegin', markup);
+    this.append(this.#a11yName);
     this.append(this.#codeWrap);
   }
 
@@ -87,14 +112,13 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     return this.#label;
   }
 
-  set label(name: string) {
-    // TODO: Accessiblity Treeにアクセシブルネームを提供する
-    this.#label = name || '';
-
-    if (this.#label) {
-      this.setAttribute('label', name);
-    } else {
+  set label(value: string) {
+    if (value === null) {
+      this.#label = '';
       this.removeAttribute('label');
+    } else {
+      this.#label = String(value);
+      this.setAttribute('label', this.#label);
     }
 
     this.#render();
@@ -108,13 +132,13 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     return this.#language;
   }
 
-  set language(name: string) {
-    this.#language = name || '';
-
-    if (this.#language) {
-      this.setAttribute('language', name);
-    } else {
+  set language(value: any) {
+    if (value === null) {
+      this.#language = '';
       this.removeAttribute('language');
+    } else {
+      this.#language = String(value);
+      this.setAttribute('language', this.#language);
     }
 
     this.#render();
@@ -128,9 +152,9 @@ export default class HTMLCodeBlockElement extends HTMLElement {
     return this.#controls;
   }
 
-  set controls(flag: boolean) {
-    // TODO: コピーボタン、ラベルの表示切り替え
-    this.#controls = flag;
+  set controls(value: boolean) {
+    // TODO: コピーボタンの表示切り替え
+    this.#controls = value;
 
     if (this.#controls) {
       this.setAttribute('controls', '');
@@ -164,7 +188,7 @@ export default class HTMLCodeBlockElement extends HTMLElement {
       // string
       case 'label':
       case 'language':
-        this[attrName] = newValue || '';
+        this[attrName] = newValue;
 
         break;
 
@@ -181,41 +205,74 @@ export default class HTMLCodeBlockElement extends HTMLElement {
   constructor() {
     super();
 
+    /* -------------------------------------------------------------------------
+     * Setup Shadow DOM contents
+     * ---------------------------------------------------------------------- */
     /**
-     * @param name - The value of name attribute for the slot element
-     * @returns - The slot element
+     * The container of minimum text that will be read even
+     * if the accessible name (label attribute value) is omitted.
      */
-    const mkslot = (name: string) => {
-      const slot = document.createElement('slot');
-
-      slot.name = name;
+    const a11yNamePrefix = (() => {
+      const span = document.createElement('span');
+
+      span.id = 'semantics';
+      span.hidden = true;
+      span.textContent = 'Code Block';
+
+      return span;
+    })()
+    /** Container of accessible names (label attribute values). */
+    const a11yName = (() => {
+      const span = document.createElement('span');
+
+      span.slot = 'name';
+      span.textContent = this.getAttribute('label') || '';
+
+      return span;
+    })();
+    const codeElm = (() => {
+      const code = document.createElement('code');
+
+      code.tabIndex = 0;
+      code.className = 'hljs'; // TODO: Make it variable
+
+      return code;
+    })();
+    const preElm = (() => {
+      const pre = document.createElement('pre');
+
+      pre.slot = 'code';
+      pre.append(codeElm);
+
+      return pre;
+    })();
+    const container = (() => {
+      const div = document.createElement('div');
+
+      div.append(...Object.values(this.#slots));
+      div.setAttribute('role', 'group');
+      div.setAttribute('aria-labelledby', 'semantics name');
+
+      return div;
+    })();
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+    });
 
-      return slot;
-    }
-    const slots = [
-      mkslot('label'),
-      mkslot('copy-button'),
-      mkslot('code'),
-    ];
-    const pre = document.createElement('pre');
-    const code = document.createElement('code');
+    shadowRoot.append(a11yNamePrefix);
+    shadowRoot.append(container);
 
-    code.tabIndex = 0;
-    code.className = 'hljs'; // TODO: Make it variable
-    pre.slot = 'code';
-    pre.append(code);
 
-    // Hard private props initialize
-    this.#value = (this.textContent || '').replace(/^\n/, '');
-    this.#label = this.getAttribute('label') || '';
+    /* -------------------------------------------------------------------------
+     * Hard private props initialize
+     * ---------------------------------------------------------------------- */
+    this.#value = (this.textContent || '').replace(/^\n/, '').replace(/\n$/, '');
+    this.#label = a11yName.textContent || '';
     this.#language = this.getAttribute('language') || '';
     this.#controls = this.getAttribute('controls') !== null;
-    this.#shadowRoot = this.attachShadow({
-      mode: 'closed',
-    });
-    this.#codeBlock = code;
-    this.#codeWrap = pre;
-    this.#shadowRoot.append(...slots);
+    this.#a11yName = a11yName;
+    this.#codeBlock = codeElm;
+    this.#codeWrap = preElm;
   }
 }
 

src/utils/add-style.ts

@@ -16,9 +16,14 @@ style.textContent = `
     top: 0;
     left: 0;
     padding: 0 5px;
+    max-width: 90%;
     color: #fff;
+    white-space: pre;
     line-height: 1.5;
+    overflow: hidden;
+    text-overflow: ellipsis;
     background: #75758a;
+    box-sizing: border-box;
   }
   code-block pre,
   code-block code {
@@ -33,7 +38,7 @@ style.textContent = `
     font-size: 100%;
     overflow-x: auto;
   }
-  code-block[label] pre code {
+  code-block[label]:not([label=""]) pre code {
     padding-top: 2em;
   }
   `;