FEAT:Add ARIA labels fixed and added

[bhavish-codes]

Hi Sir I have added ARIA LABEL pls merge my PR after reviewing it

Summary by CodeRabbit

• Accessibility
  • Added descriptive ARIA labels to action buttons for improved screen reader support
  • Enhanced timeline input fields with accessibility labels
  • Added contextual labels to toolbar buttons
  • Improved panel and drawer toggle controls with descriptive labels

[coderabbitai]

Walkthrough

This pull request adds ARIA accessibility labels (aria-label attributes) across multiple Vue components in the application—including buttons, inputs, drawers, and toolbars—to improve accessibility. No functional behavior or logic is modified.

Changes

Cohort / File(s)	Change Summary
Accessibility Infrastructure src/components/layout/LayoutButton.vue	Introduces a new public ariaLabel prop (string, default empty) and binds it to the button's aria-label attribute, falling back to the icon value when not provided.
Editor Component Labels src/components/editor/EditorTimeline.vue, src/components/editor/EditorToolbar.vue	Adds aria-label bindings to input fields and toolbar buttons respectively ("From value", "To value", "Duration" for timeline; item.tooltip or item.name for toolbar items).
Layout Component Labels src/components/layout/LayoutDrawerApplet.vue, src/layouts/EditorLayout.vue	Adds dynamic aria-label attributes to applet drawer toggle button and three LayoutButton components (left, right, bottom panel toggles) describing their expand/collapse actions.
Applet Component Labels src/components/applets/AppletLayers.vue	Adds aria-label to the action button in the tree node header ("Open actions for " + node id or tagName).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• All changes follow a consistent, homogeneous pattern (adding aria-label attributes)
• No behavioral logic or control flow modifications
• Single new prop in LayoutButton.vue is straightforward and optional

Poem

🐰 "Through buttons and inputs, a label I weave,
Each aria string helps screen readers perceive,
From toolbars to drawers, from timelines to trees,
Accessibility blooms on the digital breeze!" ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title references the main change (adding ARIA labels) but contains awkward phrasing ('fixed and added') that doesn't clearly convey what was actually done.	Consider revising to a clearer title like 'Add ARIA labels for improved accessibility' to better reflect the changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/layout/LayoutDrawerApplet.vue (1)

13-13: Good dynamic ARIA label for state changes.

The aria-label correctly reflects whether the applet is expanded or collapsed, improving accessibility for screen reader users.

Consider using template literals for cleaner string composition:

-          :aria-label="(isVisible ? 'Collapse' : 'Expand') + ' ' + name + ' applet'"
+          :aria-label="`${isVisible ? 'Collapse' : 'Expand'} ${name} applet`"

src/components/layout/LayoutButton.vue (1)

10-10: ARIA label implementation with icon fallback.

The fallback to icon when ariaLabel is not provided is functional, though icon names (e.g., "eva-arrowhead-left-outline") aren't ideal for screen readers. Since parent components are providing proper labels (as seen in EditorLayout.vue), this fallback is acceptable.

For future consideration, you might want to make ariaLabel required or provide a more user-friendly default to ensure all buttons have meaningful labels.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1d72a91 and f0512ed.

📒 Files selected for processing (6)

• src/components/applets/AppletLayers.vue (1 hunks)
• src/components/editor/EditorTimeline.vue (1 hunks)
• src/components/editor/EditorToolbar.vue (1 hunks)
• src/components/layout/LayoutButton.vue (2 hunks)
• src/components/layout/LayoutDrawerApplet.vue (1 hunks)
• src/layouts/EditorLayout.vue (1 hunks)

🔇 Additional comments (5)

src/components/editor/EditorToolbar.vue (1)

11-11: LGTM! Good accessibility improvement.

The aria-label binding with a fallback from item.tooltip to item.name ensures toolbar buttons are properly labeled for screen readers.

src/layouts/EditorLayout.vue (1)

10-10: LGTM! Excellent accessibility enhancement.

The aria-labels clearly describe the toggle actions for each panel, making the interface more accessible to screen reader users.

Also applies to: 18-18, 26-26

src/components/editor/EditorTimeline.vue (1)

33-33: LGTM! Important accessibility improvement for form inputs.

The aria-labels provide clear descriptions of the timeline input fields for assistive technologies.

Also applies to: 41-41, 49-49

src/components/applets/AppletLayers.vue (1)

21-21: LGTM! Contextual ARIA label with appropriate fallback.

The aria-label effectively communicates which node the actions menu belongs to, with a sensible fallback from id to tagName.

src/components/layout/LayoutButton.vue (1)

31-34: Good addition of ariaLabel prop for accessibility.

The new prop enables parent components to provide descriptive ARIA labels.