JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<h3>First example: working</h3>
    <p>Example from w3c that works out of the box.</p>
    
    <div style="border: 1px solid black; padding: 20px">
    <div id="txtboxMultilineLabel">Enter the tags for the article</div>
    <div
    contenteditable="true"
    aria-multiline="true"
    aria-labelledby="txtboxMultilineLabel"
    aria-readonly="true"></div>
    </div>

    <!-- Second example: Would expect this to work since it is similar to example one but it doesn't --> 
    <h3>Second example: Would expect this to work since it is similar to example one but it doesn't</h3>
    <p>However, in the accessibility three it says Editable: richtext and I am able to edit by clicking the table cell and adding a new value</p>

    <div style="border: 1px solid black; padding: 20px">
    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>

    <table>
        <tr>
            <td aria-labelledby="one" contenteditable="true">1</td>
            <td aria-labelledby="two" contenteditable="true">2</td>
            <td aria-labelledby="three" contenteditable="true">3</td>
        </tr>
     </table>
     </div>


    <!-- Third example: With table and aria-labelledby, workaround? -->
    <h3>Third example: With table and aria-labelledby, workaround?</h3>
    <p>Table cells are now interpreted as groups and editable comes between value and group. Format is then cellValue, editable, group. When the first example will give me cellValue, group, editable which might be more preferred.
        This example seems to be creating a lot of unecessary verbosity. But not sure how contenteditable works with table cells since it is not working.
    </p>

    <div style="border: 1px solid black; padding: 20px">
     <table>
        <tr>
            <td aria-labelledby="one editable" contenteditable="true" id="one">1</td>
            <td aria-labelledby="two editable" contenteditable="true" id="two">2</td>
            <td aria-labelledby="three editable"...