Questions on Kendo UI for Angular Forum

1 answer

28 views

Digital Accessibility Issues when using kendo grid in angular

Hi there,

Recently we started working on accessibility issues on angular 15 app Currently we are using the below version for kendo grid.

"@progress/kendo-angular-grid": "^4.7.0",

And we are facing some issues from kendo grid and wanted to check if these get sorted out if the kendo grid version is updated to higher versions. And if so, please suggest the version no..
Please find the attached issues.

---------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------
Please check the issues and let us know how I can sort out my issues.

Accessibility

Grid

answered on 29 Mar 2024

1 answer

24 views

Kendo grid expand, collapse column header (k-group-cell k-header) WCAG Error.

Hi,

I'm having a kendo grid with grouping rows with expand collapse buttons.

When scanned for WCAG, the header column gives an error since it has an empty header without any labels.

Any workaround to fix this?

Thanks & Regards,
Milinda

Accessibility

Grid

answered on 21 Feb 2023

0 answers

46 views

kendoGridDetailTemplate only show the [+] signe when there is something to show

[RESOLVED]

Hello,

I have integrated kendo grid with some details-grid using the KendoGridDetailTemplate.
Everything works great, but I can't find a way of hiding the [+] sign when there is nothing to show in the details component.

I am already using the [KendoGridDetailTemplateShowIf]="ShowDetailsCondition" but the problem i'm facing is that when the directive is called, I don't have access to the methods in my component, since "this" changes and represents the directive itself.

              <ng-template kendoGridDetailTemplate let-dataItem [kendoGridDetailTemplateShowIf]="showDetailsCondition">
                <app-cash-register-main-cash-register-action-form-details
                  [invoiceHeaders]="invoiceHeaders"
                  [quoteHeaders]="quoteHeaders"
                  [shipmentHeaders]="shipmentHeaders"
                  [subscriptionHeaders]="subscriptionHeaders"
                  [orderHeaders]="orderHeaders"
                  [creditNoteHeaders]="creditNoteHeaders"
                  [document]="dataItem">
                </app-cash-register-main-cash-register-action-form-details>
              </ng-template>

  hasHeaders(dataItem): boolean {
    console.log(dataItem);
    let document = dataItem;
    const type = document.SourceEntity;
    const id = document.EntityId;
    let documentFound = [];
    switch (type) {
      case 'InvoiceHeader':
        console.log('InvoiceHeader');
        const InvoiceHeader = this.invoiceHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(InvoiceHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(InvoiceHeader?.Lines, type));
        break;
      case 'QuoteHeader':
        console.log('QuoteHeader');
        const selectedQuoteHeader = this.quoteHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedQuoteHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedQuoteHeader?.Lines, type));
        break;
      case 'SubscriptionHeader':
        console.log('SubscriptionHeader');
        const selectedSubscription = this.subscriptionHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedSubscription, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedSubscription?.Lines, type));
        break;
      case 'OrderHeader':
        console.log('OrderHeader');
        const selectedOrderHeader = this.orderHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedOrderHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedOrderHeader?.Lines, type));
        break;
      case 'CreditNoteHeader':
        console.log('CreditNoteHeader');
        const selectedCreditNoteHeader = this.creditNoteHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedCreditNoteHeader, type));
        documentFound.push(...this.findParentDocumentFromLines(selectedCreditNoteHeader?.Lines, type));
        break;
      case 'ShipmentHeader':
        console.log('ShipmentHeader');
        const selectedShipmentHeader = this.shipmentHeaders.find(q => q.Id == id);
        documentFound.push(...this.findParentDocumentFromHeader(selectedShipmentHeader, type));
        break;
    }
    if (documentFound.length > 0) {
      return true;
    }
    return false;
  }

here is my condition function:

  public showDetailsCondition(dataItem: MovementDocumentCustomer): boolean {
    console.log(dataItem);
    return (
      (dataItem.SourceEntity === 'InvoiceHeader' ||
        dataItem.SourceEntity === 'ShipmentHeader' ||
        dataItem.SourceEntity === 'OrderHeader') &&
      this.hasHeaders(dataItem)
    );
  }

error : "this.hasHeaders is not a function" => I guess it's because "this" represent now the Directive and not my component

How could I use custom methods/function from my component into my condition function without have it returning an error ?

Thanks you!
Audric

updated question on 05 Dec 2022

0 answers

37 views

Jaws screen reader is reading additional content for kendo switch inside kendo grid

Hi,

I have grid and in every row i have a switch button .

I have a requirement to set ARIA LABEL value dynamically so that the user will know which column and row he is in. While fixing that, I found the JAWS screen reader reading additional comments(colored yellow) other than the content from ARIA LABEL. I am unable to find where it is coming from. This happens only for the first row. Also, the screen reader reads the column header for the second time. Please find the JAWS Speech history below. Attached is the screenshot of the same.

Yes/No
column 5 row 2
Column 5 row 1 Contains Controls
Column 5 row 1 Switch Off
Yes/No //It reads Column Header for the second time
column 4 row 1 //Additional content
Switch Pressed On
Column 5 row 2 Switch Off
Switch Pressed On
Column 5 row 3 Switch Off
Switch Pressed On
Column 5 row 4 Switch Off
Switch Pressed On
Column 5 row 5 Switch Off
Switch Pressed On

How to solve this?

Here's the stackblitz link: https://stackblitz.com/edit/angular-egapar?file=src%2Fapp%2Fapp.component.ts

Thanks,

Sowmiya

Accessibility

Grid

Switch

asked on 10 May 2022

0 answers

187 views

JAWS Screen reader is reading entire grid content while focusing on kendo switch button

Hi,

I have a kendo grid and in each row, I have a kendo switch button. When focusing on the kendo switch in the first row, the JAWS screen reader reads the entire grid values. The expected behavior is JAWS should read only the aria-label value along with Switch's action(Switched on or Pressed Off). I tried setting role="switch" and role="button". How to fix this?

Here's the stackblitz link: https://stackblitz.com/edit/angular-egapar?file=src%2Fapp%2Fapp.component.ts

I've attached JAWS' Speech history.

Thanks