Remove / search shortcut (#2025)

Co-authored-by: Chris Swithinbank <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]>
withastro · Jul 5, 2024 · 47f32c1 · 47f32c1
1 parent 2bab648
commit 47f32c1
Show file tree

Hide file tree

Showing 33 changed files with 86 additions and 50 deletions.
diff --git a/.changeset/big-buttons-shop.md b/.changeset/big-buttons-shop.md
@@ -0,0 +1,7 @@
+---
+'@astrojs/starlight': minor
+---
+
+Removes the `/` search shortcut for [accessibility reasons](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html).
+
+⚠️ **Potentially breaking change:** The `search.shortcutLabel` UI string has been removed. If you were using this string in your custom UI, you will need to update your code.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "size": "size-limit",
     "version": "pnpm changeset version && pnpm i --no-frozen-lockfile",
     "format": "prettier -w --cache --plugin prettier-plugin-astro .",
-    "typecheck": "astro check"
+    "typecheck": "astro check --minimumSeverity warning"
   },
   "license": "MIT",
   "devDependencies": {

diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
@@ -20,17 +20,17 @@ const pagefindTranslations = {
 	data-translations={JSON.stringify(pagefindTranslations)}
 	data-strip-trailing-slash={project.trailingSlash === 'never'}
 >
-	<button data-open-modal disabled>
-		{
-			/* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
-		}
-		<Icon name="magnifier" label={labels['search.label']} />
+	<button
+		data-open-modal
+		disabled
+		aria-label={labels['search.label']}
+		aria-keyshortcuts="Control+K"
+	>
+		<Icon name="magnifier" />
 		<span class="sl-hidden md:sl-block" aria-hidden="true">{labels['search.label']}</span>
-		<Icon
-			name="forward-slash"
-			class="sl-hidden md:sl-block"
-			label={labels['search.shortcutLabel']}
-		/>
+		<kbd class="sl-hidden md:sl-flex" style="display: none;">
+			<kbd>{labels['search.ctrlKey']}</kbd><kbd>K</kbd>
+		</kbd>
 	</button>
 
 	<dialog style="padding:0" aria-label={labels['search.label']}>
@@ -56,6 +56,27 @@ const pagefindTranslations = {
 	</dialog>
 </site-search>
 
+{
+	/**
+	 * This is intentionally inlined to avoid briefly showing an invalid shortcut.
+	 * Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the
+	 * user agent is spoofed by some browsers when opening the devtools.
+	 */
+}
+<script is:inline>
+	(() => {
+		const openBtn = document.querySelector('button[data-open-modal]');
+		const shortcut = openBtn?.querySelector('kbd');
+		if (!openBtn || !(shortcut instanceof HTMLElement)) return;
+		const platformKey = shortcut.querySelector('kbd');
+		if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+			platformKey.textContent = '⌘';
+			openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+		}
+		shortcut.style.display = '';
+	})();
+</script>
+
 <script>
 	class SiteSearch extends HTMLElement {
 		constructor() {
@@ -96,18 +117,11 @@ const pagefindTranslations = {
 				window.removeEventListener('click', onClick);
 			});
 
-			// Listen for `/`, `ctrl + k`, and `cmd + k` keyboard shortcuts.
+			// Listen for `ctrl + k` and `cmd + k` keyboard shortcuts.
 			window.addEventListener('keydown', (e) => {
-				const isInput =
-					document.activeElement instanceof HTMLElement &&
-					(['input', 'select', 'textarea'].includes(document.activeElement.tagName.toLowerCase()) ||
-						document.activeElement.isContentEditable);
 				if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
 					dialog.open ? closeModal() : openModal();
 					e.preventDefault();
-				} else if (e.key === '/' && !dialog.open && !isInput) {
-					openModal();
-					e.preventDefault();
 				}
 			});
 
@@ -169,7 +183,7 @@ const pagefindTranslations = {
 			border: 1px solid var(--sl-color-gray-5);
 			border-radius: 0.5rem;
 			padding-inline-start: 0.75rem;
-			padding-inline-end: 1rem;
+			padding-inline-end: 0.5rem;
 			background-color: var(--sl-color-black);
 			color: var(--sl-color-gray-2);
 			font-size: var(--sl-text-sm);
@@ -186,6 +200,18 @@ const pagefindTranslations = {
 		}
 	}
 
+	button > kbd {
+		border-radius: 0.25rem;
+		font-size: var(--sl-text-2xs);
+		gap: 0.25em;
+		padding-inline: 0.375rem;
+		background-color: var(--sl-color-gray-6);
+	}
+
+	kbd {
+		font-family: var(--__sl-font);
+	}
+
 	dialog {
 		margin: 0;
 		background-color: var(--sl-color-gray-6);

diff --git a/packages/starlight/schemas/i18n.ts b/packages/starlight/schemas/i18n.ts
@@ -55,9 +55,11 @@ function starlightI18nSchema() {
 
 			'search.label': z.string().describe('Text displayed in the search bar.'),
 
-			'search.shortcutLabel': z
+			'search.ctrlKey': z
 				.string()
-				.describe('Accessible label for the shortcut key to open the search modal.'),
+				.describe(
+					'Visible representation of the Control key potentially used in the shortcut key to open the search modal.'
+				),
 
 			'search.cancelLabel': z
 				.string()

diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css
@@ -58,6 +58,7 @@
 		0px 4px 2px hsla(0, 0%, 0%, 0.25);
 
 	/* Text size and line height */
+	--sl-text-2xs: 0.75rem; /* 12px */
 	--sl-text-xs: 0.8125rem; /* 13px */
 	--sl-text-sm: 0.875rem; /* 14px */
 	--sl-text-base: 1rem; /* 16px */

diff --git a/packages/starlight/translations/ar.json b/packages/starlight/translations/ar.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "تخطَّ إلى المحتوى",
   "search.label": "ابحث",
-  "search.shortcutLabel": "(إضغط / للبحث)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "إلغاء",
   "search.devWarning": "البحث متوفر فقط في بنيات اﻹنتاج. \n جرب بناء المشروع ومعاينته على جهازك",
   "themeSelect.accessibleLabel": "اختر سمة",

diff --git a/packages/starlight/translations/cs.json b/packages/starlight/translations/cs.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Přeskočit na obsah",
   "search.label": "Hledat",
-  "search.shortcutLabel": "(Vyhledejte stisknutím /)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Zrušit",
   "search.devWarning": "Vyhledávání je dostupné pouze v produkčních sestaveních. \nZkuste sestavit a zobrazit náhled webu a otestovat jej lokálně.",
   "themeSelect.accessibleLabel": "Vyberte motiv",

diff --git a/packages/starlight/translations/da.json b/packages/starlight/translations/da.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Gå til indhold",
   "search.label": "Søg",
-  "search.shortcutLabel": "(Tryk / for at søge)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Annuller",
   "search.devWarning": "Søgning er kun tilgængeligt i produktions versioner. \nPrøv at bygge siden og forhåndsvis den for at teste det lokalt.",
   "themeSelect.accessibleLabel": "Vælg tema",

diff --git a/packages/starlight/translations/de.json b/packages/starlight/translations/de.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Zum Inhalt springen",
   "search.label": "Suchen",
-  "search.shortcutLabel": "(Drücke / zum Suchen)",
+  "search.ctrlKey": "Strg",
   "search.cancelLabel": "Abbrechen",
   "search.devWarning": "Search is only available in production builds. \nTry building and previewing the site to test it out locally.",
   "themeSelect.accessibleLabel": "Farbschema wählen",

diff --git a/packages/starlight/translations/en.json b/packages/starlight/translations/en.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Skip to content",
   "search.label": "Search",
-  "search.shortcutLabel": "(Press / to Search)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Cancel",
   "search.devWarning": "Search is only available in production builds. \nTry building and previewing the site to test it out locally.",
   "themeSelect.accessibleLabel": "Select theme",

diff --git a/packages/starlight/translations/es.json b/packages/starlight/translations/es.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Saltearse al contenido",
   "search.label": "Buscar",
-  "search.shortcutLabel": "(Presiona / para buscar)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Interrumpir",
   "search.devWarning": "La búsqueda solo está disponible en las versiones de producción.  \nIntenta construir y previsualizar el sitio para probarlo localmente.",
   "themeSelect.accessibleLabel": "Seleccionar tema",

diff --git a/packages/starlight/translations/fa.json b/packages/starlight/translations/fa.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "رفتن به محتوا",
   "search.label": "جستجو",
-  "search.shortcutLabel": "(برای جستجو / را فشار دهید)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "لغو",
   "search.devWarning": "جستجو تنها در نسخه‌های تولیدی در دسترس است. \nسعی کنید سایت را بسازید و پیش‌نمایش آن را به صورت محلی آزمایش کنید.",
   "themeSelect.accessibleLabel": "انتخاب پوسته",

diff --git a/packages/starlight/translations/fr.json b/packages/starlight/translations/fr.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Aller au contenu",
   "search.label": "Rechercher",
-  "search.shortcutLabel": "(Presser / pour rechercher)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Annuler",
   "search.devWarning": "La recherche est disponible uniquement en mode production. \nEssayez de construire puis de prévisualiser votre site pour tester la recherche localement.",
   "themeSelect.accessibleLabel": "Selectionner le thème",

diff --git a/packages/starlight/translations/gl.json b/packages/starlight/translations/gl.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Ir ao contido",
   "search.label": "Busca",
-  "search.shortcutLabel": "(Preme / para Busca)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Deixar",
   "search.devWarning": "A busca só está dispoñible nas versións de producción. \nTrata de construir e ollear o sitio para probalo localmente.",
   "themeSelect.accessibleLabel": "Seleciona tema",

diff --git a/packages/starlight/translations/he.json b/packages/starlight/translations/he.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "דלגו לתוכן",
   "search.label": "חיפוש",
-  "search.shortcutLabel": "(לחצו / כדי לחפש)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "ביטול",
   "search.devWarning": "החיפוש זמין רק בסביבת ייצור. \nנסו לבנות ולהציג תצוגה מקדימה של האתר כדי לבדוק אותו באופן מקומי.",
   "themeSelect.accessibleLabel": "בחרו פרופיל צבע",

diff --git a/packages/starlight/translations/hi.json b/packages/starlight/translations/hi.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "इसे छोड़कर कंटेंट पर जाएं",
   "search.label": "खोजें",
-  "search.shortcutLabel": "(खोजने के लिए / दबाएँ)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "रद्द करे",
   "search.devWarning": "खोज केवल उत्पादन बिल्ड में उपलब्ध है। \nस्थानीय स्तर पर परीक्षण करने के लिए साइट बनाए और उसका पूर्वावलोकन करने का प्रयास करें।",
   "themeSelect.accessibleLabel": "थीम चुनें",

diff --git a/packages/starlight/translations/id.json b/packages/starlight/translations/id.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Lewati ke konten",
   "search.label": "Pencarian",
-  "search.shortcutLabel": "(Tekan / untuk mencari)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Batal",
   "search.devWarning": "Pencarian hanya tersedia pada build produksi. \nLakukan proses build dan pratinjau situs Anda sebelum mencoba di lingkungan lokal.",
   "themeSelect.accessibleLabel": "Pilih tema",

diff --git a/packages/starlight/translations/it.json b/packages/starlight/translations/it.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Salta ai contenuti",
   "search.label": "Cerca",
-  "search.shortcutLabel": "(Usa / per cercare)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Cancella",
   "search.devWarning": "La ricerca è disponibile solo nelle build di produzione. \nProvare ad eseguire il processo di build e visualizzare la preview del sito per testarlo localmente.",
   "themeSelect.accessibleLabel": "Seleziona tema",

diff --git a/packages/starlight/translations/ja.json b/packages/starlight/translations/ja.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "コンテンツにスキップ",
   "search.label": "検索",
-  "search.shortcutLabel": "（/を押して検索）",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "キャンセル",
   "search.devWarning": "検索はプロダクションビルドでのみ利用可能です。\nローカルでテストするには、サイトをビルドしてプレビューしてください。",
   "themeSelect.accessibleLabel": "テーマの選択",

diff --git a/packages/starlight/translations/ko.json b/packages/starlight/translations/ko.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "컨텐츠로 건너뛰기",
   "search.label": "검색",
-  "search.shortcutLabel": "(검색하려면 / 를 누르세요)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "취소",
   "search.devWarning": "검색 기능은 운영 환경에서만 사용할 수 있습니다. \n로컬에서 테스트하려면 사이트를 빌드하고 미리보기를 해보세요.",
   "themeSelect.accessibleLabel": "테마 선택",

diff --git a/packages/starlight/translations/nb.json b/packages/starlight/translations/nb.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Gå til innholdet",
   "search.label": "Søk",
-  "search.shortcutLabel": "(Trykk / for å søke)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Avbryt",
   "search.devWarning": "Søk er bare tilgjengelig i produksjonsbygg. \nPrøv å bygg siden og forhåndsvis den for å teste det lokalt.",
   "themeSelect.accessibleLabel": "Velg tema",

diff --git a/packages/starlight/translations/nl.json b/packages/starlight/translations/nl.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Ga naar inhoud",
   "search.label": "Zoeken",
-  "search.shortcutLabel": "(Druk op / om te zoeken)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Annuleren",
   "search.devWarning": "Zoeken is alleen beschikbaar tijdens productie. \nProbeer om de site te builden en er een preview van te bekijken om lokaal te testen.",
   "themeSelect.accessibleLabel": "Selecteer thema",

diff --git a/packages/starlight/translations/pl.json b/packages/starlight/translations/pl.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Przejdź do głównej zawartości",
   "search.label": "Szukaj",
-  "search.shortcutLabel": "(Naciśnij /, aby wyszukać)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Anuluj",
   "search.devWarning": "Wyszukiwanie jest dostępne tylko w buildach produkcyjnych. \nSpróbuj zbudować i uruchomić aplikację, aby przetestować lokalnie.",
   "themeSelect.accessibleLabel": "Wybierz motyw",

diff --git a/packages/starlight/translations/pt.json b/packages/starlight/translations/pt.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Pular para o conteúdo",
   "search.label": "Pesquisar",
-  "search.shortcutLabel": "(Pressione / para Pesquisar)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Cancelar",
   "search.devWarning": "A pesquisa está disponível apenas em builds em produção. \nTente fazer a build e pré-visualize o site para testar localmente.",
   "themeSelect.accessibleLabel": "Selecionar tema",

diff --git a/packages/starlight/translations/ro.json b/packages/starlight/translations/ro.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Sari la conținut",
   "search.label": "Caută",
-  "search.shortcutLabel": "(Apasă pe / ca să cauți)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Anulează",
   "search.devWarning": "Căutarea este disponibilă numai în versiunea de producție. \nÎncercă să construiești și să previzualizezi site-ul pentru a-l testa local.",
   "themeSelect.accessibleLabel": "Selectează tema",

diff --git a/packages/starlight/translations/ru.json b/packages/starlight/translations/ru.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Перейти к содержимому",
   "search.label": "Поиск",
-  "search.shortcutLabel": "(Нажмите / для поиска)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Отменить",
   "search.devWarning": "Поиск доступен только в производственных сборках. \nПопробуйте выполнить сборку и просмотреть сайт, чтобы протестировать его локально.",
   "themeSelect.accessibleLabel": "Выберите тему",

diff --git a/packages/starlight/translations/sk.json b/packages/starlight/translations/sk.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Preskočiť na obsah",
   "search.label": "Hľadať",
-  "search.shortcutLabel": "(Stlačením / hľadajte)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Zrušiť",
   "search.devWarning": "Vyhľadávanie je dostupné len v produkčných zostaveniach. \nSkúste vytvoriť a zobraziť náhľad stránky lokálne.",
   "themeSelect.accessibleLabel": "Vyberte tému",

diff --git a/packages/starlight/translations/sv.json b/packages/starlight/translations/sv.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Hoppa till innehåll",
   "search.label": "Sök",
-  "search.shortcutLabel": "(Tryck / för att söka)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Avbryt",
   "search.devWarning": "Sökfunktionen är endast tillgänglig i produktionsbyggen. \nProva att bygga och förhandsvisa siten för att testa det lokalt.",
   "themeSelect.accessibleLabel": "Välj tema",

diff --git a/packages/starlight/translations/tr.json b/packages/starlight/translations/tr.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "İçeriğe geç",
   "search.label": "Ara",
-  "search.shortcutLabel": "(Aramak için / bas)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "İptal",
   "search.devWarning": "Arama yalnızca üretim derlemelerinde kullanılabilir. \nYerel bilgisayarınızda test etmek için siteyi derleyin ve önizleme yapın.",
   "themeSelect.accessibleLabel": "Tema seç",

diff --git a/packages/starlight/translations/uk.json b/packages/starlight/translations/uk.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Перейти до вмісту",
   "search.label": "Пошук",
-  "search.shortcutLabel": "(Натисніть / для Пошуку)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Скасувати",
   "search.devWarning": "Пошук доступний лише у виробничих збірках. \nСпробуйте зібрати та переглянути сайт, щоби протестувати його локально",
   "themeSelect.accessibleLabel": "Обрати тему",

diff --git a/packages/starlight/translations/vi.json b/packages/starlight/translations/vi.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "Bỏ qua nội dung",
   "search.label": "Tìm kiếm",
-  "search.shortcutLabel": "(Nhấn / để Tìm kiếm)",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "Thoát",
   "search.devWarning": "Tìm kiếm không khả dụng khi đang trong môi trường lập trình. \nThử xuất bản website và tìm kiếm.",
   "themeSelect.accessibleLabel": "Chọn giao diện",

diff --git a/packages/starlight/translations/zh-CN.json b/packages/starlight/translations/zh-CN.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "跳转到内容",
   "search.label": "搜索",
-  "search.shortcutLabel": "（按 / 进行搜索）",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "取消",
   "search.devWarning": "搜索仅适用于生产版本。\n尝试构建并预览网站以在本地测试。",
   "themeSelect.accessibleLabel": "选择主题",

diff --git a/packages/starlight/translations/zh-TW.json b/packages/starlight/translations/zh-TW.json
@@ -1,7 +1,7 @@
 {
   "skipLink.label": "跳到內容",
   "search.label": "搜尋",
-  "search.shortcutLabel": "（按 / 鍵開始搜尋）",
+  "search.ctrlKey": "Ctrl",
   "search.cancelLabel": "取消",
   "search.devWarning": "正式版本才能使用搜尋功能。\n如要在本地測試，請先建置並預覽網站。",
   "themeSelect.accessibleLabel": "選擇佈景主題",