@financial-times/qanda-ui 0.0.1-beta.37 → 0.0.1-beta.39

package/dist/cjs/components/Calendar/index.js

@@ -39,7 +39,8 @@ function Calendar() {
                         className: 'live-qa-calendar-button',
                         'aria-pressed': dropDownVisible,
                         'aria-haspopup': 'true',
-                        'aria-controls': 'menu',
+                        'aria-expanded': dropDownVisible,
+                        'aria-controls': 'live-qa-calendar-list-menu',
                         id: 'live-qa-calendar-button-menu',
                         'data-testid': 'live-qa-calendar-button',
                         'data-trackable': (0, tracking_1.trackingNS)('add-to-calendar-button'),

package/dist/cjs/components/CountdownTimer/index.js

@@ -4,6 +4,7 @@ exports.formatTime = formatTime;
 const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_1 = require("react");
 const QandaProvider_1 = require("../QandaProvider");
+const qanda_1 = require("../../config/qanda");
 const comments_api_1 = require("../../services/comments-api");
 function formatTime(remainingTime) {
     const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
@@ -85,7 +86,7 @@ function CountdownTimer({ container }) {
     }, []);
     const portalElement = data &&
         ((status === 'pre-live' && startDateTime) ||
-            (status === 'live' && endDateTime)) && ((0, jsx_runtime_1.jsx)("div", { className: "qanda-portal countdown-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "countdown-block", children: (0, jsx_runtime_1.jsx)("p", { className: "countdown", children: count && ((0, jsx_runtime_1.jsx)("time", { datetime: status === 'pre-live' ? startDateTime : endDateTime, children: count })) }) }) }));
+            (status === 'live' && endDateTime)) && ((0, jsx_runtime_1.jsx)("div", { className: "qanda-portal countdown-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "countdown-block", children: (0, jsx_runtime_1.jsx)("p", { className: "countdown", children: count && ((0, jsx_runtime_1.jsxs)("time", { datetime: status === 'pre-live' ? startDateTime : endDateTime, children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", children: qanda_1.PRODUCT_NAME }), ' ', count] })) }) }) }));
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_1.createPortal)(portalElement, portalTarget || document.body) });
 }
 exports.default = CountdownTimer;

package/dist/cjs/components/EmbedFormField/index.js

@@ -9,11 +9,14 @@ const react_redux_1 = require("react-redux");
 const questionSlice_1 = require("../../store/questionSlice");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const QandaProvider_1 = require("../QandaProvider");
 const qanda_1 = require("../../config/qanda");
 const tracking_1 = require("../../utils/tracking");
 function EmbedFormField({ container, status = 'pre-live', }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const [portalTarget, setPortalTarget] = (0, react_1.useState)();
+    const modalOpenerRef = (0, react_1.useRef)(null);
+    const { setDialogOpener } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     (0, react_1.useEffect)(() => {
         if (container) {
             const portalContainer = document.createElement('div');
@@ -25,7 +28,10 @@ function EmbedFormField({ container, status = 'pre-live', }) {
             };
         }
     }, []);
-    const portalElement = ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", qanda_1.PRODUCT_NAME, (0, jsx_runtime_1.jsxs)("div", { onClick: () => dispatch((0, questionSlice_1.openForm)()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", "data-trackable": (0, tracking_1.trackingNS)(`embed-form-field-${status}`), "data-component": "embed-form-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "embed-form-field__icon", children: (0, jsx_runtime_1.jsx)("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
+    const portalElement = ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", qanda_1.PRODUCT_NAME, (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                    dispatch((0, questionSlice_1.openForm)());
+                    setDialogOpener?.(modalOpenerRef.current);
+                }, className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", "data-trackable": (0, tracking_1.trackingNS)(`embed-form-field-${status}`), "data-component": "embed-form-field", "aria-haspopup": "dialog", ref: modalOpenerRef, type: "button", children: [(0, jsx_runtime_1.jsx)("span", { className: "embed-form-field__icon", children: (0, jsx_runtime_1.jsx)("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)(portalElement, portalTarget || document.body) });
 }
 exports.default = EmbedFormField;

package/dist/cjs/components/ErrorMessage/humanReadableError.js

@@ -17,6 +17,10 @@ const baseErrorMessages = {
         title: 'Timeout error',
         message: 'The request timed out. You may be on a slow connection. Please try again later.',
     },
