[Table]: [Wrong reading order:- In entire application on accessing switch button within Table dialog, UI type is being read in the beginning followed by the column name]

[jadhavarjun]

Describe the bug

In entire application on accessing switch button within Table dialog, UI type is being read in the beginning followed by the column name Wrong reading order. First should read column heading and then switch button.

Here is screenshot: Speech history :- Wrong Reading Switch Off Not pressed Group Order Proposals By column 2 row 5 Switch Off Not pressed Split Purchase Orders By Column 3

Expected Reading Group Order Proposals By Switch Off Not pressed column 2 row 5 Split Purchase Orders By Switch Off Not pressed
Column 3

  <Table
          columns={
           <>
            <TableColumn>
              <Label>{t('CRITERIA')}</Label>
            </TableColumn>
            <TableColumn>
              <Label>{t('GROUPING_CRITERIA')}</Label>
            </TableColumn>
            <TableColumn>
              <Label>{t('SPLIT_CRITERIA')}</Label>
            </TableColumn>
          </>
         }
         >
        {Object.keys(filteredCriteriaMap).map((key, index) => {
          return (
            <TableRow key={index}>
              <TableCell>
                <Label>{getLabel({ key: key })}</Label>
              </TableCell>
              <TableCell>
                {parseInt(key) !== 7 ? (
                  <DialogFormField
                    name={`orderGroupCriteria.${filteredCriteriaMap[key]}`}
                    as={SwitchField}
                    accessibleName={t('GROUPING_CRITERIA')}
                    switchId={`orderGroupCriteria.${filteredCriteriaMap[key]}`}
                    onSwitchToggle={() => {
                      handleOnSwitchToggle({
                        type: grouping,
                        code: key,
                      });
                    }}

                  />
                ) : null}
              </TableCell>
              <TableCell>
                <DialogFormField
                  name={`orderSplitCriteria.${filteredCriteriaMap[key]}`}
                  as={SwitchField}
                  accessibleName={t('SPLIT_CRITERIA')}
                  switchId={`orderSplitCriteria.${filteredCriteriaMap[key]}`}
                  onSwitchToggle={() => {
                    handleOnSwitchToggle({
                      type: split,
                      code: key,
                    });
                  }}
                  disabled={isReadOnly({
                    code: key,
                    type: split,
                  })}

                />
              </TableCell>
            </TableRow>
          );
        })}
      </Table>

Expected Behaviour

Screen reader should convey name of the UI followed by the name of the UI i.e ‘Group Order Proposals by Switch Off Not pressed’.

Group Order Proposals By Switch Off Not pressed column 2 row 5 Split Purchase Orders By Switch Off Not pressed
Column 3

Screenshots or Videos

No response

UI5 Web Components for React Version

^1.16.3

UI5 Web Components Version

^1.14.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[elenastoyanovaa]

Hello @jadhavarjun ,

Can you please provide us with a sample or environment (application) where we could reproduce the issue? Also a video would be helpful or at least steps to reproduce. You can check our samples in the playground, or the samples of the react components and adjust accordingly. You can use the build in playground we provide with our samples or StackBlitz. If this is not possible please provide us with your application in order to access it and debug the issue. For accessibility issues we need some additional analysis and information, which is described in https://sap.github.io/ui5-webcomponents/docs/advanced/accessibility/#testing-accessibility

Thank you in advance!

Kind Regards, Elena

[jadhavarjun]

Hi @elenastoyanovaa ,

you can see I have also shared code in description in that you can see we have passed switch button as props and provided column heading name in accessibleName attribute. as I know accessibleName need to read by reader first then others that passed as props but accessibleName reading by reader at last

        <Table
      columns={
       <>
        <TableColumn>
          <Label>{t('GROUPING_CRITERIA')}</Label>
        </TableColumn>
      </>
     }
     >
     return (
        <TableRow key={index}>
          <TableCell>
            <Label>{getLabel({ key: key })}</Label>
          </TableCell>
          <TableCell>
            {parseInt(key) !== 7 ? (
              <DialogFormField
                name={`orderGroupCriteria.${filteredCriteriaMap[key]}`}
                **as={SwitchField}** //Switch Button passing as props
                **accessibleName={t('GROUPING_CRITERIA')}** //accessibleName attribute
                switchId={`orderGroupCriteria.${filteredCriteriaMap[key]}`}
                onSwitchToggle={() => {
                  handleOnSwitchToggle({
                    type: grouping,
                    code: key,
                  });
                }}

              />
        )

Could you please help me resolve this issue with the details provided?

[elenastoyanovaa]

Hello @jadhavarjun ,

In order to help you I asked for additional information, not only for a sample. How did you receive this speech output? What are the steps to reproduce? What key combinations did you perform and what element did you reach in order for the screen reader to provide you with the speech output. What is the value of the accessible name you pass to the switch - I cannot determine with the coding sample you provided. Is the problem the speech output of the row, or a problem with the accessible name of the switch? What screen reader are you using? What is the version of the screen reader?

Please provide me with this information at least. Would appreciate if you read my last reply and check the other information which is needed in order to process your issue as fast as possible.

Kind Regards, Elena

[jadhavarjun]

Hi @elenastoyanovaa ,

Screen reader: JAWS and Its version is JAWS Version 2024.2405.83

and can you please provide me stackBlitz link in React+Javascreipt with "@ui5/webcomponents": "^1.14.0", "@ui5/webcomponents": "^1.16.3", to check does issue with version and also code is too complicate to create same reproducible code because multiples file are included in that and multiple props are passings. I will still try to create reproducible code.

[elenastoyanovaa]

Hello,

Could you also answer to my other questions?

"How did you receive this speech output? What are the steps to reproduce? What key combinations did you perform and what element did you reach in order for the screen reader to provide you with the speech output. What is the value of the accessible name you pass to the switch - I cannot determine with the coding sample you provided. Is the problem the speech output of the row, or a problem with the accessible name of the switch?"

Elena

[jadhavarjun]

Here is zip file in that zip file I included video once you unzip that file you can able to see video and in that video cover your must questions answers. Please unzip the file and see video:- Screen Recording 2024-08-29 165108.zip

Here is screenshot:

accessibleName="Group Order Proposals By" it is column header and switch button passing as props we don't have any accessibleName in switch button

and if you want to connect with me please let me know.

[jadhavarjun]

Hi @elenastoyanovaa,

"Have you had a chance to look into this matter?"

[elenastoyanovaa]

Hello @jadhavarjun ,

As my dispatcher week is over the issue will be processed by the next colleague.

Kind Regards, Elena

[kskondov]

Hello @SAP/ui5-webcomponents-table,

Can you please take a look at this issue with the reading order in the table.

Best Regards, Konstantin

[DonkeyCo]

Hi @SAP/ui5-webcomponents-core,

seems like this is in regards to the V1 Table. The table is using columns as its slot name, while the V2 Table should be using headerRow. As maintenance for the V1 table is not done in our team, could you please have a look here?

Best regards, Duc