From e0a48dd974fda552a90eaf8cf8b638b09399f01c Mon Sep 17 00:00:00 2001
From: Elliot Sutton <elsk8@outlook.fr>
Date: Sat, 1 Mar 2025 14:37:32 +0100
Subject: [PATCH] fix(core,react,docs): replace ARIA roles with CSS class
 selectors for accessibility

---
 apps/docs/content/docs/configure.mdx          | 20 ++++++++--------
 apps/docs/content/docs/installation.mdx       |  6 ++---
 apps/docs/content/docs/migration.mdx          | 23 +++++++++++++++++-
 apps/docs/content/docs/next/whats-new.mdx     |  2 +-
 apps/docs/content/docs/quick-start.mdx        |  2 +-
 .../components/progress-components/bar.mdx    |  1 -
 .../progress-components/spinner.mdx           |  1 -
 apps/docs/content/docs/roadmap.mdx            |  2 +-
 apps/docs/content/docs/upgrade.mdx            |  8 +++----
 apps/html/index.html                          |  6 ++---
 packages/core/CHANGELOG.md                    |  8 +++++++
 packages/core/README.md                       |  8 +++----
 packages/core/__tests__/progress.test.ts      | 24 +++++++++----------
 packages/core/package.json                    |  2 +-
 packages/core/src/progress.ts                 | 10 ++++----
 packages/next/CHANGELOG.md                    |  6 +++++
 packages/next/package.json                    |  6 ++---
 packages/react/CHANGELOG.md                   |  8 +++++++
 .../react/__tests__/components/bar.test.tsx   |  4 ++--
 .../__tests__/components/spinner.test.tsx     |  4 ++--
 packages/react/package.json                   |  4 ++--
 packages/react/src/components/bar.tsx         | 10 +-------
 packages/react/src/components/peg.tsx         |  2 +-
 packages/react/src/components/progress.tsx    |  2 +-
 .../react/src/components/spinner-icon.tsx     |  2 +-
 packages/react/src/components/spinner.tsx     |  2 --
 packages/react/src/types.ts                   |  2 --
 packages/remix/CHANGELOG.md                   |  7 ++++++
 packages/remix/package.json                   |  6 ++---
 29 files changed, 111 insertions(+), 77 deletions(-)
 create mode 100644 packages/core/CHANGELOG.md
 create mode 100644 packages/react/CHANGELOG.md
 create mode 100644 packages/remix/CHANGELOG.md

diff --git a/apps/docs/content/docs/configure.mdx b/apps/docs/content/docs/configure.mdx
index 0f4a20b..73c802f 100644
--- a/apps/docs/content/docs/configure.mdx
+++ b/apps/docs/content/docs/configure.mdx
@@ -13,16 +13,16 @@ The `configure()` method updates the default settings of the progress bar.
 BProgress.configure({
   minimum: 0.08,
   maximum: 1,
-  template: `<div class="bar" role="bar"><div class="peg"></div></div>
-              <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>`,
+  template: `<div class="bar"><div class="peg"></div></div>
+              <div class="spinner"><div class="spinner-icon"></div></div>`,
   easing: 'linear',
   positionUsing: 'width',
   speed: 200,
   trickle: true,
   trickleSpeed: 200,
   showSpinner: true,
-  barSelector: '[role="bar"]',
-  spinnerSelector: '[role="spinner"]',
+  barSelector: '.bar',
+  spinnerSelector: '.spinner',
   parent: 'body',
   direction: 'ltr',
 });
@@ -77,15 +77,15 @@ type BProgressDirection = 'ltr' | 'rtl';
 |----------|------------------------|------------------------------------|-----------------------------------------------|
 | minimum  | number                 | 0.08                               | The minimum percentage value between 0 and 1. |
 | maximum  | number                 | 1                                  | The maximum percentage value between 0 and 1. |