+    maintenanceMode: {
+        title: 'Sorry — this "Ask an Expert" page isn’t loading',
+        message: 'We’re working to fix the problem. Please check back soon.',
+    },
 };
 class HumanReadableError {
     constructor(error, customErrorMessages = {}) {
@@ -33,7 +37,9 @@ class HumanReadableError {
                     this._humanReadableError = errorMessages.connectionError;
                 }
                 else if (typeof error.status === 'number' && error.status >= 500) {
-                    this._humanReadableError = errorMessages.serverError;
+                    const typedError = error;
+                    this._humanReadableError =
+                        errorMessages[typedError.data?.error?.errorCode] || errorMessages.serverError;
                 }
                 else if (typeof error.status === 'number' && error.status === 400) {
                     // Assuming as an error  code otherwise will throw an error and we will fallback to generic error

package/dist/cjs/components/ExpertDrawer/index.js

@@ -14,7 +14,7 @@ const Overlay_1 = __importDefault(require("../Overlay"));
 const qanda_1 = require("../../config/qanda");
 function ExpertDrawer() {
     const dispatch = (0, react_redux_1.useDispatch)();
-    const { storyId, useStaging, title } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { storyId, useStaging, title, focusDialogOpener } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const { isExpertFormOpen, expertView } = (0, react_redux_1.useSelector)((state) => state.expert);
     (0, react_1.useEffect)(() => {
         if (isExpertFormOpen) {
@@ -29,7 +29,10 @@ function ExpertDrawer() {
     if (!isExpertFormOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, closeCallback: () => dispatch((0, expertSlice_1.closeExpertForm)()), options: {
+    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: qanda_1.PRODUCT_NAME, closeCallback: () => {
+            dispatch((0, expertSlice_1.closeExpertForm)());
+            focusDialogOpener?.();
+        }, options: {
             shadow: true,
             allowInteraction: true,
         }, children: (0, jsx_runtime_1.jsx)("div", { className: "o-comments", id: "o-comments-stream", "data-o-component": "o-comments", "data-o-comments-article-id": storyId, "data-o-comments-article-url": `https://www.ft.com/content/${storyId}`, "data-o-comments-use-staging-environment": useStaging, "data-o-comments-title": title }) }));

package/dist/cjs/components/FloatingActionBar/index.js

@@ -17,7 +17,8 @@ function LiveIndicator() {
 function FloatingActionBar({ isLive = true }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const isMobile = (0, useIsMobile_1.useIsMobile)();
-    const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { storyId, useStaging, commentsAPIUrl, setDialogOpener } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const modalOpenerRef = (0, react_1.useRef)(null);
     const updatedComments = (0, comments_api_1.useUpdatedComments)({
         storyId,
         useStaging,
@@ -30,6 +31,8 @@ function FloatingActionBar({ isLive = true }) {
         // Scrolling to start of qanda stream title
         const element = document.getElementById('qanda__stream-title');
         if (element) {
+            element.setAttribute('tabindex', '-1'); // Make it focusable
+            element.focus();
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
@@ -37,7 +40,15 @@ function FloatingActionBar({ isLive = true }) {
     const userConfig = {
         description: 'Ask a question',
         testIdSuffix: 'ask-a-question-button',
-        onClick: () => dispatch((0, questionSlice_1.openForm)()),
+        onClick: () => {
+            // modalOpener set on div as Button does not support refs, therefore we need to find the button inside it
+            const { current: modalOpener } = modalOpenerRef;
+            const openerButton = modalOpener?.querySelector('button');
+            if (openerButton) {
+                setDialogOpener?.(openerButton);
+            }
+            dispatch((0, questionSlice_1.openForm)());
+        },
         dataTrackable: 'open_question_form',
     };
     const expertConfig = {
@@ -47,11 +58,12 @@ function FloatingActionBar({ isLive = true }) {
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": (0, tracking_1.trackingNS)('floating-action-bar'), children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [isLive && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": (0, tracking_1.trackingNS)('floating-action-bar'), children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", "aria-live": "polite", role: "alert", children: isLive ? 'This session is now live' : '' }), isLive && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", ref: modalOpenerRef, children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: view.description,
                                     'data-trackable': (0, tracking_1.trackingNS)(view.dataTrackable),
                                     'data-trackable-context-action': view.description,
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
+                                    ariaHasPopup: 'dialog',
                                 }, label: view.description, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: 'Back to top',
                                     'data-trackable': (0, tracking_1.trackingNS)('back_to_top'),

package/dist/cjs/components/MessageBox/index.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
 function MessageBox({ color, extraClassNames = '', text, title, id = '', }) {
-    return ((0, jsx_runtime_1.jsx)("div", { class: `o-message o-message--inner message-box__container ${extraClassNames}`, "data-o-message-close": "false", "data-o-component": "o-message", id: id, children: (0, jsx_runtime_1.jsx)("div", { class: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { class: "message-box__content", children: [(0, jsx_runtime_1.jsx)("span", { style: { color }, class: "o3-type-body-highlight", children: title }), (0, jsx_runtime_1.jsx)("span", { style: { color }, class: "o3-type-body-base", children: text })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: `o-message o-message--inner message-box__container ${extraClassNames}`, "data-o-message-close": "false", "data-o-component": "o-message", id: id, children: (0, jsx_runtime_1.jsx)("div", { className: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "message-box__content", children: [(0, jsx_runtime_1.jsx)("span", { style: { color }, className: "o3-type-body-highlight", children: title }), (0, jsx_runtime_1.jsx)("span", { style: { color }, className: "o3-type-body-base", children: text })] }) }) }));
 }
 exports.default = MessageBox;

package/dist/cjs/components/Overlay/index.js

@@ -4,12 +4,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_1 = require("react");
 const o3_button_1 = require("@financial-times/o3-button");
 const classnames_1 = __importDefault(require("classnames"));
 function Overlay({ title, children, closeCallback, options = {}, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", children: [!options.allowInteraction && (0, jsx_runtime_1.jsx)("div", { className: "overlay__outer" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
+    // Trap keyboard focus within the overlay for accessibility
+    const trapFocus = (event) => {
+        if (event.key !== 'Tab')
+            return;
+        if (event.target === endFocusBtn.current) {
+            titleRef.current?.focus();
+        }
+        else if (event.target === titleRef.current && event.shiftKey) {
+            endFocusBtn.current?.focus();
+        }
+    };
+    const titleRef = (0, react_1.useRef)(null);
+    const endFocusBtn = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        titleRef.current?.focus();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "overlay-title", children: [!options.allowInteraction && (0, jsx_runtime_1.jsx)("div", { className: "overlay__outer" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
                     'overlay__inner',
                     { 'overlay__inner--shadow': options.shadow },
-                ]), children: [(0, jsx_runtime_1.jsx)("div", { className: "overlay__header", children: (0, jsx_runtime_1.jsxs)("div", { className: "overlay__header-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight overlay__header-title", children: title }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "overlay__content", children: children })] })] }));
+                ]), children: [(0, jsx_runtime_1.jsx)("div", { className: "overlay__header", children: (0, jsx_runtime_1.jsxs)("div", { className: "overlay__header-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight overlay__header-title", id: "overlay-title", tabIndex: 0, ref: titleRef, onKeyDown: trapFocus, children: title }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "overlay__content", children: children })] }), (0, jsx_runtime_1.jsx)("button", { className: "o3-visually-hidden", "aria-label": "Close", onClick: () => closeCallback(), ref: endFocusBtn, onKeyDown: trapFocus, type: "button", children: "Close" })] }));
 }
 exports.default = Overlay;

package/dist/cjs/components/Qanda.js

@@ -26,12 +26,6 @@ function Qanda({ storyId, useStaging, title, commentsAPIHost, commentsAPIVersion
         console.error('Missing required props');
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: store_1.store, children: (0, jsx_runtime_1.jsx)(QandaProvider_1.QandaContext.Provider, { value: {
-                storyId,
-                useStaging,
-                commentsAPIUrl: cleanCommentsAPIUrl,
-                title,
-                maxQuestionLength,
-            }, children: (0, jsx_runtime_1.jsx)(QandaContainer_1.default, { embedFormFieldContainer: embedFormFieldContainer, countdownTimerContainer: countdownTimerContainer }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: store_1.store, children: (0, jsx_runtime_1.jsx)(QandaProvider_1.QandaProvider, { storyId: storyId, useStaging: useStaging, commentsAPIUrl: cleanCommentsAPIUrl, title: title, maxQuestionLength: maxQuestionLength, children: (0, jsx_runtime_1.jsx)(QandaContainer_1.default, { embedFormFieldContainer: embedFormFieldContainer, countdownTimerContainer: countdownTimerContainer }) }) }));
 }
 exports.default = Qanda;

package/dist/cjs/components/QandaBlock/index.js

@@ -74,6 +74,6 @@ function QandaBlock({ id, body, children, byline, summary, showAnswerTime = fals
             observer.disconnect();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": (0, tracking_1.trackingNS)('question'), children: [summary && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false }) }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": (0, tracking_1.trackingNS)('answer'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? ((0, jsx_runtime_1.jsx)(Author_1.default, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : ((0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": (0, tracking_1.trackingNS)('question'), children: [summary && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), (0, jsx_runtime_1.jsxs)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", children: "Question by " }), (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false })] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": (0, tracking_1.trackingNS)('answer'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", children: "Reply from " }), child.author ? ((0, jsx_runtime_1.jsx)(Author_1.default, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : ((0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: child.byline, showEditedBy: false }))] }), showAnswerTime && ((0, jsx_runtime_1.jsxs)("span", { className: "o3-type-detail", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", children: "Published at " }), renderTime(child.publishedDate)] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
 }
 exports.default = QandaBlock;

package/dist/cjs/components/QandaContainer.js

@@ -16,6 +16,7 @@ const Calendar_1 = __importDefault(require("./Calendar"));
 const CountdownTimer_1 = __importDefault(require("./CountdownTimer"));
 const FloatingActionBar_1 = __importDefault(require("./FloatingActionBar"));
 const EmbedFormField_1 = __importDefault(require("./EmbedFormField"));
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const QandaProvider_1 = require("./QandaProvider");
 const comments_api_1 = require("../services/comments-api");
 const qanda_1 = require("../config/qanda");
@@ -47,7 +48,7 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     });
     const status = updatedQA?.status || data?.status || 'pre-live';
     const profile = (0, react_redux_1.useSelector)((state) => state.user.profile);
-    const { data: roleData } = (0, comments_api_1.useGetUserRolesQuery)({
+    const { data: roleData, error: roleError } = (0, comments_api_1.useGetUserRolesQuery)({
         storyId,
         useStaging,
         commentsAPIUrl,
@@ -67,6 +68,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             dispatch(comments_api_1.nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { isLive: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer, status: status }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '16px' }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, operation: "stream-load" }) })), roleError && !error && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '16px' }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: roleError, storyId: storyId, operation: "profile-load" }) })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { isLive: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer, status: status }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
 }
 exports.default = QandaContainer;

