Add title/aria-label attribute to components that include icon buttons

[endigo9740]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Building off of #3588

We should aim to do a pass through the Skeleton components that implement btn-icon and ensure these have the appropriate props to set both the title and aria-label attribute per each. Additionally, each prop should contain a default value. The idea is these labels should describe the action in as succinct a manner possible in English. But given they are a prop so they can modified as needed for i18n purposes.

How to Update

Setting up a new component props has a few steps:

NOTE: remember to keep both the Svelte (.svelte) and React (.tsx) components in sync

1. Add an optional prop to the component's respective types.ts file
2. Add a semantic JSDoc description for each prop in types.ts
3. Register the new prop in the component and set a default value
4. Add the prop to the template for each icon button

We do no have a naming convention for title or aria-label attributes at present, but we should be able to keep these similar to style prop conventions:

• If the icon button is the root element -> no prefix needed
• If the icon button is a child element -> prefix as fooTitle and fooAriaLabel

Where foo represents the semantic prefix name already in use for class props, derived from Zag's spread methods, or if need be a new semantic name can be implemented.

Attribute Presets

Per the attribute values themselves, remember they should describe the purpose of the button, not just summarize the icon, especially the aria-label for screen reader users.

• BAD: title="Arrow" -> this does not describe the purpose of the button
• GOOD: title="Submit" -> this is a good and semantic description of the button

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

The following components were reported to make use of the btn-icon class in .svelte/.tsx files, but I'd welcome a new dedicated audit to confirm.

NOTE the component is the focus of this request, maintaining the playground is optional (but welcome)

- packages/skeleton-svelte/src/components/Toast/Toaster.svelte
- playgrounds/skeleton-svelte/src/routes/components/app-bars/+page.svelte
- playgrounds/skeleton-svelte/src/routes/components/popover/+page.svelte
- packages/skeleton-react/src/components/Toast/Toaster.tsx
- sites/themes.skeleton.dev/src/lib/components/common/Lightswitch/Lightswitch.svelte
- sites/themes.skeleton.dev/src/lib/components/generator/Controls/Controls.svelte
- playgrounds/skeleton-react/src/app/components/app-bar/page.tsx
- sites/skeleton.dev/src/components/homepage/HomeCompGrid.svelte
- sites/skeleton.dev/src/examples/guides/cookbook/stepper/Example.svelte
- sites/skeleton.dev/src/examples/components/popover/ExamplePopover.tsx
- sites/skeleton.dev/src/examples/components/popover/ExamplePopover.svelte