Screereader считывает мою строку таблицы как «кликабельную», хотя она не кликабельна - PullRequest
0 голосов
/ 02 марта 2020

У меня есть эта таблица (кодовое обозначение здесь) , и строки не активируются при большом экране, но программа чтения с экрана считывает их как интерактивные. Когда таблица маленькая, строки кликабельны. У меня нет каких-либо якорных тегов или чего-либо, что делало бы строки кликабельными при большом экране, но NVDA считывает строки как «кликабельные строки». Как мне сделать так, чтобы программа чтения с экрана не читала строки как кликабельные?

<table class="ewma-table table">
    <thead>
        <tr class="gradient-primary-blue">
            <th scope="col" id="dt-0" class="width-l hidden-xs hidden-sm">
                Date/Time
            </th>
            <th scope="col" id="dt-0" class="visible-xs visible-sm mobile-header">
                All Transactions
            </th>
            <th scope="col" id="dt-1" class="width-l visible-lg visible-md">
                Type
            </th>
            <th scope="col" id="dt-2" class="width-xxl visible-lg visible-md">
                Description
            </th>
            <th scope="col" id="dt-3" class="width-xl visible-lg visible-md">
                Transaction ID
            </th>
            <th scope="col" id="dt-4" class="width-xxl hidden-lg hidden-md">
                Transaction ID
            </th>
            <th scope="col" id="dt-5" class="width-l hidden-lg hidden-md">
                Description
            </th>
            <th scope="col" id="dt-6" class="width-l visible-lg visible-md">
                Wallet
            </th>
            <th scope="col" id="dt-7" class="width-l visible-lg visible-md">
                Amount
            </th>
            <th scope="col" id="dt-8" class="width-l visible-lg visible-md">
                End Balance
            </th>
            <th scope="col" id="dt-9" class="hidden-lg hidden-md">

            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="collapse-accordion bottom-border" tabindex="">
            <td class="width-l collapse-accordion" data-label="Date/Time" headers="dt-0">
                <button class="sr-only hidden-lg hidden-md">Expand transaction details</button>
                <span class="displayNameMobile">
                    <span class="hidden-md hidden-lg">
                        Stake
                        <span aria-label="hidden">-</span>
                        Gaming
                    </span>
                    <span class="newLine dateTimeFont">03/02/2020 04:02:59&nbsp;AM ET</span>
                </span>
            </td>
            <td data-label="Type" headers="dt-1" class="width-l visible-lg visible-md collapse-accordion">
                   <span><span><span class="winner-label-descr">
                            Gaming<br>
                            Stake
                        </span></span></span> </td>
            <td data-label="Description" headers="dt-2" class="width-xxl visible-lg visible-md collapse-accordion">
                   <span><span><span class="winner-label-descr alignRight">
                            hasan
                        </span></span></span> </td>
            <td data-label="Transaction ID" headers="dt-3" class="width-xl visible-lg visible-md collapse-accordion">
                   <span><span><span class="winner-label-descr alignRight">
                            76e9a69-1
                        </span></span></span> </td>
            <td data-label="Transaction ID" headers="dt-4" class="width-xxl hidden-lg hidden-md collapse-accordion">
                   <span><span><span class="winner-label-descr alignRight">
                            7ea4d26e9a69-1
                        </span></span></span> </td>
            <td data-label="Description" headers="dt-5" class="width-l hidden-lg hidden-md collapse-accordion">
                   <span><span><span class="winner-label-descr alignRight">
                            hosein
                        </span></span></span> </td>
            <td data-label="Wallet" headers="dt-6" class="width-l visible-lg visible-md collapse-accordion">
                   <span><span><span class="winner-label-descr"><span>
                                gholam<br></span></span></span></span> </td>
            <td data-label="Amount" headers="dt-7"
                class="width-l currency-right visible-lg visible-md collapse-accordion">
                   <span><span><span class="winner-label-descr"><span>
                                -$6.00 <br></span></span></span></span> </td>
            <td data-label="End Balance" headers="dt-8"
                class="width-l currency-right visible-lg visible-md collapse-accordion">
                   <span><span><span class="winner-label-descr"><span>
                                $10,011.00 <br></span></span></span></span> </td>
            <td data-label="" headers="dt-9" class="displayNone hidden-lg hidden-md collapse-accordion">
                   <span>
                    <div>
                        <div class="mobileViewRow">
                            <div class="mobileRowHeader">
                                <div>Wallet</div>
                                <div>Amount</div>
                                <div>End Balance</div>
                            </div> <span class="winner-label-descr"><span class="newLine alignRight">Cash</span> <span
                                    class="newLine alignRight">-$6.00</span> <span
                                    class="newLine alignRight">$10,011.00</span></span>
                        </div>
                    </div>
                </span> </td>
        </tr> 
    </tbody>
</table>
...