fix(bulma-ui): make Rate, Icon, the time wheels, Autocomplete and Dropdown pass axe's ARIA checks

bestax-mcp/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.26.6"
+    "version": "5.27.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [

bestax-mcp/data/components/Autocomplete.json

@@ -54,7 +54,7 @@
       "code": "function example() {\n  return (\n    <Field horizontal label=\"Fruit\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"search\">\n            <Autocomplete\n              data={['Apple', 'Banana', 'Cherry']}\n              placeholder=\"Search fruit...\"\n            />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],
-  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- Uses `role=\"combobox\"` with `aria-expanded`\n- Has `aria-haspopup=\"listbox\"` and `aria-autocomplete=\"list\"`\n- Dropdown items use `role=\"option\"` with `aria-selected`\n- Disabled items have `aria-disabled`\n- The `clearable` clear button is a native button named \"Clear\": `Tab` from the input reaches it, and `Enter` or `Space` clears the input and puts focus back in it\n- Full keyboard navigation support",
+  "accessibility": "- The `label` prop is automatically associated with the inner text input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it.\n- A user-supplied `id` is applied to the inner input (the labellable control), not the wrapper div.\n- Uses `role=\"combobox\"` with `aria-expanded`, which is true only while the list is on screen\n- Has `aria-haspopup=\"listbox\"` and `aria-autocomplete=\"list\"`, and, while the list is on screen, `aria-controls` pointing at it\n- Focus stays in the input, which points `aria-activedescendant` at the highlighted option as the arrow keys move it\n- The list is a `role=\"listbox\"` named by the `label` prop's label. Inside an outer `Field`, or with no `label`, it falls back to `aria-label=\"Suggestions\"`\n- Dropdown items use `role=\"option\"` with `aria-selected`\n- Disabled items have `aria-disabled`\n- The `clearable` clear button is a native button named \"Clear\": `Tab` from the input reaches it, and `Enter` or `Space` clears the input and puts focus back in it\n- Full keyboard navigation support",
   "related": ["Input", "Select", "Taginput"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-autocomplete",
   "summary": "The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.",

bestax-mcp/data/components/DateTimeInput.json

@@ -170,7 +170,7 @@
       "code": "<DateTimeInput label=\"Input only\" popover={false} defaultValue={new Date()} />"
     }
   ],
-  "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name. Opening it puts focus on the focused date.\n- Closing the popover with `Escape`, the ✓ button or `Enter` on a time wheel returns focus to the input, whether the input or the launcher opened it. Under `openOnFocus` that returning focus leaves the popover closed; focusing or clicking the input again opens it. Closing it commits nothing by itself: an empty field stays empty, and leaving afterwards commits only what you typed, so seconds the display leaves out are kept.\n- Calendar uses `role=\"grid\"`; cells expose `aria-selected`, `aria-disabled`, and `aria-current=\"date\"`.\n- Roving `tabindex` keeps a single day focusable at a time, and focus moves with it, inline as in the popover. When the focused date is disabled, that cell is the nearest enabled day of the month.\n- Each time wheel uses `role=\"spinbutton\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext`.\n- The footer's confirm button exposes an accessible label (`Done`); the Reset button reverts your edits to the value the popover opened with.\n- Tab order walks from the calendar to the footer (Reset / ✓), and from the time wheels to the footer while they are open.",
+  "accessibility": "- Trigger uses `role=\"combobox\"` with `aria-haspopup=\"dialog\"`, `aria-expanded`, and `aria-controls`.\n- Popover panel has `role=\"dialog\"` with an accessible name. Opening it puts focus on the focused date.\n- Closing the popover with `Escape`, the ✓ button or `Enter` on a time wheel returns focus to the input, whether the input or the launcher opened it. Under `openOnFocus` that returning focus leaves the popover closed; focusing or clicking the input again opens it. Closing it commits nothing by itself: an empty field stays empty, and leaving afterwards commits only what you typed, so seconds the display leaves out are kept.\n- Calendar uses `role=\"grid\"`; cells expose `aria-selected`, `aria-disabled`, and `aria-current=\"date\"`.\n- Roving `tabindex` keeps a single day focusable at a time, and focus moves with it, inline as in the popover. When the focused date is disabled, that cell is the nearest enabled day of the month.\n- Each time wheel uses `role=\"spinbutton\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext`. The values drawn above and below are click targets hidden from assistive technology, which reads the value from the spinbutton.\n- The footer's confirm button exposes an accessible label (`Done`); the Reset button reverts your edits to the value the popover opened with.\n- Tab order walks from the calendar to the footer (Reset / ✓), and from the time wheels to the footer while they are open.",
   "related": ["DateInput", "Input", "TimeInput"],
   "storybook": "https://bestax.io/storybook/?path=/story/form-datetimeinput",
   "summary": "The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.",

