Card View Accessibility: ARIA role gridcell is not allowed for given element

[skathuria29]

Provide a general summary of the issue here

In Card View alpha version 3.0.0-alpha.28, while testing the a11y issues in axeDevtools extension, we have observed the following issue. Repeated for each grid item. ARIA role gridcell is not allowed for given element

🤔 Expected Behavior?

This issue should not appear.

😯 Current Behavior

Giving accessibility issue

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Run axeDevtools extension over CardView alpha3.0.0-alpha.28

Version

3.35.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

This is classified by Deque as a best practice rule: https://dequeuniversity.com/rules/axe/4.8#best-practices-rules. It should be noted that our Digital Accessibility Guide - Comprehensive Testing guidance recommends running aXe with best practices ‘OFF’: https://accessibility.corp.adobe.com/testing/web/manual_checklist/#running-axe-devtools.

This is not a false positive, because article does not technically accept the widget role of gridcell, per the Document conformance requirements for use of ARIA attributes in HTML. The use of article for a Card would make more sense when if we were implementing the WAI-ARIA feed design pattern, which behaves similarly to a grid, but expects children of the role="feed" to have role="article". Making the change to use feed rather than grid might affect behaviors like item selection and how a Windows screen reader shifts into and out of forms mode.

While the impact on accessibility caused by using the gridcell role on an article within a grid is low, it might be better to use a generic div instead of article . That way we could use either role="gridcell" or role=article depending on the context.

[sossost]

Hello, @snowystinger! I am sossost, a new contributor. Can I resolve this issue??

[snowystinger]

Go for it