diff --git a/docs/api/button-definition.md b/docs/api/button-definition.md index 499f4b0d..9281bc3d 100644 --- a/docs/api/button-definition.md +++ b/docs/api/button-definition.md @@ -90,6 +90,19 @@ Associated panel identifier. When set, clicking the button toggles the panel ope --- +### `ariaControls` +**Type:** `string | function` + +Id of a custom control this button toggles, applied as `aria-controls`. Use when the button opens or expands a custom control rendered elsewhere by the plugin. Can be a string or a function that receives the [Context](./context.md) and returns the id. + +```js +ariaControls: (context) => `${context.appConfig.id}-search-form` +``` + +> Pair this with [`expandedWhen`](#expandedwhen) to also reflect the open/closed state via `aria-expanded`. + +--- + ### `keepFocus` **Type:** `boolean` **Default:** `false` diff --git a/src/App/components/MapButton/MapButton.jsx b/src/App/components/MapButton/MapButton.jsx index fe9237f1..b847d5ad 100755 --- a/src/App/components/MapButton/MapButton.jsx +++ b/src/App/components/MapButton/MapButton.jsx @@ -123,6 +123,9 @@ const getControlledElement = ({ idPrefix, panelId, buttonId, hasMenu }) => { * @param {boolean} options.isPanelOpen - Whether the controlled panel is open * @param {boolean} options.isPopupOpen - Whether the popup menu is open * @param {Object|null} options.controlledElement - The element controlled by this button + * @param {string} [options.ariaControls] - Explicit id for aria-controls when the button controls + * inline UI that is neither a panel nor a popup (e.g. a plugin-owned control). Ignored when + * controlledElement is set, which takes precedence. * @param {string} options.href - URL for anchor element (if provided, renders as instead of