bestax-mcp/data/components/Dropdown.json

@@ -42,7 +42,7 @@
       "code": "<Dropdown label=\"Dropdown Menu\" active>\n  <Dropdown.Item>First Item</Dropdown.Item>\n  <Dropdown.Item>Second Item</Dropdown.Item>\n  <Dropdown.Divider />\n  <Dropdown.Item>Third Item</Dropdown.Item>\n</Dropdown>"
     }
   ],
-  "accessibility": "- The dropdown root is a `<div class=\"dropdown\">` with ARIA roles/attributes for menu and trigger.\n- The trigger button uses `aria-haspopup`, `aria-controls`, and `aria-expanded`.\n- Menu items are focusable and use `role=\"menuitem\"`. An item given `role=\"menuitemcheckbox\"` or `role=\"menuitemradio\"` stays in the arrow-key order.\n- `Dropdown.Item as=\"button\"` defaults to `type=\"button\"`, so a menu item inside a form doesn't\n  submit it. Pass `type=\"submit\"` or `type=\"reset\"` and yours is used instead; any other value\n  renders `type=\"button\"`.\n- Clicking outside closes the dropdown in most cases.\n\n`Dropdown` implements the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\nout of the box:\n\n- On the trigger: <kbd>ArrowDown</kbd> or <kbd>Enter</kbd>/<kbd>Space</kbd> open the menu and\n  focus the first item; <kbd>ArrowUp</kbd> opens the menu and focuses the last item;\n  <kbd>Escape</kbd> closes an open menu.\n- Inside the menu: <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> move between items and wrap around;\n  <kbd>Home</kbd>/<kbd>End</kbd> jump to the first/last item; <kbd>Escape</kbd> closes the menu\n  and returns focus to the trigger; <kbd>Tab</kbd> closes the menu and lets focus continue\n  naturally.\n- On an item: <kbd>Enter</kbd> or <kbd>Space</kbd> activates it the way a click does, so its\n  `onClick` runs and the menu closes unless `closeOnClick` is `false`. That includes the\n  default anchor without an `href` and `as=\"div\"`, which the browser would not activate on\n  its own.\n- When running an item closes the menu, by click or by key, focus goes back to the trigger,\n  as it does for <kbd>Escape</kbd>. An item whose `onClick` moves focus somewhere else keeps\n  it there.\n- Disabled items (a `Dropdown.Item` rendered with a native `disabled` attribute or\n  `aria-disabled=\"true\"`) and dividers are skipped during arrow-key navigation.\n\n:::note\nThere is no typeahead and no built-in outside-click handling inside the menu beyond the\nexisting click-outside-to-close behavior — add those yourself if your use case needs them.\n:::",
+  "accessibility": "- The dropdown root is a `<div class=\"dropdown\">` with ARIA roles/attributes for menu and trigger.\n- The trigger button uses `aria-haspopup`, `aria-controls`, and `aria-expanded`.\n- Menu items are focusable and use `role=\"menuitem\"`. An item given `role=\"menuitemcheckbox\"` or `role=\"menuitemradio\"` stays in the arrow-key order.\n- The items are the only focusable things inside `role=\"menu\"`. A click between them, on a divider say, focuses the menu itself, so the arrow keys still reach the items from there.\n- `Dropdown.Item as=\"button\"` defaults to `type=\"button\"`, so a menu item inside a form doesn't\n  submit it. Pass `type=\"submit\"` or `type=\"reset\"` and yours is used instead; any other value\n  renders `type=\"button\"`.\n- Clicking outside closes the dropdown in most cases.\n\n`Dropdown` implements the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\nout of the box:\n\n- On the trigger: <kbd>ArrowDown</kbd> or <kbd>Enter</kbd>/<kbd>Space</kbd> open the menu and\n  focus the first item; <kbd>ArrowUp</kbd> opens the menu and focuses the last item;\n  <kbd>Escape</kbd> closes an open menu.\n- Inside the menu: <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> move between items and wrap around;\n  <kbd>Home</kbd>/<kbd>End</kbd> jump to the first/last item; <kbd>Escape</kbd> closes the menu\n  and returns focus to the trigger; <kbd>Tab</kbd> closes the menu and lets focus continue\n  naturally.\n- On an item: <kbd>Enter</kbd> or <kbd>Space</kbd> activates it the way a click does, so its\n  `onClick` runs and the menu closes unless `closeOnClick` is `false`. That includes the\n  default anchor without an `href` and `as=\"div\"`, which the browser would not activate on\n  its own.\n- When running an item closes the menu, by click or by key, focus goes back to the trigger,\n  as it does for <kbd>Escape</kbd>. An item whose `onClick` moves focus somewhere else keeps\n  it there.\n- Disabled items (a `Dropdown.Item` rendered with a native `disabled` attribute or\n  `aria-disabled=\"true\"`) and dividers are skipped during arrow-key navigation.\n\n:::note\nThere is no typeahead and no built-in outside-click handling inside the menu beyond the\nexisting click-outside-to-close behavior — add those yourself if your use case needs them.\n:::",
   "related": ["Button", "Popover", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/components-dropdown--default",
   "summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.",

bestax-mcp/data/components/File.json

@@ -191,7 +191,7 @@
           "name": "iconLeft",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Left icon element. It renders inside the `<label>` that names the file input, beside `buttonLabel`, so pass an `Icon` with `aria-hidden` (`<Icon name=\"upload\" aria-hidden=\"true\" />`); otherwise its default `aria-label=\"icon\"` becomes part of the input's accessible name.",
+          "description": "Left icon element. It renders inside the `<label>` that names the file input, beside `buttonLabel`, so leave an `Icon` here unnamed (`<Icon name=\"upload\" />`): it is then `aria-hidden`, while an `ariaLabel` would join the input's accessible name.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -200,7 +200,7 @@
           "name": "iconRight",
           "type": "React.ReactNode",
           "default": null,
-          "description": "Right icon element. Sits inside the same `<label>` as `iconLeft`, so the same applies: give an `Icon` here `aria-hidden`, or \"icon\" joins the input's accessible name.",
+          "description": "Right icon element. Sits inside the same `<label>` as `iconLeft`, so the same applies: an `Icon` here with an `ariaLabel` joins the input's accessible name.",
           "required": false,
           "inherited": false,
           "deprecated": false

bestax-mcp/data/components/Icon.json

@@ -54,7 +54,7 @@
       "code": "<Icon ariaLabel=\"Custom SVG icon\" textColor=\"primary\">\n  <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"currentColor\">\n    <circle cx=\"8\" cy=\"8\" r=\"6\" />\n  </svg>\n</Icon>"
     }
   ],
