@14ch/svelte-ui 0.0.66 → 0.0.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -399,7 +399,7 @@
|
|
|
399
399
|
}
|
|
400
400
|
};
|
|
401
401
|
|
|
402
|
-
const
|
|
402
|
+
const announceOpened = () => {
|
|
403
403
|
if (!ariaLabel && !ariaLabelledby) return;
|
|
404
404
|
announceOpenClose('Popup', true, ariaLabel);
|
|
405
405
|
};
|
|
@@ -514,7 +514,7 @@
|
|
|
514
514
|
focusFirstElement();
|
|
515
515
|
}
|
|
516
516
|
|
|
517
|
-
|
|
517
|
+
announceOpened();
|
|
518
518
|
onOpen?.();
|
|
519
519
|
}, 1);
|
|
520
520
|
};
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
<script lang="ts">
|
|
4
4
|
import Popup from './Popup.svelte';
|
|
5
5
|
import Icon from './Icon.svelte';
|
|
6
|
+
import { announceToScreenReader } from '../utils/accessibility';
|
|
6
7
|
import type { MenuItem } from '../types/menuItem';
|
|
7
8
|
|
|
8
9
|
import type { SvelteComponent } from 'svelte';
|
|
@@ -167,26 +168,13 @@
|
|
|
167
168
|
activeIndex = index;
|
|
168
169
|
};
|
|
169
170
|
|
|
170
|
-
const announceMenuOpened = () => {
|
|
171
|
-
const announcement = document.createElement('div');
|
|
172
|
-
announcement.setAttribute('aria-live', 'polite');
|
|
173
|
-
announcement.setAttribute('aria-atomic', 'true');
|
|
174
|
-
announcement.className = 'sr-only';
|
|
175
|
-
announcement.textContent = `${ariaLabel} opened with ${actionableItems.length} items`;
|
|
176
|
-
document.body.appendChild(announcement);
|
|
177
|
-
|
|
178
|
-
setTimeout(() => {
|
|
179
|
-
document.body.removeChild(announcement);
|
|
180
|
-
}, 1000);
|
|
181
|
-
};
|
|
182
|
-
|
|
183
171
|
const handlePopupOpen = () => {
|
|
184
172
|
activeIndex = -1; // 初期状態ではハイライトなし
|
|
185
173
|
tick().then(() => {
|
|
186
174
|
menuContainerRef?.focus();
|
|
187
175
|
});
|
|
188
176
|
|
|
189
|
-
|
|
177
|
+
announceToScreenReader(`${ariaLabel} opened with ${actionableItems.length} items`);
|
|
190
178
|
};
|
|
191
179
|
|
|
192
180
|
const handlePopupClose = (reason: 'escape' | 'outside' | 'explicit') => {
|
|
@@ -255,7 +243,7 @@
|
|
|
255
243
|
onkeydown={handleKeyDown}
|
|
256
244
|
>
|
|
257
245
|
<ul class="popup-menu__list" role="none">
|
|
258
|
-
{#each menuItems as item, index}
|
|
246
|
+
{#each menuItems as item, index (item === 'separator' ? `separator-${index}` : item)}
|
|
259
247
|
<li class="popup-menu__item" role="none">
|
|
260
248
|
{#if item === 'separator'}
|
|
261
249
|
<div class="popup-menu__separator" role="separator" aria-orientation="horizontal"></div>
|