@allxsmith/bestax-bulma 5.16.8 → 5.16.9

package/dist/types/components/Avatar.d.ts

@@ -18,7 +18,14 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
     className?: string;
     /** Image URL. On load error (or if absent), falls back to initials, then `icon`. */
     src?: string;
-    /** Alternate text for the image (used for the accessible name in every render mode). An explicit `alt=""` marks a non-interactive avatar as decorative. */
+    /**
+     * Alternate text for the image (used for the accessible name in every render mode). An
+     * explicit `alt=""` marks a non-interactive avatar as decorative.
+     *
+     * A link or button avatar is never decorative — it keeps an accessible name — and a custom
+     * component passed to `as` counts as one unless it states otherwise, so `alt=""` on a custom
+     * wrapper needs that signal alongside it. `as` documents which props carry it.
+     */
     alt?: string;
     /** Derives initials and a deterministic background color when no `src` is shown. */
     name?: string;
@@ -80,7 +87,23 @@ type AvatarForwardedProp = 'href' | 'target' | 'rel';
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
 export type AvatarProps<T extends React.ElementType = 'figure'> = Omit<AvatarOwnProps, Extract<AvatarForwardedProp, keyof React.ComponentPropsWithoutRef<T>>> & Omit<React.ComponentPropsWithoutRef<T>, Exclude<keyof AvatarOwnProps, AvatarForwardedProp> | 'as'> & {
-    /** Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. */
+    /**
+     * Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`.
+     *
+     * This also decides whether the avatar is treated as interactive, which is what keeps
+     * `role="img"` and the `alt=""` decorative opt-out off a link or button. A custom
+     * component counts — a router link takes `to` rather than this component's `href`, so
+     * its own props cannot say — while `'a'`, `'button'`, and a custom element given an
+     * `href` count for the reason they read.
+     *
+     * If your custom component renders something that really is just a picture, say so with
+     * `role="img"` and it is treated as one, `alt=""` included. A truthy `aria-hidden` says it
+     * too, and so do `role="presentation"` and `role="none"` — though ARIA's own conflict
+     * resolution drops those two whenever the avatar still carries a name, so prefer
+     * `role="img"`. A role claiming the opposite, such as `"button"`, says nothing here, and
+     * neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href`
+     * avatar keeps its accessible name either way.
+     */
     as?: T;
 };
 /**

package/dist/types/components/Navbar.d.ts

@@ -217,7 +217,20 @@ export interface NavbarLinkOwnProps extends Omit<BulmaClassesProps, 'color' | 'b
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
 export type NavbarLinkProps<T extends React.ElementType = 'a'> = NavbarLinkOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof NavbarLinkOwnProps | 'as'> & {
-    /** Render as another intrinsic element (`'button'`, `'span'`) or a custom component. Defaults to `'a'`. */
+    /**
+     * Render as another intrinsic element (`'button'`, `'span'`) or a custom component. Defaults to `'a'`.
+     *
+     * Inside a `Navbar.Dropdown` this also decides the trigger's semantics. A custom
+     * component is taken to be interactive already — a router link, typically — so it
+     * keeps its own role and click behaviour. An intrinsic tag is judged on what it is:
+     * `'button'`, or anything carrying an `href`, is left alone, and everything else
+     * (`'span'`, a bare `'a'`, a custom element) gets `role="button"`, `tabIndex` and a
+     * click that opens the dropdown.
+     *
+     * If your custom component renders something non-interactive, pass `role="button"` and
+     * it takes that fallback too — `tabIndex` and click included. The keyboard path is
+     * attached either way.
+     */
     as?: T;
 };
 /**

package/dist/types-cjs/components/Avatar.d.ts

@@ -18,7 +18,14 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
     className?: string;
     /** Image URL. On load error (or if absent), falls back to initials, then `icon`. */
     src?: string;
-    /** Alternate text for the image (used for the accessible name in every render mode). An explicit `alt=""` marks a non-interactive avatar as decorative. */
+    /**
+     * Alternate text for the image (used for the accessible name in every render mode). An
+     * explicit `alt=""` marks a non-interactive avatar as decorative.
+     *
+     * A link or button avatar is never decorative — it keeps an accessible name — and a custom
+     * component passed to `as` counts as one unless it states otherwise, so `alt=""` on a custom
+     * wrapper needs that signal alongside it. `as` documents which props carry it.
+     */
     alt?: string;
     /** Derives initials and a deterministic background color when no `src` is shown. */
     name?: string;
@@ -80,7 +87,23 @@ type AvatarForwardedProp = 'href' | 'target' | 'rel';
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
 export type AvatarProps<T extends React.ElementType = 'figure'> = Omit<AvatarOwnProps, Extract<AvatarForwardedProp, keyof React.ComponentPropsWithoutRef<T>>> & Omit<React.ComponentPropsWithoutRef<T>, Exclude<keyof AvatarOwnProps, AvatarForwardedProp> | 'as'> & {
-    /** Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. */
+    /**
+     * Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`.
+     *
+     * This also decides whether the avatar is treated as interactive, which is what keeps
+     * `role="img"` and the `alt=""` decorative opt-out off a link or button. A custom
+     * component counts — a router link takes `to` rather than this component's `href`, so
+     * its own props cannot say — while `'a'`, `'button'`, and a custom element given an
+     * `href` count for the reason they read.
+     *
+     * If your custom component renders something that really is just a picture, say so with
+     * `role="img"` and it is treated as one, `alt=""` included. A truthy `aria-hidden` says it
+     * too, and so do `role="presentation"` and `role="none"` — though ARIA's own conflict
+     * resolution drops those two whenever the avatar still carries a name, so prefer
+     * `role="img"`. A role claiming the opposite, such as `"button"`, says nothing here, and
+     * neither does an `href`: that settles it on its own. A genuine `'a'`/`'button'`/`href`
+     * avatar keeps its accessible name either way.
+     */
     as?: T;
 };
 /**

package/dist/types-cjs/components/Navbar.d.ts

@@ -217,7 +217,20 @@ export interface NavbarLinkOwnProps extends Omit<BulmaClassesProps, 'color' | 'b
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
 export type NavbarLinkProps<T extends React.ElementType = 'a'> = NavbarLinkOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof NavbarLinkOwnProps | 'as'> & {
-    /** Render as another intrinsic element (`'button'`, `'span'`) or a custom component. Defaults to `'a'`. */
+    /**
+     * Render as another intrinsic element (`'button'`, `'span'`) or a custom component. Defaults to `'a'`.
+     *
+     * Inside a `Navbar.Dropdown` this also decides the trigger's semantics. A custom
+     * component is taken to be interactive already — a router link, typically — so it
+     * keeps its own role and click behaviour. An intrinsic tag is judged on what it is:
+     * `'button'`, or anything carrying an `href`, is left alone, and everything else
+     * (`'span'`, a bare `'a'`, a custom element) gets `role="button"`, `tabIndex` and a
+     * click that opens the dropdown.
+     *
+     * If your custom component renders something non-interactive, pass `role="button"` and
+     * it takes that fallback too — `tabIndex` and click included. The keyboard path is
+     * attached either way.
+     */
     as?: T;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.16.8",
+  "version": "5.16.9",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",