JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<!-- As aria labels -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150px" height="150px" id="labeltest">
    <title>Aria label test</title>
    <g>
        <path d="M10 10L50 50L0 50Z" stroke="black" role="img" tabindex="-1" aria-label="First point" id="fp" />
        <circle cx="10" cy="10" r="6" fill="red" role="img" tabindex="-1" aria-label="Second point" id="sp" />
    </g>
</svg>


<!-- As title/desc -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150px" height="150px" id="titletest">
    <title>Title/desc test</title>
    <g>
        <path d="M10 10L50 50L0 50Z" stroke="black" aria-labelledby="fpt" aria-describedby="fpd" tabindex="-1" id="fp">
            <title id="fpt">First point title</title>
            <desc id="fpd">First point description</desc>
        </path>
        <circle cx="10" cy="10" r="6" fill="red" aria-labelledby="spt" aria-describedby="spd" tabindex="-1" id="sp">
            <title id="spt">Second point title</title>
            <desc id="spd">Second point description</desc>
        </circle>
    </g>
</svg>


<!-- As table -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150px" height="150px" id="tabletest">
    <title>Table test</title>
    <g role="grid" aria-readonly="true">
        <g role="row">
            <path d="M10 10L50 50L0 50Z" stroke="black" role="gridcell" tabindex="-1" aria-label="First point" id="fp" />
            <circle cx="10" cy="10" r="6" fill="red" role="gridcell" tabindex="-1" aria-label="Second point" id="sp" />
        </g>
    </g>
</svg>


<!-- As table w/title -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150px" height="150px" id="tabletest2">
    <title>Table test 2</title>
    <g role="grid" aria-readonly="true">
        <g role="row">
            <path d="M10 10L50 50L0 50Z" stroke="black" role="gridcell" tabindex="-1"...

JavaScript

document.getElementById('focusfirst').onclick = function() {
    document.getElementById('labeltest').getElementById('fp').focus();
};

document.getElementById('focussecond').onclick = function() {
    document.getElementById('titletest').getElementById('fp').focus();
};

document.getElementById('focusthird').onclick = function() {
    document.getElementById('tabletest').getElementById('fp').focus();
};

document.getElementById('focusfourth').onclick = function() {
    document.getElementById('tabletest2').getElementById('fp').focus();
};