package/dist/cjs/components/QandaProvider.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QandaContext = void 0;
+exports.QandaProvider = exports.QandaContext = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_1 = require("react");
 exports.QandaContext = (0, react_1.createContext)({
     storyId: '',
@@ -9,3 +10,32 @@ exports.QandaContext = (0, react_1.createContext)({
     title: '',
     maxQuestionLength: 0,
 });
+const QandaProvider = ({ children, storyId, useStaging, commentsAPIUrl, title, maxQuestionLength = 0, }) => {
+    const dialogOpenerRef = (0, react_1.useRef)(null);
+    const setDialogOpener = (0, react_1.useCallback)((opener) => {
+        dialogOpenerRef.current = opener;
+    }, []);
+    const focusDialogOpener = (0, react_1.useCallback)(() => {
+        dialogOpenerRef.current?.focus();
+        dialogOpenerRef.current = null;
+    }, []);
+    const contextValues = (0, react_1.useMemo)(() => ({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        title,
+        maxQuestionLength,
+        setDialogOpener,
+        focusDialogOpener,
+    }), [
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        title,
+        maxQuestionLength,
+        setDialogOpener,
+        focusDialogOpener,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(exports.QandaContext.Provider, { value: contextValues, children: children }));
+};
+exports.QandaProvider = QandaProvider;

package/dist/cjs/components/QuestionForm/index.js

@@ -21,16 +21,16 @@ const user_1 = require("../../store/user");
 const validate_display_name_1 = __importDefault(require("../../utils/validate-display-name"));
 const messagesByUserType_1 = require("./messagesByUserType");
 const tracking_1 = require("../../utils/tracking");
-const MIN_QUESTION_LENGTH = 20;
-const MAX_QUESTION_LENGTH = 300;
 function QuestionForm() {
     const dispatch = (0, react_redux_1.useDispatch)();
-    const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { storyId, useStaging, commentsAPIUrl, maxQuestionLength, focusDialogOpener, } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const [postAnonymously, setPostAnonymously] = (0, react_1.useState)(false);
     const [newDisplayName, setNewDisplayName] = (0, react_1.useState)(null);
     const [submitEnabled, setSubmitEnabled] = (0, react_1.useState)(false);
     const { isFormOpen, question, displayNameError } = (0, react_redux_1.useSelector)((state) => state.question);
     const { profile, error: userDisplayNameError } = (0, react_redux_1.useSelector)((state) => state.user);
+    const MIN_QUESTION_LENGTH = 20;
+    const MAX_QUESTION_LENGTH = maxQuestionLength || 300;
     // NB: reset will have the effect of setting things like error to null and isSuccess to empty
     // you use this when you want to clear the state of the usePostQuestionMutation hook as if you had just started on the page
     // as we allow users to see things like error messages and success messages, we do not clear those until we try to send another mutation, otherwise those things will clear too early
@@ -103,12 +103,16 @@ function QuestionForm() {
             }
         }
         try {
+            // set nudge to false if the error is a suspect word, as the user can choose to submit it for moderator review
+            const errorCode = error?.data?.error?.errorCode ?? undefined;
+            const nudge = errorCode !== 'TOXIC_COMMENT';
             await postQuestion({
                 token: updatedProfile?.token || profile?.token || '',
                 storyId,
                 useStaging,
                 commentsAPIUrl,
                 question: question,
+                nudge,
                 postAnonymously,
             }).unwrap();
         }
@@ -129,14 +133,15 @@ function QuestionForm() {
     // are implemented by Origami team.
     // Ticket CI-2770 was created to address this in the future.
     (0, jsx_runtime_1.jsxs)(Overlay_1.default, { title: "Ask a question", closeCallback: () => {
+            focusDialogOpener?.();
             setNewDisplayName(null);
             dispatch((0, questionSlice_1.closeForm)());
-        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", "data-trackable-context-trigger_action": "open question form", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-trackable": (0, tracking_1.trackingNS)(`submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`), children: [(0, jsx_runtime_1.jsxs)("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [(0, jsx_runtime_1.jsx)("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
+        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", "data-trackable-context-trigger_action": "open question form", children: (0, jsx_runtime_1.jsxs)("form", { "aria-busy": isLoading, onSubmit: handleSubmit, "data-trackable": (0, tracking_1.trackingNS)(`submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`), children: [(0, jsx_runtime_1.jsxs)("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [(0, jsx_runtime_1.jsx)("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), (0, jsx_runtime_1.jsxs)("span", { className: "o3-visually-hidden", children: ["Your user name is", ' '] }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "display-name", className: "question-form__displayname-input o-forms-field", "aria-live": "polite", "aria-atomic": "true", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
                                                 'question-form__displayname__input',
                                                 'o-forms-input',
                                                 'o-forms-input--text',
                                                 { 'o-forms-input--invalid': !!displayNameError },
-                                            ]), children: [(0, jsx_runtime_1.jsx)("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
+                                            ]), children: [(0, jsx_runtime_1.jsx)("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-describedby": "question-form-disclaimer", "aria-invalid": displayNameError ? 'true' : undefined, "aria-errormessage": displayNameError ??
                                                         'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": (0, tracking_1.trackingNS)(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", className: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
                                         'o-forms-input',
                                         'o-forms-input--textarea',
@@ -144,7 +149,7 @@ function QuestionForm() {
                                         {
                                             'input-textarea__error': question.length > MAX_QUESTION_LENGTH,
                                         },
-                                    ]), children: [(0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", className: "input-textarea", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail input-textarea__counter", children: `${question.length}/${MAX_QUESTION_LENGTH}` })] })] }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)([
+                                    ]), children: [(0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", className: "input-textarea", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", "aria-describedby": "question-form-description", placeholder: "Type your question", "aria-invalid": error ? 'true' : undefined, "aria-errormessage": error ? 'question-form-error-message' : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail input-textarea__counter", "aria-label": `Your question is ${question.length} characters long, maximum allowed is ${MAX_QUESTION_LENGTH}`, children: `${question.length}/${MAX_QUESTION_LENGTH}` })] })] }), (0, jsx_runtime_1.jsx)("span", { id: "question-form-description", "aria-live": "polite", className: (0, classnames_1.default)([
                                 'o3-type-detail',
                                 {
                                     'input--textarea__error-message': question.length > MAX_QUESTION_LENGTH,
@@ -164,35 +169,35 @@ function QuestionForm() {
                             }, 
                             // @ts-expect-error - o3 Button is currently accepting a JSX element as label
                             // but the type definition needs to be updated by Origami team
-                            label: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && ((0, jsx_runtime_1.jsx)(MessageBox_1.default, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question is in the queue and will be reviewed by our editors." })), error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, errorMapping: {
-                    // Messages for specific error codes
-                    REPEAT_POST: {
-                        title: 'Question already submitted',
-                        message: "You've already submitted this question. Try asking something different and submit again.",
-                    },
-                    REJECTED: {
-                        title: 'Question rejected',
-                        message: 'This question has been rejected for language that violates our guidelines.',
-                    },
-                    RATE_LIMIT_EXCEEDED: {
-                        title: 'Too many questions',
-                        message: 'You are submitting too many questions in a short amount of time. Please wait sometime before submitting another question.',
-                    },
-                    TOXIC_COMMENT: {
-                        title: 'Question blocked',
-                        message: 'Are you sure? The language in your question might violate our community guidelines. You can edit it or submit it for moderator review.',
-                    },
-                    serverError: {
-                        title: 'Server error',
-                        message: 'There was a server error. Please try submitting your question again.',
-                    },
-                    connectionError: {
-                        title: 'Connection error',
-                        message: "You can't submit your question. Check your internet connection or browser settings and try again.",
-                    },
-                    timeoutError: {
-                        title: 'Timeout error',
-                        message: 'The request timed out. Please try submitting your question again.',
-                    },
-                }, operation: "submit-question", id: "question-form-error-message" })), (0, jsx_runtime_1.jsx)(MessageBox_1.default, { extraClassNames: "o-message--notice o-message--inform", title: (0, messagesByUserType_1.getTitleByUser)(profile), text: (0, messagesByUserType_1.getTextByUser)(profile) })] }));
+                            label: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", id: "question-form-disclaimer", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && ((0, jsx_runtime_1.jsx)("div", { role: "alert", "aria-live": "polite", children: (0, jsx_runtime_1.jsx)(MessageBox_1.default, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question is in the queue and will be reviewed by our editors." }) })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", role: "alert", id: "question-form-error-message", children: error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, errorMapping: {
+                        // Messages for specific error codes
+                        REPEAT_POST: {
+                            title: 'Question already submitted',
+                            message: "You've already submitted this question. Try asking something different and submit again.",
+                        },
+                        REJECTED: {
+                            title: 'Question rejected',
+                            message: 'This question has been rejected for language that violates our guidelines.',
+                        },
+                        RATE_LIMIT_EXCEEDED: {
+                            title: 'Too many questions',
+                            message: 'You are submitting too many questions in a short amount of time. Please wait sometime before submitting another question.',
+                        },
+                        TOXIC_COMMENT: {
+                            title: 'Question blocked',
+                            message: 'Are you sure? The language in your question might violate our community guidelines. You can edit it, or if you submit, it will need moderator review. This could slow down a reply from our experts',
+                        },
+                        serverError: {
+                            title: 'Server error',
+                            message: 'There was a server error. Please try submitting your question again.',
+                        },
+                        connectionError: {
+                            title: 'Connection error',
+                            message: "You can't submit your question. Check your internet connection or browser settings and try again.",
+                        },
+                        timeoutError: {
+                            title: 'Timeout error',
+                            message: 'The request timed out. Please try submitting your question again.',
+                        },
+                    }, operation: "submit-question" })) }), (0, jsx_runtime_1.jsx)(MessageBox_1.default, { extraClassNames: "o-message--notice o-message--inform", title: (0, messagesByUserType_1.getTitleByUser)(profile), text: (0, messagesByUserType_1.getTextByUser)(profile) })] }));
 }

