Masory does not support Tabindex

Created on 23 January 2025, 9 days ago

Problem/Motivation

Masonry layout libraries, such as the one currently in use, do not natively support proper keyboard navigation via the tabindex attribute. This lack of support creates accessibility challenges for users who rely on keyboard navigation to traverse page content.

Steps to reproduce

Implement a masonry layout using the current library.
Attempt to navigate through the elements within the masonry grid using the Tab key.
Observe that the tab order does not follow an expected logical sequence, potentially skipping elements or following an incorrect path.

Proposed resolution

A patch has been developed to manually manage tabindex values within the masonry grid. The patch accomplishes the following:

Retrieves masonry grid items and sorts them based on their visual position (top and left values).
Assigns appropriate tabindex values to ensure a logical navigation order.
Sets negative tabindex values for headings and anchor elements within items.
Adds an event listener to enable keyboard interaction by triggering a click event when the Enter key is pressed.

Remaining tasks

Review and test the patch for compatibility and performance.
Conduct accessibility testing to ensure compliance.

User interface changes

No visual UI changes, but improved keyboard navigability for users relying on assistive technologies.

✨ Feature request

Status

Active

Version

4.0

Component

Code

Created by

🇪🇸Spain Nodles

Live updates comments and jobs are added and updated live.

Comments & Activities

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024