-| template | string \| null         | `<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>` | The template of the progress bar. Classes are important for CSS, but if you have a custom CSS you can put any classes you like. The roles depend on those configured in the `barSelector` and `spinnerSelector` options. |
+| template | string \| null         | `<div class="bar"><div class="peg"></div></div><div class="spinner"><div class="spinner-icon"></div></div>` | The template of the progress bar. Classes needs to match with the `barSelector` and `spinnerSelector` options. |
 | easing   | string                 | 'linear'                           | The easing of the progress bar.               |
 | positionUsing | BProgressPositionUsing | 'width'                       | The position using of the progress bar.       |
 | speed    | number                 | 200                                | The speed of the progress bar.                |
 | trickle  | boolean                | true                               | If `true`, the progress bar will trickle.     |
 | trickleSpeed | number             | 200                                | The speed of the trickle.                     |
 | showSpinner | boolean             | true                               | If `true`, the progress bar will show the spinner. |
-| barSelector | string              | '[role="bar"]'                     | The bar selector.                             |
-| spinnerSelector | string          | '[role="spinner"]'                 | The spinner selector.                         |
+| barSelector | string              | '.bar'                     | The bar selector.                             |
+| spinnerSelector | string          | '.spinner'                 | The spinner selector.                         |
 | parent   | HTMLElement \| string  | 'body'                             | The parent container of the progress bar. (if `template` is not `null`) |
 | direction | BProgressDirection    | 'ltr'                              | The direction of the progress bar.            |
 
@@ -97,16 +97,16 @@ type BProgressDirection = 'ltr' | 'rtl';
 
 ```html
 <div class="bprogress" style="display: none">
-  <div class="bar" role="bar">
+  <div class="bar">
     <div class="peg"></div>
   </div>
-  <div class="spinner" role="spinner">
+  <div class="spinner">
     <div class="spinner-icon"></div>
   </div>
 </div>
 ```
 
-It's very important to have a `div` with the `bprogress` class and the `display:none` style surrounding the template. For the template, classes are important for CSS, but if you have a custom CSS you can put any classes you like. The roles depend on those configured in the `barSelector` and `spinnerSelector` options.
+It's very important to have a `div` with the `bprogress` class and the `display:none` style surrounding the template. For the template, classes need to match with the `barSelector` and `spinnerSelector` options.
 
 <Callout type="warn" title="Warning">
   When using a custom component for the progress bar, the component will not be dynamically added or removed from the DOM. Instead, it will simply toggle between `display: block` and `display: none`.  
diff --git a/apps/docs/content/docs/installation.mdx b/apps/docs/content/docs/installation.mdx
index 96de8cf..adc6db9 100644
--- a/apps/docs/content/docs/installation.mdx
+++ b/apps/docs/content/docs/installation.mdx
@@ -40,13 +40,11 @@ To install BProgress, run the following command:
 ### CDN
 
 Use **unpkg**:
-- ESM: https://unpkg.com/@bprogress/core/dist/index.mjs
-- CJS: https://unpkg.com/@bprogress/core/dist/index.js
+- JS: https://unpkg.com/@bprogress/core/dist/index.js
 - CSS: https://unpkg.com/@bprogress/core/dist/index.css
 
 Use **jsDelivr**:
-- ESM: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.mjs
-- CJS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.js
+- JS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.js
 - CSS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.css
 
 ### Integrations Libraries
diff --git a/apps/docs/content/docs/migration.mdx b/apps/docs/content/docs/migration.mdx
index 2920cbc..ca72b9b 100644
--- a/apps/docs/content/docs/migration.mdx
+++ b/apps/docs/content/docs/migration.mdx
@@ -7,7 +7,9 @@ import { Callout } from 'fumadocs-ui/components/callout';
 
 To **clarify the library’s identity** and enable it to **evolve more freely**, we decided to move away from the name **NProgress-V2** and adopt a new identity: **BProgress**. This rebranding gives us the opportunity to **start fresh on a solid foundation, introduce new features, and provide more integration libraries** while fostering a richer ecosystem around the project.
 
-There are two differences with the `nprogress-v2` package. 
+There are some differences with the `nprogress-v2` package. 
+
+## Migration to BProgress `1.1`
 
 The first difference is the name of the `nprogress-v2` package, which is now called `@bprogress/core`. So you can change the import like this:
 
