Chart entries reading and focus order may be confusing

[aardrian]

Describe the bug

When navigating the charts with a browser / screen reader pairing that opts to ignore the problematic structure (see #266 Charts inaccessible to most SR users) or simply using a keyboard without a screen reader, the items are read from what is visually the last item and then in reverse visual and conceptual order.

A user might expect to put focus on the top-most item first or hear that same item first, not last. Instead the last item of the content is the first node in the DOM. The entire set is reversed in the DOM.

Steps to reproduce the bug

1. Navigate to People on the Resources page.
2. Choose the "Other Answers" tab, leaving the default chart view.
3. Using just your keyboard, navigate into the tab panel and into the chart.
4. Attempt to navigate from visually the top-most entry down.
5. Fire up NVDA or TalkBack with Firefox.
6. Repeat steps 1 through 4.
7. Observe the last item is announced first, with no corresponding number value.

Expected Behavior

• The top-most item receives focus first.
• With a screen reader, the top-most item is announced first along with the visible number to confirm its ranking.

Actual Behavior

• The last item receives focus first, and subsequent Tab↹ presses visually move up the list.
• With a screen reader, the last item is announced first but without any other information to confirm its ranking.

Related code

The chart listing of names is made up of this elided HTML:

[…]
<g transform="translate(0,0)">
    <g transform="translate(0,361)">
        <a href="https://adrianroselli.com/">
            <text […]>
                Adrian Roselli
            </text>
        </a>
    </g>
    <g transform="translate(0,324)">
        <a href="https://daverupert.com/">
            <text […]>
                Dave Rupert
            </text>
        </a>
    </g>
    <g transform="translate(0,287)">
        <a href="https://courses.webdevsimplified.com/">
            <text […]>
                Web Dev Simplified
            </text>
        </a>
    </g>
    <g transform="translate(0,250)">
        <a href="https://thebabydino.github.io/">
            <text […]>
                Ana Tudor
            </text>
        </a>
    </g>
    […]
</g>
[…]

Note the last person on the list appears first in the DOM (I only brought in the bottom four).

Additional Context

The code as shown is problematic under the following WCAG 2.1 Success Criteria:

• 1.3.2 Meaningful Sequence (because the meaning of the ranking is reversed);
• 2.4.3 Focus Order (because the user starts at the opposite end of where they expect to go, and can cause viewport jump).

The translate() function is moving the nodes into a visual order reversed from their position in the DOM. That means it is possible to re-order the DOM without changing the visual appearance. This may be a matter of reading an array in reverse order to populate the SVG.

It is critical that the corresponding numbers also get re-ordered to match. A screen reader user exploring the content will draw the wrong conclusions from its structure now and also if the names are re-ordered without the numbers.

See my suggestion to convert this to a programmatic table in the linked issue. That might make this entire chart easier to manage (for authors and users).