-  "accessibility": "- **ARIA label:** `ariaLabel` defaults to `'icon'` and is applied to the container span **unconditionally** — an `Icon` that never sets it still renders `aria-label=\"icon\"`. For an icon-only control, put the real `aria-label` on the control (e.g. `Button`) and set `aria-hidden` on the `Icon`; for a decorative icon beside visible text, set `aria-hidden` on the `Icon` so it doesn't add `\"icon\"` to the accessible name.\n- **Keyboard:** If interactive, use with `Button` or `a` and put the ARIA (`aria-label`, roles) on that control.\n- **Color and size:** Use `textColor`, `bgColor`, and `size` for accessible, themeable icons.\n\n:::note\nFor purely decorative icons, you can use `aria-hidden=\"true\"` via the `...rest` props.\n:::",
+  "accessibility": "- **Decorative by default:** an `Icon` with no `ariaLabel` renders `aria-hidden=\"true\"` and no name, so it adds nothing to the accessible name of a `Button` or text around it. A Material Icons or Material Symbols ligature (`rocket_launch`) stays out of that name too.\n- **Named icons:** set `ariaLabel` on an icon that means something on its own. The container span then renders `role=\"img\"` with that `aria-label`, so the name is the label alone, never the ligature text inside. A non-empty native `aria-label` or `aria-labelledby` counts as a name too, and an explicit `role` or `aria-hidden` wins over either default. An unnamed icon given a `role` or a `tabIndex` of its own isn't hidden, since hiding something focusable is a failure of its own.\n- **Icon-only controls:** put the name on the control (e.g. `Button`'s `aria-label`) and leave the `Icon` unnamed.\n- **Keyboard:** If interactive, use with `Button` or `a` and put the ARIA (`aria-label`, roles) on that control.\n- **Color and size:** Use `textColor`, `bgColor`, and `size` for accessible, themeable icons.",
   "related": ["Button", "Card", "IconText", "useBulmaClasses"],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-icon--default",
   "summary": "The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).",
