Custom Elements に aria-* 属性をつけることを許す場合の実装

<app-icon type="plus" size="16" aria-label="アイテムを追加">

<app-icon type="plus" size="16" aria-labelledby="add-new-item">
<div id="add-new-item">アイテムを追加</div>

class AppIcon extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.render()
  }

  render() {
    return html`
      <div>
        <svg> ... </svg>
      </div>
    `
  }
}

  get ariaLabel() {
    return this.getAttribute('aria-label') ?? this.getAttribute('type') ?? ''
  }

  render() {
    return html`
      <!-- これ ↓ をやることに意味がある？ -->
      <div role="img" aria-label="${this.ariaLabel}">
        <svg> ... </svg>
      </div>
    `
  }

  render() {
    const mode = this.mode || 'md';
    const flipRtl =
      this.flipRtl ||
      (this.ariaLabel &&
        (this.ariaLabel.indexOf('arrow') > -1 || this.ariaLabel.indexOf('chevron') > -1) &&
        this.flipRtl !== false);

    return (
      <Host
        role="img"
        class={{
          [mode]: true,
          ...createColorClasses(this.color),
          [`icon-${this.size}`]: !!this.size,
          'flip-rtl': !!flipRtl && (this.el.ownerDocument as Document).dir === 'rtl',
        }}
      >
        {Build.isBrowser && this.svgContent ? (
          <div class="icon-inner" innerHTML={this.svgContent}></div>
        ) : (
          <div class="icon-inner"></div>
        )}
      </Host>
    );
  }

    expect(root).toEqualHtml(`
      <ion-icon class="md" role="img" aria-hidden="true">
        <mock:shadow-root>
          <div class="icon-inner"></div>
        </mock:shadow-root>
      </ion-icon>
    `);

type Props = {
  type: ...
  size: number
} & (
  // どれかは必須！
  | {
    'aria-label': string
  }
  | {
    'aria-labelledby': string
  }
  | {
    'aria-hidden': boolean
  }
)

declare global {
  export namespace JSX {
    interface IntrinsicElements {
      'app-icon': Props
    }
  }
}