Merge pull request #10 from qazsato/add_aria_label

add aria attributes
qazsato · Dec 1, 2024 · 9e5c2da · 9e5c2da
2 parents 0280a58 + dfb8a1a
commit 9e5c2da
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/docs/index-Cz6yyxK9.js → docs/index-1cxemBXu.js b/docs/index-Cz6yyxK9.js → docs/index-1cxemBXu.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/maplibre-gl-compass/compass.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>maplibre-gl-compass</title>
-    <script type="module" crossorigin src="/maplibre-gl-compass/index-Cz6yyxK9.js"></script>
+    <script type="module" crossorigin src="/maplibre-gl-compass/index-1cxemBXu.js"></script>
     <link rel="stylesheet" crossorigin href="/maplibre-gl-compass/index-Dr0l-3GY.css">
   </head>
   <body>

diff --git a/src/components/CompassButton.ts b/src/components/CompassButton.ts
@@ -30,15 +30,19 @@ export class CompassButton {
 
   turnOn() {
     this.button.classList.add('maplibregl-ctrl-compass-heading-active')
+    this.button.setAttribute('aria-pressed', 'true')
     this.startLoading()
   }
 
   turnOff() {
     this.button.classList.remove('maplibregl-ctrl-compass-heading-active')
+    this.button.setAttribute('aria-pressed', 'false')
     this.stopLoading()
   }
 
   disable() {
+    this.button.setAttribute('title', 'Compass not available')
+    this.button.setAttribute('aria-label', 'Compass not available')
     this.button.setAttribute('disabled', 'disabled')
   }
 
@@ -53,6 +57,8 @@ export class CompassButton {
   private createButton() {
     const button = document.createElement('button')
     button.classList.add('maplibregl-ctrl-compass-heading')
+    button.setAttribute('title', 'Rotate map to heading-up')
+    button.setAttribute('aria-label', 'Rotate map to heading-up')
     button.addEventListener('click', () => {
       if (this.clickCallback) {
         this.clickCallback()

diff --git a/tests/CompassButton.test.ts b/tests/CompassButton.test.ts
@@ -39,14 +39,18 @@ describe('CompassButton', () => {
     expect(
       button.classList.contains('maplibregl-ctrl-compass-heading-active'),
     ).toBe(true)
+    expect(button.getAttribute('aria-pressed')).toBe('true')
 
     compassButton.turnOff()
     expect(
       button.classList.contains('maplibregl-ctrl-compass-heading-active'),
     ).toBe(false)
+    expect(button.getAttribute('aria-pressed')).toBe('false')
 
     compassButton.disable()
     expect(button.disabled).toBe(true)
+    expect(button.getAttribute('title')).toBe('Compass not available')
+    expect(button.getAttribute('aria-label')).toBe('Compass not available')
   })
 
   it('should toggle loading state', () => {