@@ -32,6 +34,25 @@ CSS has also changed, so if you're using custom CSS, be sure to rename all your
 + .bprogress
 ```
 
+## Migration to BProgress `1.2`
+
+The difference is about the `template`, `barSelector` and `spinnerSelector` options. We no longer use roles as selectors, as the “bar” and “spinner” roles are not valid ARIA roles.
+
+So you can change your code like this (only if you use these options):
+
+```diff title=JavaScript
+- NProgress.configure({
+-   template: `<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>`,
+-   barSelector: '[role="bar"]',
+-   spinnerSelector: '[role="spinner"]',
+- });
++ BProgress.configure({
++   template: '<div class="bar"><div class="peg"></div></div><div class="spinner"><div class="spinner-icon"></div></div>',
++   barSelector: '.bar',
++   spinnerSelector: '.spinner',
++ });
+```
+
 And then you can use the `BProgress` object as you would use the `NProgress` object.
 
 <Callout type="warn" title="Warning">
diff --git a/apps/docs/content/docs/next/whats-new.mdx b/apps/docs/content/docs/next/whats-new.mdx
index bad37e3..b15c219 100644
--- a/apps/docs/content/docs/next/whats-new.mdx
+++ b/apps/docs/content/docs/next/whats-new.mdx
@@ -70,7 +70,7 @@ This, combined with the `disableStyle` property, allows you to make your progres
 ### `useRouter` (only for App directory)
 
 A new `basePath` option has been added to the router.
-This option is only useful if you use a `basePath` in your `next.config.mjs` file.
+This option is only useful if you use a `basePath` in your `next.config.(js|mjs|ts)` file.
 
 ```tsx
 const router = useRouter(undefined, { basePath: '/docs' });
diff --git a/apps/docs/content/docs/quick-start.mdx b/apps/docs/content/docs/quick-start.mdx
index d3c9958..8c815fd 100644
--- a/apps/docs/content/docs/quick-start.mdx
+++ b/apps/docs/content/docs/quick-start.mdx
@@ -17,7 +17,7 @@ Import JavaScript in your `index.html` file.
 
 ```html
 <script type="module">
-  import { BProgress } from 'https://unpkg.com/@bprogress/core/dist/index.mjs';
+  import { BProgress } from 'https://unpkg.com/@bprogress/core/dist/index.js';
 
   BProgress.configure({
     ...
diff --git a/apps/docs/content/docs/react/components/progress-components/bar.mdx b/apps/docs/content/docs/react/components/progress-components/bar.mdx
index 611e806..011f0eb 100644
--- a/apps/docs/content/docs/react/components/progress-components/bar.mdx
+++ b/apps/docs/content/docs/react/components/progress-components/bar.mdx
@@ -38,5 +38,4 @@ It can be used with a children (like `Peg` or your custom component) like this:
 | as | `React.ElementType` | `'div'` | The component to render the progress element |
 | children | `React.ReactNode` | `undefinded` | The children of the progress element |
 | classSelector | `string` | `'bar'` | The class selector of the progress element (depends on your css) |
-| role | `string` | `'bar'` | The role of the progress element (depends on the `barSelector` and `spinnerSelector` options you set) |
 | ...rest | `React.ComponentPropsWithoutRef<T>` | - | The rest of the props are passed to the progress element |
diff --git a/apps/docs/content/docs/react/components/progress-components/spinner.mdx b/apps/docs/content/docs/react/components/progress-components/spinner.mdx
index 0d495bc..c9fb900 100644
--- a/apps/docs/content/docs/react/components/progress-components/spinner.mdx
+++ b/apps/docs/content/docs/react/components/progress-components/spinner.mdx
@@ -46,5 +46,4 @@ Or with a custom spinner component like this:
 | as | `React.ElementType` | `'div'` | The component to render the progress element |
 | children | `React.ReactNode` | `undefinded` | The children of the progress element |
 | classSelector | `string` | `'spinner'` | The class selector of the progress element (depends on your css) |
-| role | `string` | `'spinner'` | The role of the progress element (depends on the `barSelector` and `spinnerSelector` options you set) |
 | ...rest | `React.ComponentPropsWithoutRef<T>` | - | The rest of the props are passed to the progress element |
diff --git a/apps/docs/content/docs/roadmap.mdx b/apps/docs/content/docs/roadmap.mdx
index 859cebe..729b3e4 100644
--- a/apps/docs/content/docs/roadmap.mdx
+++ b/apps/docs/content/docs/roadmap.mdx
@@ -11,7 +11,7 @@ The following roadmap outlines the planned development stages for **BProgress**.
   * [x] Enable easy customization of the progress bar using CSS variables.
 
 * **Improve Accessibility Practices**  
-  * [ ] Replace ARIA roles with CSS class selectors for better flexibility and compatibility.  
+  * [x] Replace ARIA roles with CSS class selectors for better flexibility and compatibility.  
   *(See: [ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques))*
 
 ## Medium Term
diff --git a/apps/docs/content/docs/upgrade.mdx b/apps/docs/content/docs/upgrade.mdx
index 0e2753e..8afdb9c 100644
--- a/apps/docs/content/docs/upgrade.mdx
+++ b/apps/docs/content/docs/upgrade.mdx
@@ -1,6 +1,6 @@
 ---
-title: Upgrade form 1.0 to 1.1
-description: Upgrade from NProgress-V2 version 1.0 to BProgress version 1.1
+title: Upgrade form 1.0 to 1.2
+description: Upgrade from NProgress-V2 version 1.0 to BProgress version 1.2
 ---
 
 import { Callout } from 'fumadocs-ui/components/callout';
@@ -34,10 +34,10 @@ And add one or more templates like this to your code:
 
 ```html
 <div class="bprogress" style="display: none">
-  <div class="bar" role="bar">
+  <div class="bar">
     <div class="peg"></div>
   </div>
-  <div class="spinner" role="spinner">
+  <div class="spinner">
     <div class="spinner-icon"></div>
   </div>
 </div>
diff --git a/apps/html/index.html b/apps/html/index.html
index 7a60d27..9b40428 100644
--- a/apps/html/index.html
+++ b/apps/html/index.html
@@ -13,10 +13,10 @@
     <h1>BProgress Test</h1>
 
     <!-- <div class="bprogress" style="display: none">
-      <div class="bar" role="bar">
+      <div class="bar">
         <div class="peg"></div>
       </div>
-      <div class="spinner" role="spinner">
+      <div class="spinner">
         <div class="spinner-icon"></div>
       </div>
     </div> -->
@@ -28,7 +28,7 @@ <h1>BProgress Test</h1>
     <button id="done-btn">Done</button>
 
     <script type="module">
-      import { BProgress } from '../../packages/core/dist/index.mjs';
+      import { BProgress } from '../../packages/core/dist/index.js';
 
       console.log('BProgress', BProgress);
 
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
new file mode 100644
index 0000000..8cf65f5
--- /dev/null
+++ b/packages/core/CHANGELOG.md
@@ -0,0 +1,8 @@
+# @bprogress/core
+
+## 1.2.0
+
+### Minor Changes
+
+- fix: use class selectors (`.bar`, `.spinner`) instead of role attributes for better accessibility
+- chore: remove CommonJS imports and switch to ESM imports with `.js` extensions
diff --git a/packages/core/README.md b/packages/core/README.md
index 71bad7b..4a02dd9 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -22,14 +22,12 @@ npm install @bprogress/core
 
 Use **unpkg**:
 
-- ESM: https://unpkg.com/@bprogress/core/dist/index.mjs
-- CJS: https://unpkg.com/@bprogress/core/dist/index.js
+- JS: https://unpkg.com/@bprogress/core/dist/index.js
 - CSS: https://unpkg.com/@bprogress/core/dist/index.css
 
 Use **jsDelivr**:
 
-- ESM: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.mjs
-- CJS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.js
+- JS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.js
 - CSS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.css
 
 ### Integrations libraries
