Pronouncing text two times while selecting a button in a role=application > role=grid > role=gridcell > button

[daKmoR]

Steps to reproduce:

1. Visit in the browser https://cdpn.io/daKmoR/debug/ZEeEMYw/PNrvYXZdDWYM
2. Use Tabs to go to 6th of May 2021
3. Use arrow left/right

PS: the example above is a simple reproduction which only supports left/right

Actual behavior:

Using arrow keys each day gets pronounced twice

Expected behavior:

Using arrow keys each day should be pronounced once

Background

The HTML in question looks simplified like this

<div role="application"
  <table role="grid">
    <tr role="row">
      <td role="gridcell">
        <div role="button" tabindex="0" aria-pressed="false" aria-current="date" aria-disabled="false">
          <span class="calendar__day-button__text">6</span>
          <span class="u-sr-only">May 2021 Thursday</span>
        </div>
      </td>
    </tr>
  </table>
</div>      

To see the full code please look at https://codepen.io/daKmoR/pen/ZEeEMYw

I tried without role="application" but then it selects each letter individually.
I tried replacing role="button" with role="gridcell" but it still pronounced double (and it would not be pronounced as clickable anymore)

My task is to fix the remaining a11y issues for the lion calendar but I can't find any way for NVDA 😅

PS: You can see the current live implementation here https://lion-web.netlify.app/components/inputs/calendar/overview/
PPS: this was also tested in JAWS + Chrome and Safari + VoiceOver which both pronounce the date only once.

System configuration

NVDA installed/portable/running from source:

installed

NVDA version:

NVDA version 2020.4

Windows version:

Tested in Windows 8.1

Name and version of other software in use when reproducing the issue:

Tested in
Chrome 90
Firefox 88

Other information about your system:

Other questions

Does the issue still occur after restarting your computer?

yes

Have you tried any other versions of NVDA? If so, please report their behaviors.

no

If add-ons are disabled, is your problem still occurring?

no add-ons

Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?

did not try

[daKmoR]

Adding log of NVDA (relevant part)

3 May 2021 Monday Monday column 2
3 May 2021 Monday toggle button not pressed row 3
4 May 2021 Tuesday Tuesday column 3
4 May 2021 Tuesday toggle button not pressed row 3
5 May 2021 Wednesday Wednesday column 4
5 May 2021 Wednesday toggle button not pressed row 3
6 May 2021 Thursday Thursday column 5
6 May 2021 Thursday toggle button not pressed row 3 current date

so we want to stop reading out those like lines 3 May 2021 Monday Monday column 2

PS: adding the screenshot as well

[feerrenrut]

It looks like this could be improved in NVDA. However it seems like you can work around this with aria-label and aria-labelledby:

NVDA orients the user in a grid by speaking the row and column, this adds verbosity. It is then speaking the contents of the grid cell followed by the name of the button.

For demonstration purposes: You could look at doing something like the following (focusing on day 7):

<td role="gridcell" aria-labelledby="7th" ariaclass="calendar__day-cell" current-month="">
            <div
              id="date7"
              role="button"
              class="calendar__day-button"
              tabindex="-1"
              aria-pressed="false"
              aria-disabled="false"
              future=""
              current-month=""
              aria-label="day"
            >
              <span class="calendar__day-button__text">7</span>
              <span id="7th" class="u-sr-only">May 2021 Friday</span>
            </div>
          </td>

Speaking the following (day 6 included for comparison)

6 May 2021 Thursday  Thursday  column 5
6 May 2021 Thursday  toggle button  not pressed  row 3  current date
May 2021 Friday  Friday  column 6
day  toggle button  not pressed  row 3

Alternatively could consider doing something like this. I don't know what the toggle button is supposed to do, I took a guess it was intended for selecting dates, so used the word "select".

         <td role="gridcell" aria-label="7 May" ariaclass="calendar__day-cell" current-month="">
            <div
              id="date7"
              role="button"
              class="calendar__day-button"
              tabindex="-1"
              aria-pressed="false"
              aria-disabled="false"
              future=""
              current-month=""
              aria-label="select"
            >
              <span aria-disabled="true" class="calendar__day-button__text">7</span>
              
            </div>
          </td>

It reads like this:

7 May  Friday  column 6
select  toggle button  not pressed  row 3

[Adriani90]

It would be really nice to see a ptential solution in NVDA since we have many cases where NVDA repeats information and at some point it gets inefficient.
cc: @seanbudd, @jcsteh, @michaelDCurran

[Adriani90]

@daKmoR the minimal test case in the issue description doesn't work anymore. Can you please provide a new one? Are you still having this issue with NVDA 2024.2 Stable or 2024.3 Beta?

[Adriani90]

We didn't get any updates upon request from the initial author since more than 3 years, closing as abandoned. if you are still having this issue, please comment and we can reopen.