@transferwise/components 45.17.0 → 45.17.1

package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA6CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAE5F,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACV,MAAM,WAAW,CAAC;AAKnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACvF,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG;IACtD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IACxB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uGAgEX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAG5F,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACV,MAAM,WAAW,CAAC;AAMnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACvF,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG;IACtD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IACxB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uGAwEX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/button/Button.messages.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    namespace loadingAriaLabel {
+        const id: string;
+        const defaultMessage: string;
+        const description: string;
+    }
+}
+export default _default;
+//# sourceMappingURL=Button.messages.d.ts.map

package/build/types/button/Button.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.messages.d.ts","sourceRoot":"","sources":["../../../src/button/Button.messages.js"],"names":[],"mappings":""}

package/build/types/common/index.d.ts

@@ -12,6 +12,7 @@ export * from "./propsValues/profileType";
 export * from "./propsValues/scroll";
 export * from "./locale";
 export * from "./commonProps";
+export * from "./randomId";
 export { Breakpoint } from "./propsValues/breakpoint";
 export { Type } from "./propsValues/type";
 export { DateMode } from "./propsValues/dateMode";

package/build/types/common/randomId.d.ts

@@ -0,0 +1,13 @@
+/**
+ * generateRandomId() function
+ *
+ * This function generates a random string of characters that can be used as
+ * an ID.
+ *
+ * @returns {string} A random string of characters.
+ * @example
+ * const id = generateRandomId();
+ * // id will be a random string of characters, such as "id-4711".
+ */
+export declare const generateRandomId: () => string;
+//# sourceMappingURL=randomId.d.ts.map

package/build/types/common/randomId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"randomId.d.ts","sourceRoot":"","sources":["../../../src/common/randomId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,QAAO,MAEnC,CAAC"}

package/build/types/promoCard/PromoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAieC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAmeC"}

package/build/types/select/searchBox/SearchBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/select/searchBox/SearchBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAUxD,QAAA,MAAM,SAAS;;;;oJAwCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/select/searchBox/SearchBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAUxD,QAAA,MAAM,SAAS;;;;oJA0Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.17.0",
+  "version": "45.17.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/accordion/AccordionItem/AccordionItem.spec.js