@@ -58,7 +56,7 @@ Import JavaScript in your `index.html` file.
 
 ```html
 <script type="module">
-  import { BProgress } from 'https://unpkg.com/@bprogress/core/dist/index.mjs';
+  import { BProgress } from 'https://unpkg.com/@bprogress/core/dist/index.js';
 
   BProgress.configure({
     ...
diff --git a/packages/core/__tests__/progress.test.ts b/packages/core/__tests__/progress.test.ts
index 513e1a6..c6cfae7 100644
--- a/packages/core/__tests__/progress.test.ts
+++ b/packages/core/__tests__/progress.test.ts
@@ -9,16 +9,16 @@ describe('BProgress', () => {
     BProgress.configure({
       minimum: 0.08,
       maximum: 1,
-      template: `<div class="bar" role="bar"><div class="peg"></div></div>
-                 <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>`,
+      template: `<div class="bar"><div class="peg"></div></div>
+                 <div class="spinner"><div class="spinner-icon"></div></div>`,
       easing: 'linear',
       positionUsing: '',
       speed: 200,
       trickle: true,
       trickleSpeed: 200,
       showSpinner: true,
-      barSelector: '[role="bar"]',
-      spinnerSelector: '[role="spinner"]',
+      barSelector: '.bar',
+      spinnerSelector: '.spinner',
       parent: 'body',
       direction: 'ltr',
     });
@@ -219,10 +219,10 @@ describe('BProgress', () => {
       const existing = document.createElement('div');
       existing.classList.add('bprogress');
       existing.innerHTML = `
-        <div class="bar" role="bar">
+        <div class="bar">
           <div class="peg"></div>
         </div>
-        <div class="spinner" role="spinner">
+        <div class="spinner">
           <div class="spinner-icon"></div>
         </div>
       `;
@@ -345,10 +345,10 @@ describe('BProgress', () => {
       progress.classList.add('bprogress');
       progress.style.display = 'none';
       progress.innerHTML = `
-        <div class="bar" role="bar">
+        <div class="bar">
           <div class="peg"></div>
         </div>
-        <div class="spinner" role="spinner">
+        <div class="spinner">
           <div class="spinner-icon"></div>
         </div>
       `;
@@ -367,10 +367,10 @@ describe('BProgress', () => {
       progress1.classList.add('bprogress');
       progress1.style.display = 'none';
       progress1.innerHTML = `
-        <div class="bar" role="bar">
+        <div class="bar">
           <div class="peg"></div>
         </div>
-        <div class="spinner" role="spinner">
+        <div class="spinner">
           <div class="spinner-icon"></div>
         </div>
       `;
@@ -378,10 +378,10 @@ describe('BProgress', () => {
       progress2.classList.add('bprogress');
       progress2.style.display = 'none';
       progress2.innerHTML = `
-        <div class="bar" role="bar">
+        <div class="bar">
           <div class="peg"></div>
         </div>
-        <div class="spinner" role="spinner">
+        <div class="spinner">
           <div class="spinner-icon"></div>
         </div>
       `;
diff --git a/packages/core/package.json b/packages/core/package.json
index 27a0462..e4ed711 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bprogress/core",
-  "version": "1.1.18",
+  "version": "1.2.0",
   "type": "module",
   "description": "NProgress-inspired library with more features",
   "repository": {
diff --git a/packages/core/src/progress.ts b/packages/core/src/progress.ts
index 45f2713..6d80fb4 100644
--- a/packages/core/src/progress.ts
+++ b/packages/core/src/progress.ts
@@ -13,16 +13,16 @@ export class BProgress {
     minimum: 0.08,
     maximum: 1,
     // If template is null, the user can insert their own template in the DOM.
-    template: `<div class="bar" role="bar"><div class="peg"></div></div>
-               <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>`,
+    template: `<div class="bar"><div class="peg"></div></div>
+               <div class="spinner"><div class="spinner-icon"></div></div>`,
     easing: 'linear',
     positionUsing: '',
     speed: 200,
     trickle: true,
     trickleSpeed: 200,
     showSpinner: true,
-    barSelector: '[role="bar"]',
-    spinnerSelector: '[role="spinner"]',
+    barSelector: '.bar',
+    spinnerSelector: '.spinner',
     parent: 'body',
     direction: 'ltr',
   };
@@ -72,6 +72,7 @@ export class BProgress {
         const bar = progress.querySelector(
           this.settings.barSelector,
         ) as HTMLElement;
+        console.log('bar 1', bar);
         toCss(bar, this.barPositionCSS({ n, speed, ease }));
       });
 
@@ -242,6 +243,7 @@ export class BProgress {
       const bar = progress.querySelector(
         this.settings.barSelector,
       ) as HTMLElement;
+      console.log('bar 2', bar);
       const perc = fromStart
         ? toBarPerc(0, this.settings.direction)
         : toBarPerc(this.status || 0, this.settings.direction);
diff --git a/packages/next/CHANGELOG.md b/packages/next/CHANGELOG.md
index 2b2504a..de9d89c 100644
--- a/packages/next/CHANGELOG.md
+++ b/packages/next/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @bprogress/next
 
+## 3.2.1
+
+### Patch Changes
+
+- chore: upgrade to `@bprogress/core@1.2.0` and `@bprogress/react@1.1.5`
+
 ## 3.2.0
 
 ### Minor Changes
diff --git a/packages/next/package.json b/packages/next/package.json
index 0a4d2f7..0a7972f 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bprogress/next",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "type": "module",
   "description": "Progress bar for Next.js compatible with new app directory",
   "repository": {
@@ -70,7 +70,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@bprogress/core": "^1.1.18",
-    "@bprogress/react": "^1.1.4"
+    "@bprogress/core": "^1.2.0",
+    "@bprogress/react": "^1.1.5"
   }
 }
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
new file mode 100644
index 0000000..b950dc9
--- /dev/null
+++ b/packages/react/CHANGELOG.md
@@ -0,0 +1,8 @@
+# @bprogress/react
+
+## 1.1.5
+
+### Patch Changes
+
+- chore: upgrade to `@bprogress/core@1.2.0`
+- fix: remove role attributes from bar and spinner components
diff --git a/packages/react/__tests__/components/bar.test.tsx b/packages/react/__tests__/components/bar.test.tsx
index 9e761d5..37835f9 100644
--- a/packages/react/__tests__/components/bar.test.tsx
+++ b/packages/react/__tests__/components/bar.test.tsx
@@ -17,10 +17,10 @@ describe('Bar Component', () => {
     expect(getByText(text)).toBeInTheDocument();
   });
 
-  it('applies the default role "bar"', () => {
+  it('applies the default class "bar"', () => {
     const { container } = render(<Bar />);
     const barElement = container.firstChild as HTMLElement;
-    expect(barElement).toHaveAttribute('role', 'bar');
+    expect(barElement).toHaveClass('bar');
   });
 
   it('renders as a different element when the "as" prop is provided', () => {
diff --git a/packages/react/__tests__/components/spinner.test.tsx b/packages/react/__tests__/components/spinner.test.tsx
index a5ffe78..2e6f938 100644
--- a/packages/react/__tests__/components/spinner.test.tsx
+++ b/packages/react/__tests__/components/spinner.test.tsx
@@ -17,10 +17,10 @@ describe('Spinner Component', () => {
     expect(getByText(text)).toBeInTheDocument();
   });
 
-  it('applies the default role "spinner"', () => {
+  it('applies the default class "spinner"', () => {
     const { container } = render(<Spinner />);
     const spinnerElement = container.firstChild as HTMLElement;
-    expect(spinnerElement).toHaveAttribute('role', 'spinner');
+    expect(spinnerElement).toHaveClass('spinner');
   });
 
   it('renders as a different element when the "as" prop is provided', () => {
diff --git a/packages/react/package.json b/packages/react/package.json
index b637962..a6226c1 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bprogress/react",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "type": "module",
   "description": "Utility to create your own progress bar with React",
   "repository": {
@@ -59,6 +59,6 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@bprogress/core": "^1.1.18"
+    "@bprogress/core": "^1.2.0"
   }
 }
diff --git a/packages/react/src/components/bar.tsx b/packages/react/src/components/bar.tsx
index fb6e030..bdb76bb 100644
--- a/packages/react/src/components/bar.tsx
+++ b/packages/react/src/components/bar.tsx
@@ -6,14 +6,7 @@ export type BarProps<T extends React.ElementType = 'div'> =
   ProgressComponentProps<T>;
 
 function BarInner<T extends React.ElementType = 'div'>(
-  {
-    as,
-    children,
-    className,
-    role = 'bar',
-    classSelector = 'bar',
-    ...rest
-  }: BarProps<T>,
+  { as, children, className, classSelector = 'bar', ...rest }: BarProps<T>,
   ref: React.ForwardedRef<React.ComponentRef<T>>,
 ) {
   const Component = as ?? ('div' as T);
@@ -22,7 +15,6 @@ function BarInner<T extends React.ElementType = 'div'>(
     {
       ref,
       className: classNames(classSelector, className),
-      role,
       ...(rest as React.ComponentPropsWithoutRef<T>),
     },
     children,
diff --git a/packages/react/src/components/peg.tsx b/packages/react/src/components/peg.tsx
index cfa0c67..de23ac2 100644
--- a/packages/react/src/components/peg.tsx
+++ b/packages/react/src/components/peg.tsx
@@ -4,7 +4,7 @@ import { classNames } from '../utils/classnames';
 
 export type PegProps<T extends React.ElementType = 'div'> = Omit<
   ProgressComponentProps<T>,
-  'role' | 'classSelector'
+  'classSelector'
 > & {
   classSelector?: string;
 };
diff --git a/packages/react/src/components/progress.tsx b/packages/react/src/components/progress.tsx
index f9820fe..6b1ffe6 100644
--- a/packages/react/src/components/progress.tsx
+++ b/packages/react/src/components/progress.tsx
@@ -8,7 +8,7 @@ import { SpinnerIcon } from './spinner-icon';
 
 export type ProgressProps<T extends React.ElementType = 'div'> = Omit<
   ProgressComponentProps<T>,
-  'role' | 'classSelector'
+  'classSelector'
 >;
 
 function ProgressInner<T extends React.ElementType = 'div'>(
diff --git a/packages/react/src/components/spinner-icon.tsx b/packages/react/src/components/spinner-icon.tsx
index 5a527a5..916a196 100644
--- a/packages/react/src/components/spinner-icon.tsx
+++ b/packages/react/src/components/spinner-icon.tsx
@@ -4,7 +4,7 @@ import { classNames } from '../utils/classnames';
 
 export type SpinnerIconProps<T extends React.ElementType = 'div'> = Omit<
   ProgressComponentProps<T>,
-  'role' | 'classSelector'
+  'classSelector'
 > & {
   classSelector?: string;
 };
diff --git a/packages/react/src/components/spinner.tsx b/packages/react/src/components/spinner.tsx
index 836bb2c..6dd2ec3 100644
--- a/packages/react/src/components/spinner.tsx
+++ b/packages/react/src/components/spinner.tsx
@@ -10,7 +10,6 @@ function SpinnerInner<T extends React.ElementType = 'div'>(
     as,
     children,
     className,
-    role = 'spinner',
     classSelector = 'spinner',
     ...rest
   }: SpinnerProps<T>,
@@ -22,7 +21,6 @@ function SpinnerInner<T extends React.ElementType = 'div'>(
     {
       ref,
       className: classNames(classSelector, className),
-      role,
       ...(rest as React.ComponentPropsWithoutRef<T>),
     },
     children,
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index d56a0de..8cfe2e7 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -30,13 +30,11 @@ export interface ProgressContextValue {
  * @param children Children - @default undefined
  * @param className Custom class - @default undefined
  * @param classSelector Custom class selector - @default undefined
- * @param role Custom role - @default undefined
  */
 export type ProgressComponentProps<T extends React.ElementType = 'div'> = {
   as?: T;
   children?: React.ReactNode;
   classSelector?: string;
-  role?: string;
 } & React.ComponentPropsWithoutRef<T>;
 
 /**
diff --git a/packages/remix/CHANGELOG.md b/packages/remix/CHANGELOG.md
new file mode 100644
index 0000000..b08d320
--- /dev/null
+++ b/packages/remix/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @bprogress/remix
+
+## 1.0.7
+
+### Patch Changes
+
+- chore: upgrade to `@bprogress/core@1.2.0` and `@bprogress/react@1.1.5`
diff --git a/packages/remix/package.json b/packages/remix/package.json
index 2f3792e..a3ac27b 100644
--- a/packages/remix/package.json
+++ b/packages/remix/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bprogress/remix",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Progress bar for Remix",
   "type": "module",
   "repository": {
@@ -57,7 +57,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@bprogress/core": "^1.1.18",
-    "@bprogress/react": "^1.1.4"
+    "@bprogress/core": "^1.2.0",
+    "@bprogress/react": "^1.1.5"
   }
 }