package/dist/cjs/index.js

@@ -31,7 +31,7 @@ class QandaUI {
             (containerElement.dataset.qandaMaxquestionlength
                 ? parseInt(containerElement.dataset.qandaMaxquestionlength, 10)
                 : undefined) ??
-            2000;
+            300;
         if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
             throw new Error('Required properties are missing');
         }

package/dist/cjs/services/comments-api.js

@@ -157,14 +157,14 @@ exports.nextCommentsApi = (0, react_1.createApi)({
         }),
         // POST A QUESTION
         postQuestion: builder.mutation({
-            query: ({ storyId, useStaging, commentsAPIUrl, token, question, postAnonymously, }) => ({
+            query: ({ storyId, useStaging, commentsAPIUrl, token, question, nudge = true, postAnonymously, }) => ({
                 url: `${commentsAPIUrl}/story/${storyId}/question${useStaging ? '?staging=1' : ''}`,
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     Authorization: `Bearer ${token}`,
                 },
-                body: JSON.stringify({ question, postAnonymously, token }),
+                body: JSON.stringify({ question, postAnonymously, token, nudge }),
             }),
             transformResponse: (response) => {
                 return response.data;

package/dist/esm/components/Calendar/index.js

@@ -34,7 +34,8 @@ function Calendar() {
                         className: 'live-qa-calendar-button',
                         'aria-pressed': dropDownVisible,
                         'aria-haspopup': 'true',
-                        'aria-controls': 'menu',
+                        'aria-expanded': dropDownVisible,
+                        'aria-controls': 'live-qa-calendar-list-menu',
                         id: 'live-qa-calendar-button-menu',
                         'data-testid': 'live-qa-calendar-button',
                         'data-trackable': trackingNS('add-to-calendar-button'),

package/dist/esm/components/CountdownTimer/index.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useEffect, useState, useContext, createPortal } from 'react';
 import { QandaContext } from '../QandaProvider';
+import { PRODUCT_NAME } from '../../config/qanda';
 import { useGetQandAStreamQuery, useUpdatedQA, } from '../../services/comments-api';
 export function formatTime(remainingTime) {
     const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
@@ -82,7 +83,7 @@ function CountdownTimer({ container }) {
     }, []);
     const portalElement = data &&
         ((status === 'pre-live' && startDateTime) ||
-            (status === 'live' && endDateTime)) && (_jsx("div", { className: "qanda-portal countdown-wrapper", children: _jsx("div", { className: "countdown-block", children: _jsx("p", { className: "countdown", children: count && (_jsx("time", { datetime: status === 'pre-live' ? startDateTime : endDateTime, children: count })) }) }) }));
+            (status === 'live' && endDateTime)) && (_jsx("div", { className: "qanda-portal countdown-wrapper", children: _jsx("div", { className: "countdown-block", children: _jsx("p", { className: "countdown", children: count && (_jsxs("time", { datetime: status === 'pre-live' ? startDateTime : endDateTime, children: [_jsx("span", { className: "o3-visually-hidden", children: PRODUCT_NAME }), ' ', count] })) }) }) }));
     return _jsx(_Fragment, { children: createPortal(portalElement, portalTarget || document.body) });
 }
 export default CountdownTimer;

package/dist/esm/components/EmbedFormField/index.js

@@ -2,13 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 import oTracking from '@financial-times/o-tracking';
 import { useDispatch } from 'react-redux';
 import { openForm } from '../../store/questionSlice';
-import { useEffect, useState } from 'react';
+import { useRef, useEffect, useState, useContext } from 'react';
 import { createPortal } from 'react-dom';
+import { QandaContext } from '../QandaProvider';
 import { PRODUCT_NAME } from '../../config/qanda';
 import { trackingNS } from '../../utils/tracking';
 function EmbedFormField({ container, status = 'pre-live', }) {
     const dispatch = useDispatch();
     const [portalTarget, setPortalTarget] = useState();
+    const modalOpenerRef = useRef(null);
+    const { setDialogOpener } = useContext(QandaContext);
     useEffect(() => {
         if (container) {
             const portalContainer = document.createElement('div');
@@ -20,7 +23,10 @@ function EmbedFormField({ container, status = 'pre-live', }) {
             };
         }
     }, []);
-    const portalElement = (_jsxs("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", PRODUCT_NAME, _jsxs("div", { onClick: () => dispatch(openForm()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", "data-trackable": trackingNS(`embed-form-field-${status}`), "data-component": "embed-form-field", children: [_jsx("span", { className: "embed-form-field__icon", children: _jsx("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
+    const portalElement = (_jsxs("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", PRODUCT_NAME, _jsxs("button", { onClick: () => {
+                    dispatch(openForm());
+                    setDialogOpener?.(modalOpenerRef.current);
+                }, className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", "data-trackable": trackingNS(`embed-form-field-${status}`), "data-component": "embed-form-field", "aria-haspopup": "dialog", ref: modalOpenerRef, type: "button", children: [_jsx("span", { className: "embed-form-field__icon", children: _jsx("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
     return _jsx(_Fragment, { children: createPortal(portalElement, portalTarget || document.body) });
 }
 export default EmbedFormField;

package/dist/esm/components/ErrorMessage/humanReadableError.js

@@ -15,6 +15,10 @@ const baseErrorMessages = {
         title: 'Timeout error',
         message: 'The request timed out. You may be on a slow connection. Please try again later.',
     },
+    maintenanceMode: {
+        title: 'Sorry — this "Ask an Expert" page isn’t loading',
+        message: 'We’re working to fix the problem. Please check back soon.',
+    },
 };
 export default class HumanReadableError {
     constructor(error, customErrorMessages = {}) {
@@ -31,7 +35,9 @@ export default class HumanReadableError {
                     this._humanReadableError = errorMessages.connectionError;
                 }
                 else if (typeof error.status === 'number' && error.status >= 500) {
-                    this._humanReadableError = errorMessages.serverError;
+                    const typedError = error;
+                    this._humanReadableError =
+                        errorMessages[typedError.data?.error?.errorCode] || errorMessages.serverError;
                 }
                 else if (typeof error.status === 'number' && error.status === 400) {
                     // Assuming as an error  code otherwise will throw an error and we will fallback to generic error

package/dist/esm/components/ExpertDrawer/index.js

@@ -9,7 +9,7 @@ import Overlay from '../Overlay';
 import { PRODUCT_NAME } from '../../config/qanda';
 function ExpertDrawer() {
     const dispatch = useDispatch();
-    const { storyId, useStaging, title } = useContext(QandaContext);
+    const { storyId, useStaging, title, focusDialogOpener } = useContext(QandaContext);
     const { isExpertFormOpen, expertView } = useSelector((state) => state.expert);
     useEffect(() => {
         if (isExpertFormOpen) {
@@ -24,7 +24,10 @@ function ExpertDrawer() {
     if (!isExpertFormOpen) {
         return null;
     }
-    return (_jsx(Overlay, { title: PRODUCT_NAME, closeCallback: () => dispatch(closeExpertForm()), options: {
+    return (_jsx(Overlay, { title: PRODUCT_NAME, closeCallback: () => {
+            dispatch(closeExpertForm());
+            focusDialogOpener?.();
+        }, options: {
             shadow: true,
             allowInteraction: true,
         }, children: _jsx("div", { className: "o-comments", id: "o-comments-stream", "data-o-component": "o-comments", "data-o-comments-article-id": storyId, "data-o-comments-article-url": `https://www.ft.com/content/${storyId}`, "data-o-comments-use-staging-environment": useStaging, "data-o-comments-title": title }) }));

package/dist/esm/components/FloatingActionBar/index.js

@@ -6,7 +6,7 @@ import { openExpertForm } from '../../store/expertSlice';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useUpdatedComments } from '../../services/comments-api';
 import { updateComments } from '../../store/updateComments';
-import { useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { QandaContext } from '../QandaProvider';
 import { trackingNS } from '../../utils/tracking';
 function LiveIndicator() {
@@ -15,7 +15,8 @@ function LiveIndicator() {
 function FloatingActionBar({ isLive = true }) {
     const dispatch = useDispatch();
     const isMobile = useIsMobile();
-    const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+    const { storyId, useStaging, commentsAPIUrl, setDialogOpener } = useContext(QandaContext);
+    const modalOpenerRef = useRef(null);
     const updatedComments = useUpdatedComments({
         storyId,
         useStaging,
@@ -28,6 +29,8 @@ function FloatingActionBar({ isLive = true }) {
         // Scrolling to start of qanda stream title
         const element = document.getElementById('qanda__stream-title');
         if (element) {
+            element.setAttribute('tabindex', '-1'); // Make it focusable
+            element.focus();
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
@@ -35,7 +38,15 @@ function FloatingActionBar({ isLive = true }) {
     const userConfig = {
         description: 'Ask a question',
         testIdSuffix: 'ask-a-question-button',
-        onClick: () => dispatch(openForm()),
+        onClick: () => {
+            // modalOpener set on div as Button does not support refs, therefore we need to find the button inside it
+            const { current: modalOpener } = modalOpenerRef;
+            const openerButton = modalOpener?.querySelector('button');
+            if (openerButton) {
+                setDialogOpener?.(openerButton);
+            }
+            dispatch(openForm());
+        },
         dataTrackable: 'open_question_form',
     };
     const expertConfig = {
@@ -45,11 +56,12 @@ function FloatingActionBar({ isLive = true }) {
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    return (_jsxs("div", { className: "floating-action-bar__container", "data-trackable": trackingNS('floating-action-bar'), children: [_jsx("div", { className: "floating-action-bar__fade-overlay" }), _jsxs("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [isLive && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", children: [_jsx(Button, { attributes: {
+    return (_jsxs("div", { className: "floating-action-bar__container", "data-trackable": trackingNS('floating-action-bar'), children: [_jsx("div", { className: "floating-action-bar__fade-overlay" }), _jsxs("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [_jsx("span", { className: "o3-visually-hidden", "aria-live": "polite", role: "alert", children: isLive ? 'This session is now live' : '' }), isLive && _jsx(LiveIndicator, {}), _jsxs("div", { className: "floating-action-bar__buttons", ref: modalOpenerRef, children: [_jsx(Button, { attributes: {
                                     ariaLabel: view.description,
                                     'data-trackable': trackingNS(view.dataTrackable),
                                     'data-trackable-context-action': view.description,
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
+                                    ariaHasPopup: 'dialog',
                                 }, label: view.description, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), _jsx(Button, { attributes: {
                                     ariaLabel: 'Back to top',
                                     'data-trackable': trackingNS('back_to_top'),

package/dist/esm/components/MessageBox/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 function MessageBox({ color, extraClassNames = '', text, title, id = '', }) {
-    return (_jsx("div", { class: `o-message o-message--inner message-box__container ${extraClassNames}`, "data-o-message-close": "false", "data-o-component": "o-message", id: id, children: _jsx("div", { class: "o-message__container", children: _jsxs("div", { class: "message-box__content", children: [_jsx("span", { style: { color }, class: "o3-type-body-highlight", children: title }), _jsx("span", { style: { color }, class: "o3-type-body-base", children: text })] }) }) }));
+    return (_jsx("div", { className: `o-message o-message--inner message-box__container ${extraClassNames}`, "data-o-message-close": "false", "data-o-component": "o-message", id: id, children: _jsx("div", { className: "o-message__container", children: _jsxs("div", { className: "message-box__content", children: [_jsx("span", { style: { color }, className: "o3-type-body-highlight", children: title }), _jsx("span", { style: { color }, className: "o3-type-body-base", children: text })] }) }) }));
 }
 export default MessageBox;

package/dist/esm/components/Overlay/index.js

@@ -1,10 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { Button } from '@financial-times/o3-button';
 import classNames from 'classnames';
 function Overlay({ title, children, closeCallback, options = {}, }) {
-    return (_jsxs("div", { className: "overlay", children: [!options.allowInteraction && _jsx("div", { className: "overlay__outer" }), _jsxs("div", { className: classNames([
+    // Trap keyboard focus within the overlay for accessibility
+    const trapFocus = (event) => {
+        if (event.key !== 'Tab')
+            return;
+        if (event.target === endFocusBtn.current) {
+            titleRef.current?.focus();
+        }
+        else if (event.target === titleRef.current && event.shiftKey) {
+            endFocusBtn.current?.focus();
+        }
+    };
+    const titleRef = useRef(null);
+    const endFocusBtn = useRef(null);
+    useEffect(() => {
+        titleRef.current?.focus();
+    }, []);
+    return (_jsxs("div", { className: "overlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "overlay-title", children: [!options.allowInteraction && _jsx("div", { className: "overlay__outer" }), _jsxs("div", { className: classNames([
                     'overlay__inner',
                     { 'overlay__inner--shadow': options.shadow },
-                ]), children: [_jsx("div", { className: "overlay__header", children: _jsxs("div", { className: "overlay__header-bar", children: [_jsx("span", { className: "o3-type-body-highlight overlay__header-title", children: title }), _jsx(Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), _jsx("div", { className: "overlay__content", children: children })] })] }));
+                ]), children: [_jsx("div", { className: "overlay__header", children: _jsxs("div", { className: "overlay__header-bar", children: [_jsx("span", { className: "o3-type-body-highlight overlay__header-title", id: "overlay-title", tabIndex: 0, ref: titleRef, onKeyDown: trapFocus, children: title }), _jsx(Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), _jsx("div", { className: "overlay__content", children: children })] }), _jsx("button", { className: "o3-visually-hidden", "aria-label": "Close", onClick: () => closeCallback(), ref: endFocusBtn, onKeyDown: trapFocus, type: "button", children: "Close" })] }));
 }
 export default Overlay;

package/dist/esm/components/Qanda.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { Provider } from 'react-redux';
 import { store } from '../store';
 import QandaContainer from './QandaContainer';
-import { QandaContext } from './QandaProvider';
+import { QandaProvider } from './QandaProvider';
 function Qanda({ storyId, useStaging, title, commentsAPIHost, commentsAPIVersion, maxQuestionLength, embedFormFieldContainer, countdownTimerContainer, }) {
     // check we have a valid ft.com url and remove any trailing slashes
     const allowedHostRegx = /^[\w\-\.]+(\.ft\.com|\.ftweb\.tech)$/i;
@@ -21,12 +21,6 @@ function Qanda({ storyId, useStaging, title, commentsAPIHost, commentsAPIVersion
         console.error('Missing required props');
         return null;
     }
-    return (_jsx(Provider, { store: store, children: _jsx(QandaContext.Provider, { value: {
-                storyId,
-                useStaging,
-                commentsAPIUrl: cleanCommentsAPIUrl,
-                title,
-                maxQuestionLength,
-            }, children: _jsx(QandaContainer, { embedFormFieldContainer: embedFormFieldContainer, countdownTimerContainer: countdownTimerContainer }) }) }));
+    return (_jsx(Provider, { store: store, children: _jsx(QandaProvider, { storyId: storyId, useStaging: useStaging, commentsAPIUrl: cleanCommentsAPIUrl, title: title, maxQuestionLength: maxQuestionLength, children: _jsx(QandaContainer, { embedFormFieldContainer: embedFormFieldContainer, countdownTimerContainer: countdownTimerContainer }) }) }));
 }
 export default Qanda;

package/dist/esm/components/QandaBlock/index.js

@@ -69,6 +69,6 @@ function QandaBlock({ id, body, children, byline, summary, showAnswerTime = fals
             observer.disconnect();
         };
     }, []);
-    return (_jsxs("div", { className: "qanda-block", children: [_jsxs("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": trackingNS('question'), children: [summary && (_jsx("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), _jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: _jsx(Byline, { structuredContent: byline, showEditedBy: false }) }), _jsx("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: _jsx(RichText, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && (_jsxs("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": trackingNS('answer'), children: [_jsxs("div", { className: "qanda-block__answer-header", children: [_jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? (_jsx(Author, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : (_jsx(Byline, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && (_jsx("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), _jsx("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: _jsx(RichText, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
+    return (_jsxs("div", { className: "qanda-block", children: [_jsxs("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": trackingNS('question'), children: [summary && (_jsx("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), _jsxs("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: [_jsx("span", { className: "o3-visually-hidden", children: "Question by " }), _jsx(Byline, { structuredContent: byline, showEditedBy: false })] }), _jsx("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: _jsx(RichText, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && (_jsxs("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": trackingNS('answer'), children: [_jsxs("div", { className: "qanda-block__answer-header", children: [_jsxs("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: [_jsx("span", { className: "o3-visually-hidden", children: "Reply from " }), child.author ? (_jsx(Author, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : (_jsx(Byline, { structuredContent: child.byline, showEditedBy: false }))] }), showAnswerTime && (_jsxs("span", { className: "o3-type-detail", children: [_jsx("span", { className: "o3-visually-hidden", children: "Published at " }), renderTime(child.publishedDate)] }))] }), _jsx("div", { className: "o3-type-body-content-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: _jsx(RichText, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
 }
 export default QandaBlock;

package/dist/esm/components/QandaContainer.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState, useEffect, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { getUserProfile } from '../store/user';
@@ -11,6 +11,7 @@ import Calendar from './Calendar';
 import CountdownTimer from './CountdownTimer';
 import FloatingActionBar from './FloatingActionBar';
 import EmbedFormField from './EmbedFormField';
+import ErrorMessage from './ErrorMessage';
 import { QandaContext } from './QandaProvider';
 import { useGetQandAStreamQuery, useUpdatedQA, useGetUserRolesQuery, nextCommentsApi, } from '../services/comments-api';
 import { PRODUCT_NAME } from '../config/qanda';
@@ -42,7 +43,7 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     });
     const status = updatedQA?.status || data?.status || 'pre-live';
     const profile = useSelector((state) => state.user.profile);
-    const { data: roleData } = useGetUserRolesQuery({
+    const { data: roleData, error: roleError } = useGetUserRolesQuery({
         storyId,
         useStaging,
         commentsAPIUrl,
@@ -62,6 +63,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             dispatch(nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    return (_jsxs("div", { className: "qanda-container", children: [error && (_jsxs("p", { children: ["We are not able to load ", PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), _jsx(Survey, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { isLive: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer, status: status }))] })), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+    return (_jsxs("div", { className: "qanda-container", children: [error && (_jsx("div", { style: { marginBottom: '16px' }, children: _jsx(ErrorMessage, { error: error, storyId: storyId, operation: "stream-load" }) })), roleError && !error && (_jsx("div", { style: { marginBottom: '16px' }, children: _jsx(ErrorMessage, { error: roleError, storyId: storyId, operation: "profile-load" }) })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), _jsx(Survey, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { isLive: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer, status: status }))] })), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
 }
 export default QandaContainer;

package/dist/esm/components/QandaProvider.js

@@ -1,4 +1,5 @@
-import { createContext } from 'react';
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { createContext, useRef, useCallback, useMemo } from 'react';
 export const QandaContext = createContext({
     storyId: '',
     useStaging: true,
@@ -6,3 +7,31 @@ export const QandaContext = createContext({
     title: '',
     maxQuestionLength: 0,
 });
+export const QandaProvider = ({ children, storyId, useStaging, commentsAPIUrl, title, maxQuestionLength = 0, }) => {
+    const dialogOpenerRef = useRef(null);
+    const setDialogOpener = useCallback((opener) => {
+        dialogOpenerRef.current = opener;
+    }, []);
+    const focusDialogOpener = useCallback(() => {
+        dialogOpenerRef.current?.focus();
+        dialogOpenerRef.current = null;
+    }, []);
+    const contextValues = useMemo(() => ({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        title,
+        maxQuestionLength,
+        setDialogOpener,
+        focusDialogOpener,
+    }), [
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        title,
+        maxQuestionLength,
+        setDialogOpener,
+        focusDialogOpener,
+    ]);
+    return (_jsx(QandaContext.Provider, { value: contextValues, children: children }));
+};

package/dist/esm/components/QuestionForm/index.js

@@ -15,16 +15,16 @@ import { getUserProfile } from '../../store/user';
 import validateDisplayName from '../../utils/validate-display-name';
 import { getTitleByUser, getTextByUser } from './messagesByUserType';
 import { trackEvent, trackingNS, baseTrackingData } from '../../utils/tracking';
-const MIN_QUESTION_LENGTH = 20;
-const MAX_QUESTION_LENGTH = 300;
 export default function QuestionForm() {
     const dispatch = useDispatch();
-    const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = useContext(QandaContext);
+    const { storyId, useStaging, commentsAPIUrl, maxQuestionLength, focusDialogOpener, } = useContext(QandaContext);
     const [postAnonymously, setPostAnonymously] = useState(false);
     const [newDisplayName, setNewDisplayName] = useState(null);
     const [submitEnabled, setSubmitEnabled] = useState(false);
     const { isFormOpen, question, displayNameError } = useSelector((state) => state.question);
     const { profile, error: userDisplayNameError } = useSelector((state) => state.user);
+    const MIN_QUESTION_LENGTH = 20;
+    const MAX_QUESTION_LENGTH = maxQuestionLength || 300;
     // NB: reset will have the effect of setting things like error to null and isSuccess to empty
     // you use this when you want to clear the state of the usePostQuestionMutation hook as if you had just started on the page
     // as we allow users to see things like error messages and success messages, we do not clear those until we try to send another mutation, otherwise those things will clear too early
@@ -97,12 +97,16 @@ export default function QuestionForm() {
             }
         }
         try {
+            // set nudge to false if the error is a suspect word, as the user can choose to submit it for moderator review
+            const errorCode = error?.data?.error?.errorCode ?? undefined;
+            const nudge = errorCode !== 'TOXIC_COMMENT';
             await postQuestion({
                 token: updatedProfile?.token || profile?.token || '',
                 storyId,
                 useStaging,
                 commentsAPIUrl,
                 question: question,
+                nudge,
                 postAnonymously,
             }).unwrap();
         }
@@ -123,14 +127,15 @@ export default function QuestionForm() {
     // are implemented by Origami team.
     // Ticket CI-2770 was created to address this in the future.
     _jsxs(Overlay, { title: "Ask a question", closeCallback: () => {
+            focusDialogOpener?.();
             setNewDisplayName(null);
             dispatch(closeForm());
-        }, children: [profile.isSubscribed && (_jsx("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", "data-trackable-context-trigger_action": "open question form", children: _jsxs("form", { onSubmit: handleSubmit, "data-trackable": trackingNS(`submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`), children: [_jsxs("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && (_jsx(_Fragment, { children: _jsxs("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [_jsx("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && (_jsxs("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [_jsx("span", { className: "o-forms-title", children: _jsx("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), _jsxs("span", { className: classNames([
+        }, children: [profile.isSubscribed && (_jsx("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", "data-trackable-context-trigger_action": "open question form", children: _jsxs("form", { "aria-busy": isLoading, onSubmit: handleSubmit, "data-trackable": trackingNS(`submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`), children: [_jsxs("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && (_jsx(_Fragment, { children: _jsxs("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [_jsx("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), _jsxs("span", { className: "o3-visually-hidden", children: ["Your user name is", ' '] }), profile.displayName] }) })), !profile?.displayName && (_jsxs("label", { htmlFor: "display-name", className: "question-form__displayname-input o-forms-field", "aria-live": "polite", "aria-atomic": "true", children: [_jsx("span", { className: "o-forms-title", children: _jsx("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), _jsxs("span", { className: classNames([
                                                 'question-form__displayname__input',
                                                 'o-forms-input',
                                                 'o-forms-input--text',
                                                 { 'o-forms-input--invalid': !!displayNameError },
-                                            ]), children: [_jsx("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
+                                            ]), children: [_jsx("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-describedby": "question-form-disclaimer", "aria-invalid": displayNameError ? 'true' : undefined, "aria-errormessage": displayNameError ??
                                                         'question_form__displayname-error-message' }), displayNameError && (_jsx("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: _jsx("span", { children: displayNameError }) }))] })] }))] }), _jsx("div", { className: "o-forms-field", children: _jsxs("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [_jsx("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": trackingNS(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), _jsx("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), _jsxs("label", { for: "question-text", className: "o-forms-field question-form__question__input", children: [_jsx("span", { className: "o-forms-title", children: _jsx("span", { className: "o3-type-body-highlight", children: "Enter your question" }) }), _jsxs("div", { className: classNames([
                                         'o-forms-input',
                                         'o-forms-input--textarea',
@@ -138,7 +143,7 @@ export default function QuestionForm() {
                                         {
                                             'input-textarea__error': question.length > MAX_QUESTION_LENGTH,
                                         },
-                                    ]), children: [_jsx("textarea", { id: "question-text", name: "question", className: "input-textarea", value: question, onChange: (e) => dispatch(updateQuestion(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }), _jsx("span", { className: "o3-type-detail input-textarea__counter", children: `${question.length}/${MAX_QUESTION_LENGTH}` })] })] }), _jsx("span", { className: classNames([
+                                    ]), children: [_jsx("textarea", { id: "question-text", name: "question", className: "input-textarea", value: question, onChange: (e) => dispatch(updateQuestion(e.currentTarget.value)), "aria-label": "Your question", "aria-describedby": "question-form-description", placeholder: "Type your question", "aria-invalid": error ? 'true' : undefined, "aria-errormessage": error ? 'question-form-error-message' : undefined }), _jsx("span", { className: "o3-type-detail input-textarea__counter", "aria-label": `Your question is ${question.length} characters long, maximum allowed is ${MAX_QUESTION_LENGTH}`, children: `${question.length}/${MAX_QUESTION_LENGTH}` })] })] }), _jsx("span", { id: "question-form-description", "aria-live": "polite", className: classNames([
                                 'o3-type-detail',
                                 {
                                     'input--textarea__error-message': question.length > MAX_QUESTION_LENGTH,
@@ -158,35 +163,35 @@ export default function QuestionForm() {
                             }, 
                             // @ts-expect-error - o3 Button is currently accepting a JSX element as label
                             // but the type definition needs to be updated by Origami team
-                            label: isLoading ? _jsx(Loader, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && (_jsx("span", { className: "o3-type-detail", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && (_jsx(MessageBox, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question is in the queue and will be reviewed by our editors." })), error && (_jsx(ErrorMessage, { error: error, storyId: storyId, errorMapping: {
-                    // Messages for specific error codes
-                    REPEAT_POST: {
-                        title: 'Question already submitted',
-                        message: "You've already submitted this question. Try asking something different and submit again.",
-                    },
-                    REJECTED: {
-                        title: 'Question rejected',
-                        message: 'This question has been rejected for language that violates our guidelines.',
-                    },
-                    RATE_LIMIT_EXCEEDED: {
-                        title: 'Too many questions',
-                        message: 'You are submitting too many questions in a short amount of time. Please wait sometime before submitting another question.',
-                    },
-                    TOXIC_COMMENT: {
-                        title: 'Question blocked',
-                        message: 'Are you sure? The language in your question might violate our community guidelines. You can edit it or submit it for moderator review.',
-                    },
-                    serverError: {
-                        title: 'Server error',
-                        message: 'There was a server error. Please try submitting your question again.',
-                    },
-                    connectionError: {
-                        title: 'Connection error',
-                        message: "You can't submit your question. Check your internet connection or browser settings and try again.",
-                    },
-                    timeoutError: {
-                        title: 'Timeout error',
-                        message: 'The request timed out. Please try submitting your question again.',
-                    },
-                }, operation: "submit-question", id: "question-form-error-message" })), _jsx(MessageBox, { extraClassNames: "o-message--notice o-message--inform", title: getTitleByUser(profile), text: getTextByUser(profile) })] }));
+                            label: isLoading ? _jsx(Loader, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && (_jsx("span", { className: "o3-type-detail", id: "question-form-disclaimer", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && (_jsx("div", { role: "alert", "aria-live": "polite", children: _jsx(MessageBox, { color: "#00572C", extraClassNames: "o-message--alert o-message--success", title: "Question sent", text: "Your question is in the queue and will be reviewed by our editors." }) })), _jsx("div", { "aria-live": "polite", role: "alert", id: "question-form-error-message", children: error && (_jsx(ErrorMessage, { error: error, storyId: storyId, errorMapping: {
+                        // Messages for specific error codes
+                        REPEAT_POST: {
+                            title: 'Question already submitted',
+                            message: "You've already submitted this question. Try asking something different and submit again.",
+                        },
+                        REJECTED: {
+                            title: 'Question rejected',
+                            message: 'This question has been rejected for language that violates our guidelines.',
+                        },
+                        RATE_LIMIT_EXCEEDED: {
+                            title: 'Too many questions',
+                            message: 'You are submitting too many questions in a short amount of time. Please wait sometime before submitting another question.',
+                        },
+                        TOXIC_COMMENT: {
+                            title: 'Question blocked',
+                            message: 'Are you sure? The language in your question might violate our community guidelines. You can edit it, or if you submit, it will need moderator review. This could slow down a reply from our experts',
+                        },
+                        serverError: {
+                            title: 'Server error',
+                            message: 'There was a server error. Please try submitting your question again.',
+                        },
+                        connectionError: {
+                            title: 'Connection error',
+                            message: "You can't submit your question. Check your internet connection or browser settings and try again.",
+                        },
+                        timeoutError: {
+                            title: 'Timeout error',
+                            message: 'The request timed out. Please try submitting your question again.',
+                        },
+                    }, operation: "submit-question" })) }), _jsx(MessageBox, { extraClassNames: "o-message--notice o-message--inform", title: getTitleByUser(profile), text: getTextByUser(profile) })] }));
 }

package/dist/esm/index.js

@@ -24,7 +24,7 @@ class QandaUI {
             (containerElement.dataset.qandaMaxquestionlength
                 ? parseInt(containerElement.dataset.qandaMaxquestionlength, 10)
                 : undefined) ??
-            2000;
+            300;
         if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
             throw new Error('Required properties are missing');
         }

package/dist/esm/services/comments-api.js

@@ -154,14 +154,14 @@ export const nextCommentsApi = createApi({
         }),
         // POST A QUESTION
         postQuestion: builder.mutation({
-            query: ({ storyId, useStaging, commentsAPIUrl, token, question, postAnonymously, }) => ({
+            query: ({ storyId, useStaging, commentsAPIUrl, token, question, nudge = true, postAnonymously, }) => ({
                 url: `${commentsAPIUrl}/story/${storyId}/question${useStaging ? '?staging=1' : ''}`,
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     Authorization: `Bearer ${token}`,
                 },
-                body: JSON.stringify({ question, postAnonymously, token }),
+                body: JSON.stringify({ question, postAnonymously, token, nudge }),
             }),
             transformResponse: (response) => {
                 return response.data;

package/dist/qanda.scss

@@ -268,7 +268,6 @@ $app-header-color: #007acc;
 }
 
 .qanda-portal.embed-form-field__container {
-  max-width: 300px;
   display: flex;
   flex-direction: column;
   gap: var(--o3-spacing-4xs);
@@ -390,7 +389,7 @@ $app-header-color: #007acc;
     right: 0;
     bottom: 0;
     z-index: 19;
-    animation: QandaOverlayFadeIn 1s ease forwards;
+    animation: QandaOverlayFadeIn 300ms ease forwards;
     background: var(--o3-color-palette-black-90);
     margin-top: calc(var(--safe-area-inset-top, 0px) / 2);
   }
@@ -402,7 +401,7 @@ $app-header-color: #007acc;
     height: 100%;
     width: 100%;
     z-index: 20;
-    animation: QandaOverlaySlideUp 1s ease forwards;
+    animation: QandaOverlaySlideUp 300ms ease forwards;
 
     @media (min-width: 740px) {
       width: 375px;
@@ -452,6 +451,13 @@ $app-header-color: #007acc;
     flex-grow: 1;
     align-content: center;
     text-align: left;
+    outline: 0;
+  }
+
+  .overlay__header-title:focus,
+  .overlay__header-title:focus-visible {
+    outline: 0;
+    box-shadow: none;
   }
 
   .overlay__header-close {
@@ -739,6 +745,10 @@ $app-header-color: #007acc;
   .message-box__container {
     width: 100%;
     text-align: left;
+    /* o3 forms is currently marked as experimental, we are using o-message, whose standard bg needs overwritten for accessibility */
+    &.o-message--error {
+      background-color: var(--o3-color-use-case-error-background);
+    }
   }
 
   .message-box__content {

package/dist/types/components/Overlay/index.d.ts

@@ -3,10 +3,10 @@ type OverlayOptions = {
     shadow?: boolean;
 };
 type OverlayProps = {
-    title: String;
+    title: string;
     children: React.ReactNode;
     closeCallback: () => void;
     options?: OverlayOptions;
 };
-declare function Overlay({ title, children, closeCallback, options, }: OverlayProps): import("preact").JSX.Element;
+declare function Overlay({ title, children, closeCallback, options, }: OverlayProps): import("react").JSX.Element;
 export default Overlay;

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

@@ -1,9 +1,17 @@
-type QandaContextType = {
+type QandaSettings = {
     storyId: string;
     useStaging: boolean;
     commentsAPIUrl: string;
     title: string;
     maxQuestionLength?: number;
 };
+type QandaContextType = QandaSettings & {
+    setDialogOpener?: (opener: HTMLButtonElement | null) => void;
+    focusDialogOpener?: () => void;
+};
+type QandaProviderProps = QandaSettings & {
+    children: React.ReactNode;
+};
 export declare const QandaContext: import("preact").Context<QandaContextType>;
+export declare const QandaProvider: ({ children, storyId, useStaging, commentsAPIUrl, title, maxQuestionLength, }: QandaProviderProps) => import("react").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "0.0.1-beta.37",
+  "version": "0.0.1-beta.39",
   "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",