Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"ARIA attribute unsupported or prohibited issue" in Kendo component - Kendo Sortable Angular Component #4387

Open
dineshdesigner08 opened this issue Aug 20, 2024 · 0 comments

Comments

@dineshdesigner08
Copy link

dineshdesigner08 commented Aug 20, 2024

I'm facing an Accessibility issue with the Kendo Sortable Angular component in my project. Specifically, I'm encountering a warning related to ARIA attributes. The warning message is:

I am using the Siteimprove tool to check the accessibility of my application, while I am running the accessibility test in my application, I am facing an issue called "ARIA attribute unsupported or prohibited issue"

Below are the error messages

Siteimprove tool test report Screenshot - Siteimprove tool test report


WAI-ARIA authoring practices ARIA attribute unsupported or prohibited

An ARIA attribute has been specified that is either not supported or is prohibited, on this type of element."

aria-disabled on div "

"Use supported states and properties only.and Use non-prohibited states and properties only."

ARIA attribute unsupported or prohibited → WAI-ARIA authoring practices


Code which was using in HTML component

        <kendo-sortable [kendoSortableBinding]="activeSessionCur" [animation]="true"
          (dragEnd)="onDragEnd($event)" [emptyItemClass]="'secession-empty-state'" [emptyText]="'There are no active sessions'">
          <ng-template let-item="item">
            <div class="last-visited-case"  >
              <button aria-label="Remove" title="Remove" (click)="deleteActiveSession(item)"
                kendoButton icon="close" look="flat" class="last-visited-case-close"></button>
              <p class="last-visited-case-heading" role="region" attr.aria-label="{{item.clientName}}" (click)="onCaseClicked(item)" title="{{ item.clientName }}"><strong>{{ item.clientName }}</strong>
              </p>
              <p class="last-visited-case-details" role="region" attr.aria-label="ID: {{ item.clientId ?? '000' }}" (click)="onCaseClicked(item)" title="ID: {{ item.clientId ?? '000' }}">ID {{ item.clientId ?? '000' }}</p>
            </div>
          </ng-template>
        </kendo-sortable>

Code that was generated dynamically in Browser inspect window

Kendo dynamically generate code in browser inspect window -
Kendo dynamically generated HTML code in the Inspect window

<kendo-sortable _ngcontent-ng-c1140897335="" dir="ltr" role="list" style="touch-action: none;">
      <div kendodraggable="" role="listitem" aria-grabbed="false" aria-disabled="false" aria-keyshortcuts=""
            aria-dropeffect="move" data-sortable-item="true" data-sortable-index="0" data-sortable-id="0"
            style="user-select: none;">
            <div _ngcontent-ng-c1140897335="" class="last-visited-case"><button _ngcontent-ng-c1140897335=""
                        aria-label="Remove" title="Remove" kendobutton="" icon="close" look="flat"
                        class="last-visited-case-close k-button k-icon-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
                        role="button" aria-disabled="false" dir="ltr"><kendo-icon-wrapper innercssclass="k-button-icon"
                              class="k-icon-wrapper-host"><kendo-icon class="k-i-close k-button-icon k-icon"
                                    aria-hidden="true"></kendo-icon><!----><!----><!----><!----></kendo-icon-wrapper><!----><!----><!----><span
                              class="k-button-text"></span></button>
                  <p _ngcontent-ng-c1140897335="" role="region" class="last-visited-case-heading"
                        title="AutomationF180 AutomationL1" aria-label="AutomationF180 AutomationL1"><strong
                              _ngcontent-ng-c1140897335="">AutomationF180 AutomationL1</strong></p>
                  <p _ngcontent-ng-c1140897335="" role="region" class="last-visited-case-details" aria-label="ID: 47"
                        title="ID: 47">ID 47</p>
            </div><!----><!----><!---->
      </div>
</kendo-sortable>

Checked Documentation: I've gone through the Kendo UI documentation and siteimprove to see if there's any mention of this issue, but I couldn't find anything specific.

Kendo Version I am using - "^13.5.0"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants