[Bug] Modal hardcodes aria-labelledby and aria-describedby pointing to nonexistent element IDs #1864

Current Behavior

In Sistent's Modal component (src/custom/Modal/index.tsx, lines 182–183), the underlying StyledDialog hardcodes:

• aria-labelledby="alert-dialog-slide-title"
• aria-describedby="alert-dialog-slide-description"
  However:

1. The rendered title element (<Typography data-testid="modal-title">{title}</Typography>) does not carry id="alert-dialog-slide-title".
2. There is no element rendered with id="alert-dialog-slide-description".
3. Because these IDs are static strings rather than dynamically generated (e.g., via React.useId()), any future attempt to attach static IDs would also produce duplicate-ID DOM collisions when multiple modals exist in the component tree.
4. Screen readers and automated accessibility audits (e.g., axe, Lighthouse) flag aria-labelledby and aria-describedby referencing nonexistent element IDs.
   Currently, consumers must rely on conditional mounting ({isOpen && <Modal ... />}) as a workaround to avoid tree-level accessibility collisions.

Expected Behavior

• aria-labelledby should reference the ID of the modal's rendered title component.
• The ID should be unique per modal instance (using React.useId() or an overridable id / aria-labelledby prop) so multiple dialogs do not collide in the DOM.
• If no description element is rendered, aria-describedby should not be attached by default unless explicitly supplied by consumer props.

Screenshots/Logs

Environment

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Sistent site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack