"Compare Date" button in charts is inaccessible to keyboard users

Describe the bug

When navigating the chart view via keyboard I cannot put focus on nor activate the "Compare Data" control.

Browser

Firefox 116
Chrome 116
Safari 16.5.1

Steps to reproduce the bug

Navigate to People on the Resources page.
Choose the "Other Answers" tab.
Navigate through the nested tabs ("Chart", "Data", "Share").
Press arrow keys, Tab↹, or any other key to get to the "Compare Data" control.
Observe it is inaccessible with keyboard alone.

Expected Behavior

I can navigate to the "Compare Data" control with arrow keys, as if it were another tab.
Failing that, I can Tab↹ to the "Compare Data" control.

Actual Behavior

I cannot navigate to the "Compare Data" control with arrow keys.
I cannot Tab↹ to the "Compare Data" control.

Related code

The chart is made up of this elided HTML:

<div onclick="[…]">
    <span […] data-state="closed" onclick="[…]">
        <svg […]>
            […]
        </svg>
        <span class="sr-only">
            Compare Data
        </span>
    </span>
</div>

Note there is a click handler on the wrapper <div> and another on the nested <span>.

Also note that the nested <span> has a data-state attribute, which itself has no meaning to browsers.

Also also note that the SVG is not hidden from AT.

Additional Context

The code as shown violates the following WCAG 2.1 Success Criteria:

2.1.1 Keyboard (because it is inoperable by keyboard);
1.1.1 Non-text Content (because the SVG has no text alternative);
4.1.2 Name, Role Value (because the control does not programmatically convey that it opens a dialog).

Consider merging the <div> and <span> into a <button>. This will get you keyboard support for free and you can keep the click handlers.

For the nested SVG, add aria-hidden="true" so it is not exposed to screen readers.

Instead of the data-state attribute, consider adding aria-haspopup="dialog" to the <button>, as support is improving now that NVDA has a fix coming.

Devographics / Monorepo