react-instantsearch 7.38.0 → 7.39.1

package/dist/cjs/ui/Pagination.js

@@ -68,6 +68,7 @@ function Pagination(_0) {
                 currentPage: page + 1,
                 nbPages: nbPages
             }),
+            "aria-current": page === currentPage ? 'page' : undefined,
             href: createURL(page),
             onClick: function onClick() {
                 return onNavigate(page);

package/dist/cjs/ui/SearchBox.js

@@ -160,13 +160,15 @@ function SearchBox(_0) {
     })), /*#__PURE__*/ _react.default.createElement("button", {
         className: (0, _instantsearchuicomponents.cx)('ais-SearchBox-submit', classNames.submit),
         type: "submit",
-        title: translations.submitButtonTitle
+        title: translations.submitButtonTitle,
+        "aria-label": translations.submitButtonTitle
     }, /*#__PURE__*/ _react.default.createElement(SubmitIcon, {
         classNames: classNames
     })), /*#__PURE__*/ _react.default.createElement("button", {
         className: (0, _instantsearchuicomponents.cx)('ais-SearchBox-reset', classNames.reset),
         type: "reset",
         title: translations.resetButtonTitle,
+        "aria-label": translations.resetButtonTitle,
         hidden: value.length === 0 || isSearchStalled
     }, /*#__PURE__*/ _react.default.createElement(ResetIcon, {
         classNames: classNames

package/dist/cjs/ui/ShowMoreButton.js

@@ -10,6 +10,8 @@ Object.defineProperty(exports, "ShowMoreButton", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 function ShowMoreButton(_0) {
@@ -17,7 +19,10 @@ function ShowMoreButton(_0) {
         "isShowingMore",
         "translations"
     ]);
-    return /*#__PURE__*/ _react.default.createElement("button", props, translations.showMoreButtonText({
+    return /*#__PURE__*/ _react.default.createElement("button", _object_spread_props._(_object_spread._({}, props), {
+        "aria-expanded": isShowingMore,
+        "aria-label": translations.showMoreButtonLabel
+    }), translations.showMoreButtonText({
         isShowingMore: isShowingMore
     }));
 }

package/dist/cjs/ui/Stats.js

@@ -9,12 +9,28 @@ Object.defineProperty(exports, "Stats", {
         return Stats;
     }
 });
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _instantsearchuicomponents = require("instantsearch-ui-components");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+// Delay before announcing an update, so that rapid changes (e.g. typing in the
+// search box) settle into a single announcement instead of piling up. Mirrors
+// the debounce used by GOV.UK's accessible-autocomplete.
+var ANNOUNCEMENT_DELAY = 1400;
+var visuallyHiddenStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0
+};
 function Stats(_0) {
     var _0_classNames = _0.classNames, classNames = _0_classNames === void 0 ? {} : _0_classNames, nbHits = _0.nbHits, processingTimeMS = _0.processingTimeMS, nbSortedHits = _0.nbSortedHits, areHitsSorted = _0.areHitsSorted, translations = _0.translations, props = _object_without_properties._(_0, [
         "classNames",
@@ -30,9 +46,35 @@ function Stats(_0) {
         nbSortedHits: nbSortedHits,
         areHitsSorted: areHitsSorted
     };
+    var nextAnnouncement = translations.announcementText ? translations.announcementText(translationOptions) : '';
+    var _useState = _sliced_to_array._((0, _react.useState)(''), 2), announcement = _useState[0], setAnnouncement = _useState[1];
+    var timerRef = (0, _react.useRef)(undefined);
+    var isInitialRef = (0, _react.useRef)(true);
+    (0, _react.useEffect)(function() {
+        // Don't announce the initial results, only subsequent changes.
+        if (isInitialRef.current) {
+            isInitialRef.current = false;
+            return undefined;
+        }
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(function() {
+            setAnnouncement(nextAnnouncement);
+        }, ANNOUNCEMENT_DELAY);
+        return function() {
+            return clearTimeout(timerRef.current);
+        };
+    }, [
+        nextAnnouncement
+    ]);
     return /*#__PURE__*/ _react.default.createElement("div", _object_spread_props._(_object_spread._({}, props), {
         className: (0, _instantsearchuicomponents.cx)('ais-Stats', classNames.root, props.className)
     }), /*#__PURE__*/ _react.default.createElement("span", {
         className: "ais-Stats-text"
-    }, translations.rootElementText(translationOptions)));
+    }, translations.rootElementText(translationOptions)), /*#__PURE__*/ _react.default.createElement("span", {
+        className: "ais-Stats-announcement",
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        style: visuallyHiddenStyle
+    }, announcement));
 }

package/dist/cjs/widgets/RefinementList.js

@@ -105,7 +105,8 @@ function RefinementList(_0) {
         onToggleShowMore: toggleShowMore,
         isShowingMore: isShowingMore,
         translations: {
-            showMoreButtonText: mergedTranslations.showMoreButtonText
+            showMoreButtonText: mergedTranslations.showMoreButtonText,
+            showMoreButtonLabel: translations === null || translations === void 0 ? void 0 : translations.showMoreButtonLabel
         }
     };
     return /*#__PURE__*/ _react.default.createElement(_RefinementList.RefinementList, _object_spread_props._(_object_spread._({}, props, uiProps), {

package/dist/cjs/widgets/Stats.js

@@ -30,6 +30,9 @@ function Stats(_0) {
         translations: _object_spread._({
             rootElementText: function rootElementText(options) {
                 return "".concat(options.areHitsSorted ? getSortedResultsSentence(options) : getResultsSentence(options), " found in ").concat(options.processingTimeMS.toLocaleString(), "ms");
+            },
+            announcementText: function announcementText(options) {
+                return options.areHitsSorted ? getSortedResultsSentence(options) : getResultsSentence(options);
             }
         }, translations)
     };

package/dist/es/ui/Pagination.js

@@ -57,6 +57,7 @@ function Pagination(_0) {
                 currentPage: page + 1,
                 nbPages: nbPages
             }),
+            "aria-current": page === currentPage ? 'page' : undefined,
             href: createURL(page),
             onClick: function onClick() {
                 return onNavigate(page);

package/dist/es/ui/SearchBox.js

@@ -149,13 +149,15 @@ function SearchBox(_0) {
     })), /*#__PURE__*/ React.createElement("button", {
         className: cx('ais-SearchBox-submit', classNames.submit),
         type: "submit",
-        title: translations.submitButtonTitle
+        title: translations.submitButtonTitle,
+        "aria-label": translations.submitButtonTitle
     }, /*#__PURE__*/ React.createElement(SubmitIcon, {
         classNames: classNames
     })), /*#__PURE__*/ React.createElement("button", {
         className: cx('ais-SearchBox-reset', classNames.reset),
         type: "reset",
         title: translations.resetButtonTitle,
+        "aria-label": translations.resetButtonTitle,
         hidden: value.length === 0 || isSearchStalled
     }, /*#__PURE__*/ React.createElement(ResetIcon, {
         classNames: classNames

package/dist/es/ui/ShowMoreButton.d.ts

@@ -14,6 +14,10 @@ export type ShowMoreButtonTranslations = {
      * Alternative text for the "Show more" button.
      */
     showMoreButtonText: (options: ShowMoreButtonTextOptions) => string;
+    /**
+     * Accessible name (aria-label) for the show more button.
+     */
+    showMoreButtonLabel?: string;
 };
 export declare function ShowMoreButton({ isShowingMore, translations, ...props }: ShowMoreButtonProps): React.JSX.Element;
 export {};

package/dist/es/ui/ShowMoreButton.js

@@ -1,3 +1,5 @@
+import { _ as _$2 } from '@swc/helpers/esm/_object_spread.js';
+import { _ as _$1 } from '@swc/helpers/esm/_object_spread_props.js';
 import { _ } from '@swc/helpers/esm/_object_without_properties.js';
 import React from 'react';
 
@@ -6,7 +8,10 @@ function ShowMoreButton(_0) {
         "isShowingMore",
         "translations"
     ]);
-    return /*#__PURE__*/ React.createElement("button", props, translations.showMoreButtonText({
+    return /*#__PURE__*/ React.createElement("button", _$1(_$2({}, props), {
+        "aria-expanded": isShowingMore,
+        "aria-label": translations.showMoreButtonLabel
+    }), translations.showMoreButtonText({
         isShowingMore: isShowingMore
     }));
 }

package/dist/es/ui/Stats.d.ts

@@ -7,6 +7,12 @@ export type StatsProps = React.ComponentProps<'div'> & {
     classNames?: Partial<StatsClassNames>;
     translations: {
         rootElementText: StatsTranslations;
+        /**
+         * Text announced to assistive technologies when the results change. It
+         * omits volatile details (such as the processing time) so that only the
+         * meaningful result count is spoken.
+         */
+        announcementText?: StatsTranslations;
     };
 };
 export type StatsTranslationOptions = Pick<StatsProps, 'nbHits' | 'processingTimeMS' | 'nbSortedHits' | 'areHitsSorted'>;

package/dist/es/ui/Stats.js

@@ -1,9 +1,25 @@
-import { _ as _$2 } from '@swc/helpers/esm/_object_spread.js';
-import { _ as _$1 } from '@swc/helpers/esm/_object_spread_props.js';
+import { _ as _$3 } from '@swc/helpers/esm/_object_spread.js';
+import { _ as _$2 } from '@swc/helpers/esm/_object_spread_props.js';
 import { _ } from '@swc/helpers/esm/_object_without_properties.js';
+import { _ as _$1 } from '@swc/helpers/esm/_sliced_to_array.js';
 import { cx } from 'instantsearch-ui-components';
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
+// Delay before announcing an update, so that rapid changes (e.g. typing in the
+// search box) settle into a single announcement instead of piling up. Mirrors
+// the debounce used by GOV.UK's accessible-autocomplete.
+var ANNOUNCEMENT_DELAY = 1400;
+var visuallyHiddenStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0
+};
 function Stats(_0) {
     var _0_classNames = _0.classNames, classNames = _0_classNames === void 0 ? {} : _0_classNames, nbHits = _0.nbHits, processingTimeMS = _0.processingTimeMS, nbSortedHits = _0.nbSortedHits, areHitsSorted = _0.areHitsSorted, translations = _0.translations, props = _(_0, [
         "classNames",
@@ -19,11 +35,37 @@ function Stats(_0) {
         nbSortedHits: nbSortedHits,
         areHitsSorted: areHitsSorted
     };
-    return /*#__PURE__*/ React.createElement("div", _$1(_$2({}, props), {
+    var nextAnnouncement = translations.announcementText ? translations.announcementText(translationOptions) : '';
+    var _useState = _$1(useState(''), 2), announcement = _useState[0], setAnnouncement = _useState[1];
+    var timerRef = useRef(undefined);
+    var isInitialRef = useRef(true);
+    useEffect(function() {
+        // Don't announce the initial results, only subsequent changes.
+        if (isInitialRef.current) {
+            isInitialRef.current = false;
+            return undefined;
+        }
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(function() {
+            setAnnouncement(nextAnnouncement);
+        }, ANNOUNCEMENT_DELAY);
+        return function() {
+            return clearTimeout(timerRef.current);
+        };
+    }, [
+        nextAnnouncement
+    ]);
+    return /*#__PURE__*/ React.createElement("div", _$2(_$3({}, props), {
         className: cx('ais-Stats', classNames.root, props.className)
     }), /*#__PURE__*/ React.createElement("span", {
         className: "ais-Stats-text"
-    }, translations.rootElementText(translationOptions)));
+    }, translations.rootElementText(translationOptions)), /*#__PURE__*/ React.createElement("span", {
+        className: "ais-Stats-announcement",
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        style: visuallyHiddenStyle
+    }, announcement));
 }
 
 export { Stats };

package/dist/es/widgets/RefinementList.js

@@ -94,7 +94,8 @@ function RefinementList(_0) {
         onToggleShowMore: toggleShowMore,
         isShowingMore: isShowingMore,
         translations: {
-            showMoreButtonText: mergedTranslations.showMoreButtonText
+            showMoreButtonText: mergedTranslations.showMoreButtonText,
+            showMoreButtonLabel: translations === null || translations === void 0 ? void 0 : translations.showMoreButtonLabel
         }
     };
     return /*#__PURE__*/ React.createElement(RefinementList$1, _$3(_$2({}, props, uiProps), {

package/dist/es/widgets/Stats.js

@@ -19,6 +19,9 @@ function Stats(_0) {
         translations: _$1({
             rootElementText: function rootElementText(options) {
                 return "".concat(options.areHitsSorted ? getSortedResultsSentence(options) : getResultsSentence(options), " found in ").concat(options.processingTimeMS.toLocaleString(), "ms");
+            },
+            announcementText: function announcementText(options) {
+                return options.areHitsSorted ? getSortedResultsSentence(options) : getResultsSentence(options);
             }
         }, translations)
     };