提升React Web App中Shadow DOM内部内容的可访问性

import { useEffect, useRef } from 'react';
import ReactDOM from "react-dom";

export class WebComponent extends HTMLElement {
    connectedCallback() {
        const appContainer = document.createElement("div");
        const mountPoint = document.createElement("div");
        mountPoint.appendChild(appContainer);
        this.attachShadow({ mode: "open" }).appendChild(mountPoint);

        ReactDOM.render(
            <MainApp/>, appContainer
        )
    }
}

const MainApp = () => {
    const labelRef = useRef(null);

    useEffect(() => {
        // 创建一个 label 元素
        const labelElement = document.createElement('label');
        labelElement.textContent = 'TestBtn 的描述'; // 替换为实际的描述
        labelElement.style.display = 'none'; // 隐藏 label 元素

        // 将 label 元素添加到 Shadow DOM 外部
        if (labelRef.current && !labelRef.current.contains(labelElement)) {
            labelRef.current.parentNode.insertBefore(labelElement, labelRef.current);
        }


        return () => {
            // 组件卸载时移除 label 元素
            if (labelElement && labelElement.parentNode) {
                labelElement.parentNode.removeChild(labelElement);
            }
        };
    }, []);

    return (
        <div ref={labelRef}>
            <Button aria-label="TEST">TestBtn</Button>
        </div>
    );
}

customElements.define("web-component", WebComponent);

const MainApp = () => {
    return (
        <div role="alert">
            <h1>这是一个标题</h1>
            <p>这是一段文本内容。</p>
            <Button aria-label="TEST">TestBtn</Button>
        </div>
    );
}