@@ -182,8 +182,8 @@
         {
           "name": "ariaLabel",
           "type": "string",
-          "default": "'icon'",
-          "description": "ARIA label for accessibility. Applied unconditionally to the container span, so an icon that never sets it still renders `aria-label=\"icon\"`. For an icon-only control, put the real `aria-label` on the control (e.g. `Button`) and set `aria-hidden` here instead — otherwise the control's accessible name is announced as just \"icon\". For a decorative icon beside visible text, set `aria-hidden` here rather than leaving the default, so it doesn't add \"icon\" to the text's accessible name.",
+          "default": null,
+          "description": "Accessible name for an icon that means something on its own. Set it and the container span gets `role=\"img\"` with this `aria-label`, so the name is exactly this text: a Material ligature such as `rocket_launch` inside stays out of it. Leave it unset (or empty) and the icon is decorative: the span renders `aria-hidden=\"true\"` and no name, so it adds nothing to the accessible name of a `Button` or text around it. For an icon-only control, put the name on the control (e.g. `Button`'s `aria-label`) and leave this unset. A non-empty native `aria-label` or `aria-labelledby` passed instead also counts as a name, and an explicit `role` or `aria-hidden` wins over both defaults. An unnamed icon given a `role` or a `tabIndex` of its own isn't hidden, since hiding something focusable is a failure of its own.",
           "required": false,
           "inherited": true,
           "deprecated": false

bestax-mcp/data/components/IconText.json

@@ -253,8 +253,8 @@
         {
           "name": "ariaLabel",
           "type": "string",
-          "default": "'icon'",
-          "description": "ARIA label for accessibility. Applied unconditionally to the container span, so an icon that never sets it still renders `aria-label=\"icon\"`. For an icon-only control, put the real `aria-label` on the control (e.g. `Button`) and set `aria-hidden` here instead — otherwise the control's accessible name is announced as just \"icon\". For a decorative icon beside visible text, set `aria-hidden` here rather than leaving the default, so it doesn't add \"icon\" to the text's accessible name.",
+          "default": null,
+          "description": "Accessible name for an icon that means something on its own. Set it and the container span gets `role=\"img\"` with this `aria-label`, so the name is exactly this text: a Material ligature such as `rocket_launch` inside stays out of it. Leave it unset (or empty) and the icon is decorative: the span renders `aria-hidden=\"true\"` and no name, so it adds nothing to the accessible name of a `Button` or text around it. For an icon-only control, put the name on the control (e.g. `Button`'s `aria-label`) and leave this unset. A non-empty native `aria-label` or `aria-labelledby` passed instead also counts as a name, and an explicit `role` or `aria-hidden` wins over both defaults. An unnamed icon given a `role` or a `tabIndex` of its own isn't hidden, since hiding something focusable is a failure of its own.",
           "required": false,
           "inherited": true,
           "deprecated": false

bestax-mcp/data/components/Panel.json

@@ -276,8 +276,8 @@
         {
           "name": "ariaLabel",
           "type": "string",
-          "default": "'icon'",
-          "description": "ARIA label for accessibility. Applied unconditionally to the container span, so an icon that never sets it still renders `aria-label=\"icon\"`. For an icon-only control, put the real `aria-label` on the control (e.g. `Button`) and set `aria-hidden` here instead — otherwise the control's accessible name is announced as just \"icon\". For a decorative icon beside visible text, set `aria-hidden` here rather than leaving the default, so it doesn't add \"icon\" to the text's accessible name.",
+          "default": null,
+          "description": "Accessible name for an icon that means something on its own. Set it and the container span gets `role=\"img\"` with this `aria-label`, so the name is exactly this text: a Material ligature such as `rocket_launch` inside stays out of it. Leave it unset (or empty) and the icon is decorative: the span renders `aria-hidden=\"true\"` and no name, so it adds nothing to the accessible name of a `Button` or text around it. For an icon-only control, put the name on the control (e.g. `Button`'s `aria-label`) and leave this unset. A non-empty native `aria-label` or `aria-labelledby` passed instead also counts as a name, and an explicit `role` or `aria-hidden` wins over both defaults. An unnamed icon given a `role` or a `tabIndex` of its own isn't hidden, since hiding something focusable is a failure of its own.",
           "required": false,
           "inherited": true,
           "deprecated": false