diff --git a/routers/web/user/setting/profile.go b/routers/web/user/setting/profile.go
index 24c2147a03..a39c118ddd 100644
--- a/routers/web/user/setting/profile.go
+++ b/routers/web/user/setting/profile.go
@@ -41,6 +41,7 @@ const (
 	tplSettingsRepositories base.TplName = "user/settings/repos"
 )
 
+// must be kept in sync with `web_src/js/features/user-settings.js`
 var recognisedPronouns = []string{"", "he/him", "she/her", "they/them", "it/its", "any pronouns"}
 
 // Profile render user's profile page
diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js
index 8f68b03b29..111bfc4465 100644
--- a/web_src/js/features/user-settings.js
+++ b/web_src/js/features/user-settings.js
@@ -4,6 +4,7 @@ function onPronounsDropdownUpdate() {
   const pronounsCustom = document.getElementById('pronouns-custom');
   const pronounsDropdown = document.getElementById('pronouns-dropdown');
   const pronounsInput = pronounsDropdown.querySelector('input');
+  // must be kept in sync with `routers/web/user/setting/profile.go`
   const isCustom = !(
     pronounsInput.value === '' ||
     pronounsInput.value === 'he/him' ||
@@ -49,8 +50,12 @@ export function initUserSettings() {
   const pronounsDropdown = document.getElementById('pronouns-dropdown');
   const pronounsCustom = document.getElementById('pronouns-custom');
   const pronounsInput = pronounsDropdown.querySelector('input');
+
+  // If JS is disabled, the page will show the custom input, as the dropdown requires JS to work.
+  // JS progressively enhances the input by adding a dropdown, but it works regardless.
   pronounsCustom.removeAttribute('name');
   pronounsDropdown.style.display = '';
+
   onPronounsDropdownUpdate();
   pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
   pronounsCustom.addEventListener('input', onPronounsCustomUpdate);