@@ -9,6 +9,7 @@ describe('AccordionItem', () => {
     title: 'This is title number one',
     content: 'Lauri Ipsum has been the industry standard dummy text ever since the 1500s.',
     open: false,
+    id: 'test-accordion',
     onClick: jest.fn(),
   };
 

package/src/accordion/AccordionItem/AccordionItem.tsx

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { cloneElement, FC, ReactNode } from 'react';
@@ -70,11 +71,13 @@ const AccordionItem: FC<AccordionItemProps> = ({
   icon,
   theme = 'light',
 }) => {
-  const iconElement = icon ? cloneElement(icon as JSX.Element, { size: 24 }) : null;
+  const iconElement = icon ? cloneElement(icon as React.ReactElement<any>, { size: 24 }) : null;
+  const fallbackId = useId();
+  const accordionId = id ?? fallbackId;
 
   return (
     <div
-      id={id}
+      id={accordionId}
       className={classNames(
         'np-accordion-item',
         iconElement ? 'np-accordion-item--with-icon' : null,
@@ -90,18 +93,23 @@ const AccordionItem: FC<AccordionItemProps> = ({
         title={title}
         button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}
         inverseMediaCircle={false}
+        aria-expanded={open}
+        aria-controls={`${accordionId}-section`}
+        id={`${accordionId}-control`}
         onClick={onClick}
       />
       {open && (
-        <Body
-          as="span"
-          type={Typography.BODY_LARGE}
-          className={classNames('np-accordion-item__content', 'd-block', {
-            'has-icon': icon,
-          })}
-        >
-          {content}
-        </Body>
+        <div id={`${accordionId}-section`} role="region" aria-labelledby={`${accordionId}-control`}>
+          <Body
+            as="span"
+            type={Typography.BODY_LARGE}
+            className={classNames('np-accordion-item__content', 'd-block', {
+              'has-icon': icon,
+            })}
+          >
+            {content}
+          </Body>
+        </div>
       )}
     </div>
   );

package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap

@@ -4,9 +4,13 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
 <div>
   <div
     class="np-accordion-item"
+    id="test-accordion"
   >
     <button
+      aria-controls="test-accordion-section"
+      aria-expanded="false"
       class="np-option decision"
+      id="test-accordion-control"
     >
       <div
         class="media"
@@ -52,9 +56,13 @@ exports[`AccordionItem open / close renders an item open 1`] = `
 <div>
   <div
     class="np-accordion-item np-accordion-item--open"
+    id="test-accordion"
   >
     <button
+      aria-controls="test-accordion-section"
+      aria-expanded="true"
       class="np-option decision"
+      id="test-accordion-control"
     >
       <div
         class="media"
@@ -92,11 +100,17 @@ exports[`AccordionItem open / close renders an item open 1`] = `
         </div>
       </div>
     </button>
-    <span
-      class="np-text-body-large np-accordion-item__content d-block"
+    <div
+      aria-labelledby="test-accordion-control"
+      id="test-accordion-section"
+      role="region"
     >
-      Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
-    </span>
+      <span
+        class="np-text-body-large np-accordion-item__content d-block"
+      >
+        Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
+      </span>
+    </div>
   </div>
 </div>
 `;

package/src/button/Button.messages.js

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  loadingAriaLabel: {
+    id: 'neptune.Button.loadingAriaLabel',
+    defaultMessage: 'loading',
+    description: 'Description of button while loading',
+  },
+});

package/src/button/Button.spec.js

@@ -166,9 +166,8 @@ describe('Button', () => {
   describe('alternative states', () => {
     it('renders as loading if loading is true', () => {
       const { container } = render(<Button {...props} loading />);
-      expect(container).toMatchSnapshot();
-
       expect(container.querySelector('.btn-loader')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'loading' })).toBeInTheDocument();
     });
 
     it('renders as block if block is true', () => {

package/src/button/Button.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';
+import { useIntl } from 'react-intl';
 
 import {
   Size,
@@ -18,6 +19,7 @@ import {
   LinkProps,
 } from '../common';
 
+import messages from './Button.messages';
 import { typeClassMap, priorityClassMap } from './classMap';
 import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
 
@@ -70,6 +72,8 @@ const Button = forwardRef<ButtonReferenceType, Props>(
     }: Props,
     reference,
   ) => {
+    const intl = useIntl();
+
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     logDeprecationNotices({ size, type });
 
@@ -112,7 +116,13 @@ const Button = forwardRef<ButtonReferenceType, Props>(
     }
 
     return (
-      <Element ref={reference} className={classes} {...props}>
+      <Element
+        ref={reference}
+        className={classes}
+        {...props}
+        aria-live={loading ? 'polite' : 'off'}
+        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : undefined}
+      >
         {children}
         {loading && <span className={classNames('btn-loader', { 'm-l-2': !block })} />}
       </Element>

package/src/button/__snapshots__/Button.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`Button alternative states renders as block if block is true 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-block np-btn-block btn-accent btn-priority-1"
     type="button"
   >
@@ -11,24 +12,10 @@ exports[`Button alternative states renders as block if block is true 1`] = `
 </div>
 `;
 
-exports[`Button alternative states renders as loading if loading is true 1`] = `
-<div>
-  <button
-    class="btn btn-md np-btn np-btn-md btn-loading disabled btn-accent btn-priority-1"
-    disabled=""
-    type="button"
-  >
-    Send money
-    <span
-      class="btn-loader m-l-2"
-    />
-  </button>
-</div>
-`;
-
 exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -40,6 +27,7 @@ exports[`Button by default renders a medium button of type accent and priority p
 exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
 <div>
   <a
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     href="#"
   >
@@ -51,6 +39,7 @@ exports[`Button by default renders an anchor tag with button styles of type acce
 exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
   >
@@ -62,6 +51,7 @@ exports[`Button deprecated types renders danger as negative buttons with priorit
 exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
   >
@@ -73,6 +63,7 @@ exports[`Button deprecated types renders link as accent buttons with priority te
 exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
   >
@@ -84,6 +75,7 @@ exports[`Button deprecated types renders pay as positive buttons and logs a warn
 exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -95,6 +87,7 @@ exports[`Button deprecated types renders primary as accent buttons and logs a wa
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
   >
@@ -106,6 +99,7 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
   >
@@ -117,6 +111,7 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities renders primary buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -128,6 +123,7 @@ exports[`Button priorities renders primary buttons 1`] = `
 exports[`Button priorities renders primary buttons 2`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
   >
@@ -139,6 +135,7 @@ exports[`Button priorities renders primary buttons 2`] = `
 exports[`Button priorities renders primary buttons 3`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
   >
@@ -150,6 +147,7 @@ exports[`Button priorities renders primary buttons 3`] = `
 exports[`Button priorities renders secondary buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-2"
     type="button"
   >
@@ -161,6 +159,7 @@ exports[`Button priorities renders secondary buttons 1`] = `
 exports[`Button priorities renders secondary buttons 2`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
   >
@@ -172,6 +171,7 @@ exports[`Button priorities renders secondary buttons 2`] = `
 exports[`Button priorities renders secondary buttons 3`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
   >
@@ -183,6 +183,7 @@ exports[`Button priorities renders secondary buttons 3`] = `
 exports[`Button priorities renders tertiary buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
   >
@@ -194,6 +195,7 @@ exports[`Button priorities renders tertiary buttons 1`] = `
 exports[`Button sizes renders large buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-lg np-btn np-btn-lg btn-accent btn-priority-1"
     type="button"
   >
@@ -205,6 +207,7 @@ exports[`Button sizes renders large buttons 1`] = `
 exports[`Button sizes renders medium buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -216,6 +219,7 @@ exports[`Button sizes renders medium buttons 1`] = `
 exports[`Button sizes renders small buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-sm np-btn np-btn-sm btn-accent btn-priority-1"
     type="button"
   >
@@ -227,6 +231,7 @@ exports[`Button sizes renders small buttons 1`] = `
 exports[`Button types renders accent buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
   >
@@ -238,6 +243,7 @@ exports[`Button types renders accent buttons 1`] = `
 exports[`Button types renders negative buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
   >
@@ -249,6 +255,7 @@ exports[`Button types renders negative buttons 1`] = `
 exports[`Button types renders positive buttons 1`] = `
 <div>
   <button
+    aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
   >

package/src/common/Option/Option.css

@@ -1 +1 @@
-.np-option:has(:focus-visible){--ring-outline-offset:0;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-option:has(:focus-visible) :focus-visible{outline:none}.np-option .circle-sm{height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-option__title{color:#37517e;color:var(--color-content-primary);display:inline-block;font-size:1rem;font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;line-height:1.5;line-height:var(--line-height-body);margin:0}.np-option__body{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.42857;margin-top:4px;margin-top:var(--size-4)}.np-option__sm-media.decision .media-left{display:block}.np-option__no-media-circle{display:flex;justify-content:center;max-width:64px;max-width:var(--size-64);min-width:48px;min-width:var(--size-48)}.np-option__no-media-circle>*{max-height:76px}button.np-option{background-color:transparent;text-align:left;width:100%}[dir=rtl] button.np-option{text-align:right}.np-theme-personal .np-option .circle{overflow:visible}.np-theme-personal .np-option .circle-sm{height:48px;height:var(--size-48);line-height:48px;line-height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-option__title{display:inline-block}.np-theme-personal .np-option__body{margin:4px 0 0;margin:var(--size-4) 0 0;text-decoration:none}.np-theme-personal .np-option__container-aligned{margin-left:-16px;margin-left:calc(var(--space-content-horizontal)*-1);margin-right:-16px;margin-right:calc(var(--space-content-horizontal)*-1);max-width:none;width:auto}@media (min-width:576px){.np-theme-personal .np-option{border-radius:10px;border-radius:var(--radius-small)}}
+.np-option:has(:focus-visible){--ring-outline-offset:0;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-option:has(:focus-visible) :focus-visible{outline:none}.np-option .circle-sm{height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-option__title{color:#37517e;color:var(--color-content-primary);font-size:1rem;font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;line-height:1.5;line-height:var(--line-height-body);margin:0}.np-option__body{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.42857;margin-top:4px;margin-top:var(--size-4)}.np-option__sm-media.decision .media-left{display:block}.np-option__no-media-circle{display:flex;justify-content:center;max-width:64px;max-width:var(--size-64);min-width:48px;min-width:var(--size-48)}.np-option__no-media-circle>*{max-height:76px}button.np-option{background-color:transparent;text-align:left;width:100%}[dir=rtl] button.np-option{text-align:right}.np-theme-personal .np-option .circle{overflow:visible}.np-theme-personal .np-option .circle-sm{height:48px;height:var(--size-48);line-height:48px;line-height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-option__body{margin:4px 0 0;margin:var(--size-4) 0 0;text-decoration:none}.np-theme-personal .np-option__container-aligned{margin-left:-16px;margin-left:calc(var(--space-content-horizontal)*-1);margin-right:-16px;margin-right:calc(var(--space-content-horizontal)*-1);max-width:none;width:auto}@media (min-width:576px){.np-theme-personal .np-option{border-radius:10px;border-radius:var(--radius-small)}}

package/src/common/Option/Option.less

@@ -23,7 +23,6 @@
     letter-spacing: 0;
     line-height: var(--line-height-body);
     margin: 0;
-    display: inline-block;
   }
 
   &__body {
@@ -72,10 +71,6 @@ button.np-option {
       line-height: var(--size-48);
     }
 
-    &__title {
-      display: inline-block;
-    }
-
     &__body {
       margin: var(--size-4) 0 0;
       text-decoration: none;

package/src/common/index.js

@@ -24,3 +24,4 @@ export { FileType } from './fileType';
 export { Key } from './key';
 export * from './locale';
 export * from './commonProps';
+export * from './randomId';

package/src/common/randomId.ts

@@ -0,0 +1,14 @@
+/**
+ * generateRandomId() function
+ *
+ * This function generates a random string of characters that can be used as
+ * an ID.
+ *
+ * @returns {string} A random string of characters.
+ * @example
+ * const id = generateRandomId();
+ * // id will be a random string of characters, such as "id-4711".
+ */
+export const generateRandomId = (): string => {
+  return `id-${Math.random().toString(36).slice(7)}`;
+};

package/src/dateInput/DateInput.story.tsx

@@ -16,9 +16,6 @@ export default {
       buttonProps: {
         'aria-label': 'Select month',
       },
-      dropdownProps: {
-        'aria-label': 'Month options',
-      },
     },
   },
   tags: ['autodocs'],

package/src/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "neptune.Button.loadingAriaLabel": "loading",
   "neptune.Chips.ariaLabel": "Clear {choice}",
   "neptune.ClearButton.ariaLabel": "Clear",
   "neptune.CloseButton.ariaLabel": "Close",