fix(core,react,docs): replace ARIA roles with CSS class selectors for…

… accessibility

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`.  

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

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">

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' });

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({
     ...

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 |

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 |

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

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>

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);
 

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

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({
     ...

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,21 +367,21 @@ 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>
       `;
       const progress2 = document.createElement('div');
       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>
       `;

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": {

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);

packages/next/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bprogress/next
 
+## 3.2.1
+
+### Patch Changes
+
+- chore: upgrade to `@bprogress/[email protected]` and `@bprogress/[email protected]`
+
 ## 3.2.0
 
 ### Minor Changes

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"
   }
 }

packages/react/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @bprogress/react
+
+## 1.1.5
+
+### Patch Changes
+
+- chore: upgrade to `@bprogress/[email protected]`
+- fix: remove role attributes from bar and spinner components