edu-webcomponents 1.25.0 → 1.27.0

package/CHANGELOG.md

@@ -4,9 +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.27.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.26.0...v1.27.0)
+
+- feat: improve accessibility of EduLoadingSpinner [`554e3d3`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/554e3d3ec740db8496182a255de565587b6e1131)
+
+#### [v1.26.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.25.0...v1.26.0)
+
+> 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)
 
-- feat: implement dark mode [`4112f1b`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/4112f1b9db41808e3e08204bd9397ffc9448f57e)
+> 11 January 2026
+
+- feat: implement dark mode [`a5470d0`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/a5470d0e3d7428ae6084dc3a1c4389ab4223517e)
+- chore: release v1.25.0 [`3e2bbc7`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/3e2bbc709607880488b421e48d3dc353d7870034)
 
 #### [v1.24.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.23.0...v1.24.0)
 

package/package.json

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

package/src/edu-button/src/EduButton.js

@@ -1,9 +1,10 @@
 import { html, css, LitElement } from 'lit';
-import { colorsConstants } from '../../stylesConstants.js';
+import { colorsConstants, typographyConstants } from '../../stylesConstants.js';
 
 export class EduButton extends LitElement {
   static styles = [
     colorsConstants,
+    typographyConstants,
     css`
       :host {
         display: block;
@@ -18,12 +19,21 @@ export class EduButton extends LitElement {
         color: var(--primaryForeground);
         cursor: pointer;
         transition: background-color 0.2s ease-in-out;
+        font-family: inherit;
+        line-height: var(--lineHeight);
+        min-height: 44px;
+        min-width: 44px;
       }
 
       button:hover:not(:disabled) {
         background-color: var(--primaryHover);
       }
 
+      button:focus-visible {
+        outline: 2px solid var(--primary);
+        outline-offset: 2px;
+      }
+
       button:disabled {
         background-color: var(--disabled);
         cursor: not-allowed;
@@ -42,15 +52,16 @@ export class EduButton extends LitElement {
     super();
     this.text = 'Default text';
     this.type = 'button';
-    this.ariaLabel = this.text;
+    this.ariaLabel = '';
   }
 
   render() {
     return html`
       <button
         type=${this.type}
-        aria-label=${this.ariaLabel}
+        aria-label=${this.ariaLabel || this.text}
         ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
       >
         ${this.text}
       </button>
@@ -58,4 +69,4 @@ export class EduButton extends LitElement {
   }
 }
 
-window.customElements.define('edu-button', EduButton);
+customElements.define('edu-button', EduButton);

package/src/edu-button/test/EduButton.test.js

@@ -45,7 +45,7 @@ describe('EduButton', () => {
     expect(button.getAttribute('aria-label')).to.equal(textDefault);
   });
 
-  it('allows overriding aria-label via attribute', async () => {
+  it('allows overriding aria-label via ariaLabel property', async () => {
     const ariaLabel = 'Custom label';
     const el = await fixture(
       html`<edu-button aria-label=${ariaLabel}></edu-button>`

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>
+    `;
   }
 }
 

package/src/edu-progress-bar/src/EduProgressBar.js

@@ -53,10 +53,14 @@ export class EduProgressBar extends LitElement {
     this.progressbarName = 'Progress bar';
   }
 
-  render() {
+  _calculatePercentage() {
     const safeMax = this.max > 0 ? this.max : 100;
     const safeValue = Math.max(0, this.value);
-    const percentage = Math.min(100, (safeValue / safeMax) * 100);
+    return Math.min(100, (safeValue / safeMax) * 100);
+  }
+
+  render() {
+    const percentage = this._calculatePercentage();
     const label = `${Math.round(percentage)}%`;
 
     return html`
@@ -64,8 +68,11 @@ export class EduProgressBar extends LitElement {
         class="bar-container"
         role="progressbar"
         aria-valuemin="0"
-        aria-valuemax="${safeMax}"
-        aria-valuenow="${Math.min(safeValue, safeMax)}"
+        aria-valuemax="${this.max > 0 ? this.max : 100}"
+        aria-valuenow="${Math.min(
+          Math.max(0, this.value),
+          this.max > 0 ? this.max : 100
+        )}"
         aria-label="${this.progressbarName}"
       >
         <div class="bar-fill" style="width: ${percentage}%"></div>

package/src/edu-skeleton-text/src/EduSkeletonText.js

@@ -66,4 +66,4 @@ export class EduSkeletonText extends LitElement {
   }
 }
 
-window.customElements.define('edu-skeleton-text', EduSkeletonText);
+customElements.define('edu-skeleton-text', EduSkeletonText);

package/src/edu-tooltip/src/EduTooltip.js

@@ -8,12 +8,10 @@ const POSITION = {
   RIGHT: 'right',
 };
 
-function getPositions() {
-  return Object.values(POSITION);
-}
+const VALID_POSITIONS = Object.values(POSITION);
 
 function isPositionValid(position) {
-  return getPositions().includes(position.toLowerCase());
+  return VALID_POSITIONS.includes(position.toLowerCase());
 }
 
 export class EduTooltip extends LitElement {

package/src/stylesConstants.js

@@ -35,3 +35,9 @@ export const colorsConstants = css`
     }
   }
 `;
+
+export const typographyConstants = css`
+  :host {
+    --lineHeight: 1.5;
+  }
+`;