edu-webcomponents 1.26.0 → 1.28.0

package/CHANGELOG.md

@@ -4,10 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.28.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.27.0...v1.28.0)
+
+- feat: improve accessibility of EduDivider [`2a082ef`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/2a082ef06b22bc5204930e72a044e2659c6dec9e)
+
+#### [v1.27.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.26.0...v1.27.0)
+
+> 16 January 2026
+
+- feat: improve accessibility of EduLoadingSpinner [`7f3a6e9`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/7f3a6e9a8c6ac64caab09b32a2deeb2251ee3a1f)
+- chore: release v1.27.0 [`9c840df`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/9c840df4c053369fe33949d5d63ff902eb2fa82d)
+
 #### [v1.26.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.25.0...v1.26.0)
 
-- feat: improve accessibility of EduButton according to 2.5.5 in WCAG 2.1 and 2.4.7 in WCAG 2.2 [`969a143`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/969a143fee573fcb0d93072de73a143a2e2116b6)
+> 14 January 2026
+
+- feat: improve accessibility of EduButton according to 2.5.5 in WCAG 2.1 and 2.4.7 in WCAG 2.2 [`3a559f0`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/3a559f02848035a0feed493c573d1c285bf0792c)
 - refactor: code [`65c723d`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/65c723dc344e9b8bb9da515b76e465c21eab3097)
+- chore: release v1.26.0 [`0ed337c`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/0ed337c4ff2a0d6d98ba52225f3d47dfdba69e33)
 
 #### [v1.25.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.24.0...v1.25.0)
 

package/package.json

@@ -11,7 +11,7 @@
   ],
   "license": "MIT",
   "author": "edu-webcomponents",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"

package/src/edu-divider/EduDivider.stories.js

@@ -7,9 +7,9 @@ export default {
 };
 
 const createStory = args => {
-  const story = ({ label } = args) => html`
+  const story = ({ label, ariaLabel } = args) => html`
     <div style="width: 400px;">
-      <edu-divider .label=${label}></edu-divider>
+      <edu-divider .label=${label} aria-label=${ariaLabel}></edu-divider>
     </div>
   `;
   story.parameters = {
@@ -22,6 +22,12 @@ const createStory = args => {
       description: 'Optional label text to display in the divider',
       name: 'label',
     },
+    ariaLabel: {
+      control: 'text',
+      description:
+        'Accessible label for screen readers. If not provided, uses the label property or defaults to "Section divider"',
+      name: 'aria-label',
+    },
   };
   story.args = args;
   return story;
@@ -29,6 +35,7 @@ const createStory = args => {
 
 const defaultArgs = {
   label: '',
+  ariaLabel: '',
 };
 
 export const Default = createStory({ ...defaultArgs });
@@ -37,3 +44,9 @@ export const WithLabel = createStory({
   ...defaultArgs,
   label: 'Section Label',
 });
+
+export const WithCustomAriaLabel = createStory({
+  ...defaultArgs,
+  label: 'OR',
+  ariaLabel: 'Alternative login separator',
+});

package/src/edu-divider/src/EduDivider.js

@@ -4,11 +4,13 @@ import { colorsConstants } from '../../stylesConstants.js';
 export class EduDivider extends LitElement {
   static properties = {
     label: { type: String },
+    ariaLabel: { type: String, attribute: 'aria-label' },
   };
 
   constructor() {
     super();
     this.label = '';
+    this.ariaLabel = '';
   }
 
   static styles = [
@@ -37,11 +39,20 @@ export class EduDivider extends LitElement {
   ];
 
   render() {
+    const effectiveAriaLabel = this.ariaLabel || this.label;
+
     return html`
-      <div class="divider" role="separator" aria-orientation="horizontal">
-        <div class="line"></div>
-        ${this.label ? html`<span class="label">${this.label}</span>` : null}
-        <div class="line"></div>
+      <div
+        class="divider"
+        role="separator"
+        aria-orientation="horizontal"
+        aria-label=${effectiveAriaLabel || 'Section divider'}
+      >
+        <div class="line" aria-hidden="true"></div>
+        ${this.label
+          ? html`<span class="label" aria-hidden="true">${this.label}</span>`
+          : null}
+        <div class="line" aria-hidden="true"></div>
       </div>
     `;
   }

package/src/edu-loading-spinner/EduLoadingSpinner.stories.js

@@ -4,10 +4,21 @@ import './index.js';
 export default {
   title: 'Edu web components/EduLoadingSpinner',
   tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Accessible label for screen readers',
+      defaultValue: 'Loading',
+    },
+  },
 };
 
 const createStory = args => {
-  const story = () => html` <edu-loading-spinner></edu-loading-spinner> `;
+  const story = () => html`
+    <edu-loading-spinner
+      label="${args.label || 'Loading'}"
+    ></edu-loading-spinner>
+  `;
   story.parameters = {
     controls: { expanded: true },
     docs: { source: { type: 'code' } },
@@ -17,6 +28,12 @@ const createStory = args => {
   return story;
 };
 
-const defaultArgs = {};
+const defaultArgs = {
+  label: 'Loading',
+};
 
 export const EduLoadingSpinnerDefault = createStory({ ...defaultArgs });
+
+export const CustomLabel = createStory({
+  label: 'Please wait while we process your request',
+});

package/src/edu-loading-spinner/src/EduLoadingSpinner.js

@@ -2,9 +2,25 @@ import { html, css, LitElement } from 'lit';
 import { colorsConstants } from '../../stylesConstants.js';
 
 export class EduLoadingSpinner extends LitElement {
+  static properties = {
+    label: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.label = 'Loading';
+  }
+
   static styles = [
     colorsConstants,
     css`
+      .spinner-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+      }
+
       .spinner {
         border: 8px solid var(--greyLight);
         border-top: 8px solid var(--primary);
@@ -14,6 +30,18 @@ export class EduLoadingSpinner extends LitElement {
         animation: spin 1.5s linear infinite;
       }
 
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+
       @keyframes spin {
         0% {
           transform: rotate(0deg);
@@ -22,11 +50,22 @@ export class EduLoadingSpinner extends LitElement {
           transform: rotate(360deg);
         }
       }
+
+      @media (prefers-reduced-motion: reduce) {
+        .spinner {
+          animation: spin 3s linear infinite;
+        }
+      }
     `,
   ];
 
   render() {
-    return html` <div class="spinner"></div> `;
+    return html`
+      <div class="spinner-container" role="status" aria-live="polite">
+        <div class="spinner" aria-hidden="true"></div>
+        <span class="visually-hidden">${this.label}</span>
+      </div>
+    `;
   }
 }