fix: SITES-24510 The ARIA design pattern for grid has been partially implemented - #412
Conversation
|
build (12.x) failed on the latest commit. Fix the build (and confirm whether failures are from these changes or the environment) before merge. |
| expect(el.parentElement.getAttribute('aria-label')).to.equal('Masonry Label', 'Masonry parent element should receive same aria-label as Masonry'); | ||
| expect(el.parentElement.getAttribute('aria-labelledby')).to.equal('Masonry Labelledby', 'Masonry parent element should receive same aria-labelledby as Masonry'); | ||
|
|
||
| expect(el.getAttribute('role')).to.equal('row', '<coral-masonry> should have role="row"'); |
There was a problem hiding this comment.
always gets role="row" when aria grid is on, even when aria-rowcount > 1. All gridcell children can have different aria-rowindex values (2, 3, …) while sitting under one row in the accessibility tree.
That conflicts with the usual grid → row → gridcell model and is why the parallel fix in coralui-component-masonry PR #71 switches the masonry wrapper to role="presentation" when there is more than one visual band.
Recommendation: When spatial.rowcount > 1, use role="presentation" on masonry (and drop aria-rowindex on the wrapper), or introduce real row containers. Keep role="row" only for a single visual row.
| this.parentElement.setAttribute('aria-colcount', String(spatial.colcount)); | ||
| this.parentElement.setAttribute('aria-rowcount', String(spatial.rowcount)); | ||
| } else if (this.items.length > 0) { | ||
| this.parentElement.setAttribute('aria-colcount', String(this.items.length)); |
There was a problem hiding this comment.
Tests only cover one visual row (three columns). Add a case similar to the corp masonry PR: narrow width, multiple tiers, expect aria-rowcount >= 2 and correct per-item indices (and presentation/row behavior if you adopt #2).
|
|
||
| @private | ||
| */ | ||
| _getSpatialAriaGridMeta() { |
There was a problem hiding this comment.
If any placed item lacks columnIndex / itemIndex, the whole meta call returns null and parent falls back to aria-colcount = items.length, aria-rowcount = 1, while individual items may still get mixed spatial vs linear indices. Consider partial application or documenting that all items must have layout data after _doLayout.
|
|
||
| if (activateAriaGrid === ariaGrid.ON) { | ||
| this.parentElement.setAttribute('aria-colcount', this.items.length); | ||
| const spatial = this._getSpatialAriaGridMeta(); |
There was a problem hiding this comment.
_getSpatialAriaGridMeta skips ignored and placeholder items, but _updateAriaRoleForItems walks all items. Ignored items without valid ld get the linear fallback path and can receive duplicate or misleading aria-colindex values.
Recommendation: Skip placeholders (_placeholder) and ignored items for gridcell roles, or clear their grid attributes explicitly.
Use presentation role when aria-rowcount > 1, partial spatial meta for parent counts, skip ignored/placeholder items for gridcell ARIA, and add narrow multi-row tests with per-item index assertions. Co-authored-by: Cursor <cursoragent@cursor.com>
Presentation on the wrapper breaks grid → row → gridcell in axe when the example uses multiple visual rows. Spatial aria-rowindex/colindex and parent aria-rowcount still convey wrapped layout. Co-authored-by: Cursor <cursoragent@cursor.com>
mariang-ens
changed the title
3 participants
JIRA Ticket: https://jira.corp.adobe.com/browse/SITES-24510
Description
Related Issue
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: