Skip to content

fix: Inconsistent Screen Reader Announcement for Word Wrap Toggle Button in Settings #3476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

fix: Inconsistent Screen Reader Announcement for Word Wrap Toggle Button in Settings #3476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c678a4a
Update line wrap terminology in Preferences and translations
Salman-in May 10, 2025
de9fb49
Rename linewrap to wordwrap in Preferences component and update relat…
Salman-in May 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 23 additions & 25 deletions client/modules/IDE/components/Preferences/Preferences.unit.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,45 +442,43 @@ describe('<Preferences />', () => {
);
});
});
describe('start wordwrap at false', () => {
it('wordwrap toggle, starting at false', () => {
// render the component with wordwrap prop set to false
subject({ wordwrap: false });

describe('start linewrap at false', () => {
it('linewrap toggle, starting at false', () => {
// render the component with linewrap prop set to false
subject({ linewrap: false });

// get ahold of the radio buttons for toggling linewrap
const linewrapRadioFalse = screen.getByRole('radio', {
name: /linewrap off/i
// get ahold of the radio buttons for toggling wordwrap
const wordwrapRadioFalse = screen.getByRole('radio', {
name: /wordwrap off/i
});
const linewrapRadioTrue = screen.getByRole('radio', {
name: /linewrap on/i
const wordwrapRadioTrue = screen.getByRole('radio', {
name: /wordwrap on/i
});

testToggle(
linewrapRadioFalse,
linewrapRadioTrue,
wordwrapRadioFalse,
wordwrapRadioTrue,
props.setLinewrap,
true
);
});
});
describe('start wordwrap at true', () => {
it('wordwrap toggle, starting at true', () => {
// render the component with wordwrap prop set to true
subject({ wordwrap: true });

describe('start linewrap at true', () => {
it('linewrap toggle, starting at true', () => {
// render the component with linewrap prop set to false
subject({ linewrap: true });

// get ahold of the radio buttons for toggling linewrap
const linewrapRadioFalse = screen.getByRole('radio', {
name: /linewrap off/i
// get ahold of the radio buttons for toggling wordwrap
const wordwrapRadioFalse = screen.getByRole('radio', {
name: /wordwrap off/i
});
const linewrapRadioTrue = screen.getByRole('radio', {
name: /linewrap on/i
const wordwrapRadioTrue = screen.getByRole('radio', {
name: /wordwrap on/i
});

testToggle(
linewrapRadioTrue,
linewrapRadioFalse,
wordwrapRadioTrue,
wordwrapRadioFalse,
props.setLinewrap,
false
);
Expand Down Expand Up @@ -513,7 +511,7 @@ describe('<Preferences />', () => {
});

const generalElement1 = screen.getByRole('radio', {
name: /linewrap on/i
name: /wordwrap on/i
});
expect(generalElement1).toBeInTheDocument();
});
Expand Down
22 changes: 11 additions & 11 deletions client/modules/IDE/components/Preferences/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function Preferences() {
tabIndex,
fontSize,
autosave,
linewrap,
wordwrap,
lineNumbers,
lintWarning,
textOutput,
Expand Down Expand Up @@ -386,27 +386,27 @@ export default function Preferences() {
<input
type="radio"
onChange={() => dispatch(setLinewrap(true))}
aria-label={t('Preferences.LineWrapOnARIA')}
name="linewrap"
id="linewrap-on"
aria-label={t('Preferences.WordWrapOnARIA')}
name="wordwrap"
id="wordwrap-on"
className="preference__radio-button"
value="On"
checked={linewrap}
checked={wordwrap}
/>
<label htmlFor="linewrap-on" className="preference__option">
<label htmlFor="wordwrap-on" className="preference__option">
{t('Preferences.On')}
</label>
<input
type="radio"
onChange={() => dispatch(setLinewrap(false))}
aria-label={t('Preferences.LineWrapOffARIA')}
name="linewrap"
id="linewrap-off"
aria-label={t('Preferences.WordWrapOffARIA')}
name="wordwrap"
id="wordwrap-off"
className="preference__radio-button"
value="Off"
checked={!linewrap}
checked={!wordwrap}
/>
<label htmlFor="linewrap-off" className="preference__option">
<label htmlFor="wordwrap-off" className="preference__option">
{t('Preferences.Off')}
</label>
</fieldset>
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/be/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,8 @@
"AutocompleteHinterOnARIA": "অটোকমপ্লিট হিন্টার চালু",
"AutocompleteHinterOffARIA": "অটোকম",
"WordWrap": "শব্দ বিন্যাস",
"LineWrapOnARIA": "লাইন বিন্যাস অন",
"LineWrapOffARIA": "লাইন বিন্যাস অফ",
"WordWrapOnARIA": "লাইন বিন্যাস অন",
"WordWrapOffARIA": "লাইন বিন্যাস অফ",
"LineNumbers": "লাইন সংখ্যা",
"LineNumbersOnARIA": "লাইন সংখ্যা অন",
"LineNumbersOffARIA": "লাইন সংখ্যা অফ",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/de/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
"AutocloseBracketsQuotesOnARIA": "Klammern und Anführungszeichen automatisch schließen an",
"AutocloseBracketsQuotesOffARIA": "Klammern und Anführungszeichen automatisch schließen aus",
"WordWrap": "Wortumbruch",
"LineWrapOnARIA": "zeilenumbruch an",
"LineWrapOffARIA": "zeilenumbruch aus",
"WordWrapOnARIA": "zeilenumbruch an",
"WordWrapOffARIA": "zeilenumbruch aus",
"LineNumbers": "Zeilennummerierung",
"LineNumbersOnARIA": "Zeilennummerierung an",
"LineNumbersOffARIA": "Zeilennummerierung aus",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/en-US/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,8 @@
"AutocompleteHinterOnARIA": "autocomplete hinter on",
"AutocompleteHinterOffARIA": "autocomplete hinter off",
"WordWrap": "Word Wrap",
"LineWrapOnARIA": "linewrap on",
"LineWrapOffARIA": "linewrap off",
"WordWrapOnARIA": "wordwrap on",
"WordWrapOffARIA": "wordwrap off",
"LineNumbers": "Line numbers",
"LineNumbersOnARIA": "line numbers on",
"LineNumbersOffARIA": "line numbers off",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/es-419/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
"Off": "Desactivar",
"AutosaveOffARIA": "Grabado automático desactivado",
"WordWrap": "Ajuste automático de línea",
"LineWrapOnARIA": "Ajuste automático de línea activado",
"LineWrapOffARIA": "Ajuste automático de línea desactivado",
"WordWrapOnARIA": "Ajuste automático de línea activado",
"WordWrapOffARIA": "Ajuste automático de línea desactivado",
"LineNumbers": "Número de línea",
"LineNumbersOnARIA": "Número de línea activado",
"LineNumbersOffARIA": "Número de línea desactivado",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/fr-CA/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,8 @@
"AutocloseBracketsQuotesOnARIA": "fermeture automatique des crochets et des guillemets activée",
"AutocloseBracketsQuotesOffARIA": "fermeture automatique des crochets et des guillemets désactivée",
"WordWrap": "Retour à la ligne automatique",
"LineWrapOnARIA": "retour à la ligne automatique activé",
"LineWrapOffARIA": "retour à la ligne automatique désactivé",
"WordWrapOnARIA": "retour à la ligne automatique activé",
"WordWrapOffARIA": "retour à la ligne automatique désactivé",
"LineNumbers": "Numéros de lignes",
"LineNumbersOnARIA": "numéros de lignes activés",
"LineNumbersOffARIA": "numéros de lignes désactivés",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/hi/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,8 @@
"AutocompleteHinterOnARIA": "ऑटोकम्प्लीट हिंटर चालू",
"AutocompleteHinterOffARIA": "ऑटोकम्प्लीट हिंटर बंद",
"WordWrap": "वर्ड रैप",
"LineWrapOnARIA": "लाइनरैप चालू",
"LineWrapOffARIA": "लाइनरैप बंद",
"WordWrapOnARIA": "वर्डरैप चालू",
"WordWrapOffARIA": "वर्डरैप बंद",
"LineNumbers": "लाइन नम्बर्ज़",
"LineNumbersOnARIA": "लाइन नम्बर्ज़ चालू",
"LineNumbersOffARIA": "लाइन नम्बर्ज़ बंद",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/it/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,8 @@
"AutocloseBracketsQuotesOnARIA": "Auto-chiusura parentesi e virgolette attivo",
"AutocloseBracketsQuotesOffARIA": "Auto-chiusura parentesi e virgolette disabilitata",
"WordWrap": "Dividi parole",
"LineWrapOnARIA": "dividi parole attivo",
"LineWrapOffARIA": "dividi parole disabilitato",
"WordWrapOnARIA": "dividi parole attivo",
"WordWrapOffARIA": "dividi parole disabilitato",
"LineNumbers": "Numero linea",
"LineNumbersOnARIA": "numero linea attivo",
"LineNumbersOffARIA": "numero linea disabilitato",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/ja/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
"AutocloseBracketsQuotesOnARIA": "括弧を自動的に閉じる オン",
"AutocloseBracketsQuotesOffARIA": "括弧を自動的に閉じる オフ",
"WordWrap": "ワードラップ",
"LineWrapOnARIA": "ラインラップ オン",
"LineWrapOffARIA": "ラインラップ オフ",
"WordWrapOnARIA": "ラインラップ オン",
"WordWrapOffARIA": "ラインラップ オフ",
"LineNumbers": "行番号",
"LineNumbersOnARIA": "行番号 表示",
"LineNumbersOffARIA": "行番号 非表示",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/ko/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,8 @@
"AutocloseBracketsQuotesOnARIA": "괄호 및 따옴표 자동 닫기 켜기",
"AutocloseBracketsQuotesOffARIA": "괄호 및 따옴표 자동 닫기 끄기",
"WordWrap": "단어 자동 줄 바꿈",
"LineWrapOnARIA": "줄 바꿈 켜기",
"LineWrapOffARIA": "줄 바꿈 끄기",
"WordWrapOnARIA": "줄 바꿈 켜기",
"WordWrapOffARIA": "줄 바꿈 끄기",
"LineNumbers": "줄 번호",
"LineNumbersOnARIA": "줄 번호 켜기",
"LineNumbersOffARIA": "줄 번호 끄기",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/pt-BR/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
"AutocloseBracketsQuotesOnARIA": "fechar automaticamente chaves e aspas ativado",
"AutocloseBracketsQuotesOffARIA": "fechar automaticamente chaves e aspas desativado",
"WordWrap": "Ajuste Automático de Linhas",
"LineWrapOnARIA": "ajuste automático de linhas ativado",
"LineWrapOffARIA": "ajuste automático de linhas desativado",
"WordWrapOnARIA": "ajuste automático de linhas ativado",
"WordWrapOffARIA": "ajuste automático de linhas desativado",
"LineNumbers": "Número de linhas",
"LineNumbersOnARIA": "número de linhas ativado",
"LineNumbersOffARIA": "número de linhas desativado",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/sv/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
"AutocloseBracketsQuotesOnARIA": "automatisk stängnging av parenteser och citattecken på",
"AutocloseBracketsQuotesOffARIA": "automatisk stängnging av parenteser och citattecken av",
"WordWrap": "Radbrytning",
"LineWrapOnARIA": "radbrytning på",
"LineWrapOffARIA": "radbrytning av",
"WordWrapOnARIA": "radbrytning på",
"WordWrapOffARIA": "radbrytning av",
"LineNumbers": "Radnummer",
"LineNumbersOnARIA": "radnummer på",
"LineNumbersOffARIA": "radnummer av",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/tr/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,8 @@
"AutocloseBracketsQuotesOnARIA": "parantez ve tırnakları otomatik kapatma açık",
"AutocloseBracketsQuotesOffARIA": "parantez ve tırnakları otomatik kapatma kapalı",
"WordWrap": "Sözcük Kaydırma",
"LineWrapOnARIA": "satır kaydırma açık",
"LineWrapOffARIA": "satır kaydırma kapalı",
"WordWrapOnARIA": "satır kaydırma açık",
"WordWrapOffARIA": "satır kaydırma kapalı",
"LineNumbers": "Satır Numaraları",
"LineNumbersOnARIA": "satır numaraları açık",
"LineNumbersOffARIA": "satır numaraları kapalı",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/uk-UA/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
"AutocloseBracketsQuotesOnARIA": "автоматично закривати дужки та лапки",
"AutocloseBracketsQuotesOffARIA": "автоматично закривати дужки та лапки",
"WordWrap": "Перенесення слів",
"LineWrapOnARIA": "перенесення рядків увімкнено",
"LineWrapOffARIA": "перенесення рядків вимкнено",
"WordWrapOnARIA": "перенесення рядків увімкнено",
"WordWrapOffARIA": "перенесення рядків вимкнено",
"LineNumbers": "Номери рядків",
"LineNumbersOnARIA": "номери рядків вимкнено",
"LineNumbersOffARIA": "номери рядків вимкнено",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/ur/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
"AutocompleteHinterOnARIA": "خودکار تکمیل اشارہ آن",
"AutocompleteHinterOffARIA": "خود کار طریقے سے اشارہ بند",
"WordWrap": "لفظ لفاف",
"LineWrapOnARIA": "لائن لپیٹنا",
"LineWrapOffARIA": "لائن لپیٹنا",
"WordWrapOnARIA": "لائن لپیٹنا",
"WordWrapOffARIA": "لائن لپیٹنا",
"LineNumbers": "لائن نمبرز",
"LineNumbersOnARIA": "لائن نمبر آن",
"LineNumbersOffARIA": "لائن نمبر بند",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/zh-CN/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,8 @@
"AutocompleteHinterOnARIA": "打开补全提示",
"AutocompleteHinterOffARIA": "关闭补全提示",
"WordWrap": "自动提行",
"LineWrapOnARIA": "打开自动提行",
"LineWrapOffARIA": "关闭自动提行",
"WordWrapOnARIA": "打开自动提行",
"WordWrapOffARIA": "关闭自动提行",
"LineNumbers": "行号",
"LineNumbersOnARIA": "打开行号",
"LineNumbersOffARIA": "关闭行号",
Expand Down
4 changes: 2 additions & 2 deletions translations/locales/zh-TW/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,8 @@
"AutocompleteHinterOnARIA": "加上補全提示",
"AutocompleteHinterOffARIA": "不加上補全提示",
"WordWrap": "折行",
"LineWrapOnARIA": "啟用自動折行",
"LineWrapOffARIA": "停用自動折行",
"WordWrapOnARIA": "啟用自動折行",
"WordWrapOffARIA": "停用自動折行",
"LineNumbers": "行號",
"LineNumbersOnARIA": "顯示行號",
"LineNumbersOffARIA": "不顯示行號",
Expand Down