[FEATURE] Change ARIA Properties via the Builder Sidebar

[harshtandiya]

ARIA is a standard for web accessibility.

I think a very valuable addition to builder would be to add an Accessibility section somewhere the right side control panel which would enable the developer to define aria labels for components with ease.

Right now, the only way to do it is via "HTML Attributes"

[VaideshWaranR]

Hey, is someone already working on this issue or can I take it? @surajshetty3416

[surajshetty3416]

@VaideshWaranR Sure go-ahead... maybe share your implementation plan/feature design before you actually implement it?

[aerodeval]

Hi @surajshetty3416

I was thinking of creating a dedicated section for Accessibility in the builder with the most commonly used accessibility fixes.

This section would include basic fields for now, such as:

• Label Text → for adding custom aria-label.
• Role → dropdown with common options like button, navigation, banner, main, etc. to override semantic UI depending on the use case.
• Tab Index → to manage keyboard focus order (would be -1, 0 or 1).

Later, we can also extend it with additional accessibility options such as aria-hidden to hide decorative elements or prevent screen readers from announcing irrelevant content, aria-expanded for managing the state of collapsible sections or dropdowns, and other attributes that can enhance navigation and usability for assistive technologies.

[aerodeval]

Here is an example implementation for the above.

Please let me know if you have any feedback or suggestions for improvement.

[surajshetty3416]

https://github.com/frappe/builder/pull/431