RAA 5, React 18

Author: Matthew Holloway

CHANGELOG.md

@@ -3,6 +3,35 @@
 > All notable changes to this project are documented in this file. This project
 > adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [[v5.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v5.0.0)
+
+React Accessible Accordion now supports React 18 with its out-of-order streaming
+feature.
+
+The new out-of-order streaming feature required using React 18's
+[`useId`](https://reactjs.org/blog/2022/03/29/react-v18.html#useid) hook. This
+affects the DOM ids that RAA generates, changing from `accordion__heading-raa-0`
+(React 16 and 17) to `accordion__heading-:r0:` (React 18). Although this change
+shouldn't affect most users, if you have any code that selects ids with DOM APIs
+such as `document.querySelector()` then the `:` characters will need escaping
+with `\\` eg. `document.querySelector('#accordion__heading-\\:r0\\:')`.
+
+When using older versions of React 16 or 17 the same DOM ids will be generated.
+
+Because of this change in behaviour this is a major version upgrade.
+
+## [[v4.0.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v4.0.0)
+
+Making `role="region"` optional on panels.
+
+The new behaviour has no `role="region"` by default, and developers can opt-in
+using the `region` prop as `<AccordionItemPanel region>`.
+
+The previous behaviour had every panel as a `role="region"` which created an
+excessive amount of regions for the screen reader.
+
+Because of this change in behaviour this is a major version upgrade.
+
 ## [[v3.3.0]](https://github.com/springload/react-accessible-accordion/releases/tag/v3.3.0)
 
 ### Changed

README.md

@@ -207,6 +207,11 @@ to get in touch via our
 
 ## FAQs
 
+### React 18?
+
+RAA supports React 18, and the new out-of-order streaming feature. See the
+CHANGELOG for details.
+
 ### Which design patterns does this component aim to solve?
 
 Those described by the WAI ARIA spec's description of an 'accordion':
@@ -225,8 +230,8 @@ description, as written above. By "accordion-like", we mean components which
 have collapsible items but require bespoke interactive mechanisms in order to
 expand, collapse and 'disable' them. This includes (but is not limited to)
 multi-step forms, like those seen in many cart/checkout flows, which we believe
-require (other) complex markup in order to be considered 'accessible'.
-This also includes disclosure widgets.
+require (other) complex markup in order to be considered 'accessible'. This also
+includes disclosure widgets.
 
 ### How do I disable an item?
 

package.json

@@ -89,12 +89,12 @@
         "@babel/preset-env": "^7.4.5",
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.1.0",
-        "@testing-library/react": "^8.0.4",
+        "@testing-library/react": "^13.1.1",
         "@types/jest": "^24.0.15",
-        "@types/react": "^16.8.22",
-        "@types/react-dom": "^16.8.4",
+        "@types/react": "^18.0.5",
+        "@types/react-dom": "^18.0.1",
         "@types/react-syntax-highlighter": "^11.0.4",
-        "@types/react-test-renderer": "^16.8.2",
+        "@types/react-test-renderer": "^18.0.0",
         "@types/uuid": "^3.4.4",
         "@typescript-eslint/eslint-plugin": "^3.6.0",
         "@typescript-eslint/parser": "^3.6.0",

src/components/AccordionItemButton.tsx

@@ -91,7 +91,7 @@ type WrapperProps = Pick<
     Exclude<keyof DivAttributes, keyof InjectedButtonAttributes>
 >;
 
-const AccordionItemButtonWrapper: React.SFC<WrapperProps> = (
+const AccordionItemButtonWrapper: React.FC<WrapperProps> = (
     props: WrapperProps,
 ): JSX.Element => (
     <ItemConsumer>

src/components/AccordionItemHeading.tsx

@@ -71,7 +71,7 @@ type WrapperProps = Pick<
     Exclude<keyof DivAttributes, keyof InjectedHeadingAttributes>
 >;
 
-const AccordionItemHeadingWrapper: React.SFC<DivAttributes> = (
+const AccordionItemHeadingWrapper: React.FC<DivAttributes> = (
     props: WrapperProps,
 ): JSX.Element => (
     <ItemConsumer>

src/components/AccordionItemPanel.spec.tsx

@@ -79,7 +79,9 @@ describe('AccordionItem', () => {
                 </Accordion>,
             );
             expect(
-                getByRole('region').getAttribute('aria-labelledby'),
+                getByRole('region', { hidden: true }).getAttribute(
+                    'aria-labelledby',
+                ),
             ).toBeTruthy();
         });
 
@@ -101,7 +103,9 @@ describe('AccordionItem', () => {
             const { getByText, queryByRole } = render(
                 <Accordion>
                     <AccordionItem>
-                        <AccordionItemPanel region={false}>Hello World</AccordionItemPanel>
+                        <AccordionItemPanel region={false}>
+                            Hello World
+                        </AccordionItemPanel>
                     </AccordionItem>
                 </Accordion>,
             );