SVG Graph with list accessibility role not getting displayed as a list

[biharvarijozsef]

I have the following shortened code:

<svg width="1466" height="270" class="servicedashboardsankey3">
    <g role="list" class="servicedashboardsankey3links" fill="none" stroke="#000" stroke-opacity="0.2">
        <path d="M31,205.5774647887323C195.25,205.5774647887323,195.25,183.66197183098583,359.5,183.66197183098583"
            tabindex="0" role="listitem" aria-roledescription="link"
            class="servicedashboardsankey3sankeylink ea6_cr3  "
            aria-label="Link from Event Age >7d to CI Criticality LOW, 248 Events" stroke-width="79.17370892018779"
            stroke="#cccccc">
            <title>Event Age &gt;7d → CI Criticality LOW
                248 Events</title>
        </path>
        <path d="M389.5,151.8967136150234C553.75,151.8967136150234,553.75,147.64319248826294,718,147.64319248826294"
            tabindex="0" role="listitem" aria-roledescription="link"
            class="servicedashboardsankey3sankeylink cr3_sv3  "
            aria-label="Link from CI Criticality LOW to Event Severity MINOR, 345 Events"
            stroke-width="110.14084507042253" stroke="#cccccc">
            <title>CI Criticality LOW → Event Severity MINOR
                345 Events</title>
        </path>
        <path d="M748,133.75586854460096C912.25,133.75586854460096,912.25,148.66301962145965,1076.5,148.66301962145965"
            tabindex="0" role="listitem" aria-roledescription="link"
            class="servicedashboardsankey3sankeylink sv3_ti6  "
            aria-label="Link from Event Severity MINOR to Ticket Priority EMPTY, 518 Events"
            stroke-width="165.37089201877933" stroke="#ccc">
            <title>Event Severity MINOR → Ticket Priority EMPTY
                518 Events</title>
        </path>
    </g>
    <g role="list" class="servicedashboardsankey3nodes">
        <g tabindex="0" role="listitem" aria-roledescription="node"
            aria-label="Node <1h of category Event Age, 3 Events"
            class="servicedashboardsankey3sankeynode ea1  ">
            <rect x="1" y="10.000000000000002" height="0.9577464788732328" width="30" fill="#d90000"></rect><text x="37"
                y="10.478873239436618" dy="0.35em" text-anchor="start">&lt;1h</text>
            <title>&lt;1h
                3 Events</title>
        </g>
        <g tabindex="0" role="listitem" aria-roledescription="node"
            aria-label="Node >1h and <=6h of category Event Age, 22 Events"
            class="servicedashboardsankey3sankeynode ea2  ">
            <rect x="1" y="20.957746478873233" height="7.023474178403745" width="30" fill="#FF9A1E"></rect><text x="37"
                y="24.469483568075105" dy="0.35em" text-anchor="start">&gt;1h and &lt;=6h</text>
            <title>&gt;1h and &lt;=6h
                22 Events</title>
        </g>
        <g tabindex="0" role="listitem" aria-roledescription="node"
            aria-label="Node >6h and <=1d of category Event Age, 24 Events"
            class="servicedashboardsankey3sankeynode ea3  ">
            <rect x="1" y="37.98122065727698" height="7.661971830985891" width="30" fill="#E5BD24"></rect><text x="37"
                y="41.812206572769924" dy="0.35em" text-anchor="start">&gt;6h and &lt;=1d</text>
            <title>&gt;6h and &lt;=1d
                24 Events</title>
        </g>
    </g>
</svg>

The result is this:

Expected behaviour:

Display it as a list with listitems. Or am I on the wrong track?
Thanks in advance.

[ziolko]

Hi @biharvarijozsef,

Sorry for the late reply. I am honestly not sure at this point how this should be displayed. I will run this through a few screen readers in reach back to you :)

Mateusz