From 5ec380f8b337aef2e999f111ca06e87378448a5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 15 Apr 2024 11:45:46 +0100 Subject: [PATCH 1/3] web: Stop using `` tag At some point in the development of #1138, we realized that even though it is a native HTML tag, it might not be as accessible as we originally believed. In fact, the doubt arose when considering keyboard users: How can they ask the browser to show the title attribute? By default, they can't. According to [Adrian Roselli tests and verdict](https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html), it is better to stop using them and > Explain abbreviations, acronyms, initialisms, numeronyms, etc. on > first use and then feel free to fall back to the shortened form. when really needed, as could be the case of "Full Disk Encryption (FDE)". --- .../components/core/InstallationFinished.jsx | 9 +++---- .../components/overview/StorageSection.jsx | 5 ++-- .../storage/EncryptionSettingsDialog.jsx | 8 +++--- .../storage/EncryptionSettingsDialog.test.jsx | 10 ++++---- .../storage/InstallationDeviceField.jsx | 25 +++++-------------- .../storage/ProposalResultSection.jsx | 2 +- 6 files changed, 21 insertions(+), 38 deletions(-) diff --git a/web/src/components/core/InstallationFinished.jsx b/web/src/components/core/InstallationFinished.jsx index 98fb3d8732..908428d30a 100644 --- a/web/src/components/core/InstallationFinished.jsx +++ b/web/src/components/core/InstallationFinished.jsx @@ -49,12 +49,9 @@ const TpmHint = () => { onToggle={() => setIsExpanded(!isExpanded)} toggleText={isExpanded ? _("Hide details") : _("See more details")} > - TPM to automatically open encrypted devices will take place during the first boot of the new system. For that to work, the machine needs to boot directly to the new boot loader.") - }} - /> + {_("The final step to configure the TPM to automatically open encrypted devices will \ +take place during the first boot of the new system. For that to work, the machine needs to boot \ +directly to the new boot loader.")} diff --git a/web/src/components/overview/StorageSection.jsx b/web/src/components/overview/StorageSection.jsx index 272a8eeac3..024e975932 100644 --- a/web/src/components/overview/StorageSection.jsx +++ b/web/src/components/overview/StorageSection.jsx @@ -60,8 +60,7 @@ const ProposalSummary = ({ proposal }) => { if (result.settings.target === "NEW_LVM_VG") { // TRANSLATORS: Part of the message describing where the system will be installed. - // Do not translate 'abbr' and 'title', they are part of the HTML markup. - const vg = _("LVM volume group"); + const vg = _("Logical Volume Manager (LVM) volume group"); const pvDevices = result.settings.targetPVDevices; const fullMsg = (policy, num_pvs) => { switch (policy) { @@ -110,7 +109,7 @@ const ProposalSummary = ({ proposal }) => { return ( - { label(pvDevices[0]) } + {label(pvDevices[0])} ); diff --git a/web/src/components/storage/EncryptionSettingsDialog.jsx b/web/src/components/storage/EncryptionSettingsDialog.jsx index 1597a13993..42101f2095 100644 --- a/web/src/components/storage/EncryptionSettingsDialog.jsx +++ b/web/src/components/storage/EncryptionSettingsDialog.jsx @@ -36,13 +36,13 @@ import { EncryptionMethods } from "~/client/storage"; const DIALOG_TITLE = _("Encryption"); const DIALOG_DESCRIPTION = _("Full disk encryption allows to protect the information stored at \ the device, including data, programs, and system files."); -const TPM_LABEL = _("Use the TPM to decrypt automatically on each boot"); +// TRANSLATORS: "Trusted Platform Module" is the name of the technology and TPM its abbreviation +const TPM_LABEL = _("Use the Trusted Platform Module (TPM) to decrypt automatically on each boot"); // TRANSLATORS: The word 'directly' is key here. For example, booting to the installer media and then choosing // 'Boot from Hard Disk' from there will not work. Keep it sort (this is a hint in a form) but keep it clear. -// Do not translate 'abbr' and 'title', they are part of the HTML markup. const TPM_EXPLANATION = _("The password will not be needed to boot and access the data if the \ -TPM can verify the integrity of the system. \ -TPM sealing requires the new system to be booted directly on its first run."); +TPM can verify the integrity of the system. TPM sealing requires the new system to be booted \ +directly on its first run."); /** * Renders a dialog that allows the user change encryption settings diff --git a/web/src/components/storage/EncryptionSettingsDialog.test.jsx b/web/src/components/storage/EncryptionSettingsDialog.test.jsx index 9dcf0eb66b..fc76319ca6 100644 --- a/web/src/components/storage/EncryptionSettingsDialog.test.jsx +++ b/web/src/components/storage/EncryptionSettingsDialog.test.jsx @@ -54,7 +54,7 @@ describe("EncryptionSettingsDialog", () => { const switchField = screen.getByRole("switch", { name: "Encrypt the system" }); const passwordInput = screen.getByLabelText("Password"); const confirmationInput = screen.getByLabelText("Password confirmation"); - const tpmCheckbox = screen.getByRole("checkbox", { name: /Use the TPM/ }); + const tpmCheckbox = screen.getByRole("checkbox", { name: /Use.*TPM/ }); const acceptButton = screen.getByRole("button", { name: "Accept" }); expect(switchField).not.toBeChecked(); @@ -85,7 +85,7 @@ describe("EncryptionSettingsDialog", () => { const passwordInput = screen.getByLabelText("Password"); const confirmationInput = screen.getByLabelText("Password confirmation"); const acceptButton = screen.getByRole("button", { name: "Accept" }); - const tpmCheckbox = screen.getByRole("checkbox", { name: /Use the TPM/ }); + const tpmCheckbox = screen.getByRole("checkbox", { name: /Use.*TPM/ }); await user.clear(passwordInput); await user.type(passwordInput, "9876"); @@ -118,8 +118,8 @@ describe("EncryptionSettingsDialog", () => { it("allows to stop using it", async () => { const { user } = plainRender(); - const tpmCheckbox = screen.queryByRole("checkbox", { name: /Use the TPM/ }); - const acceptButton = screen.queryByRole("button", { name: "Accept" }); + const tpmCheckbox = screen.getByRole("checkbox", { name: /Use.*TPM/ }); + const acceptButton = screen.getByRole("button", { name: "Accept" }); expect(tpmCheckbox).toBeChecked(); await user.click(tpmCheckbox); expect(tpmCheckbox).not.toBeChecked(); @@ -137,7 +137,7 @@ describe("EncryptionSettingsDialog", () => { it("does not render the TPM checkbox", () => { plainRender(); - expect(screen.queryByRole("checkbox", { name: /Use the TPM/ })).toBeNull(); + expect(screen.queryByRole("checkbox", { name: /Use.*TPM/ })).toBeNull(); }); }); diff --git a/web/src/components/storage/InstallationDeviceField.jsx b/web/src/components/storage/InstallationDeviceField.jsx index a0ef5c6e35..2913d24d7b 100644 --- a/web/src/components/storage/InstallationDeviceField.jsx +++ b/web/src/components/storage/InstallationDeviceField.jsx @@ -35,6 +35,10 @@ import { sprintf } from "sprintf-js"; * @typedef {import ("~/client/storage").StorageDevice} StorageDevice */ +const LABEL = _("Installation device"); +// TRANSLATORS: The storage "Installation device" field's description. +const DESCRIPTION = _("Select the main disk or LVM Volume Group for installation."); + /** * Generates the target value. * @function @@ -58,23 +62,6 @@ const targetValue = (target, targetDevice, targetPVDevices) => { return _("No device selected yet"); }; -/** - * Field description. - * @function - * - * @returns {React.ReactElement} - */ -const renderDescription = () => ( - LVM \ -Volume Group for installation.") - }} - /> -); - const StorageTechSelector = () => { return ( @@ -128,9 +115,9 @@ export default function InstallationDeviceField({ return ( {_("Prepare more devices by configuring advanced")} diff --git a/web/src/components/storage/ProposalResultSection.jsx b/web/src/components/storage/ProposalResultSection.jsx index b3a74a13c7..984573fe98 100644 --- a/web/src/components/storage/ProposalResultSection.jsx +++ b/web/src/components/storage/ProposalResultSection.jsx @@ -140,7 +140,7 @@ const DevicesTreeTable = ({ devicesManager }) => { }; const renderPTableType = (item) => { - // TODO: Create a map for partition table types and use an here. + // TODO: Create a map for partition table types. const type = item.partitionTable?.type; if (type) return {type.toUpperCase()}; }; From 54942f9babb0abacd60d3acceb692727f76a9f80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 15 Apr 2024 11:50:29 +0100 Subject: [PATCH 2/3] web: Includes FDE abbreviation --- web/src/components/storage/EncryptionField.jsx | 2 +- web/src/components/storage/EncryptionSettingsDialog.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/storage/EncryptionField.jsx b/web/src/components/storage/EncryptionField.jsx index ae3844af8a..2246eed04a 100644 --- a/web/src/components/storage/EncryptionField.jsx +++ b/web/src/components/storage/EncryptionField.jsx @@ -36,7 +36,7 @@ import EncryptionSettingsDialog from "~/components/storage/EncryptionSettingsDia // Field texts at root level to avoid redefinitions every time the component // is rendered. const LABEL = _("Encryption"); -const DESCRIPTION = _("Full disk encryption allows to protect the information stored at \ +const DESCRIPTION = _("Full Disk Encryption (FDE) allows to protect the information stored at \ the device, including data, programs, and system files."); const VALUES = { loading: , diff --git a/web/src/components/storage/EncryptionSettingsDialog.jsx b/web/src/components/storage/EncryptionSettingsDialog.jsx index 42101f2095..ea3818ac34 100644 --- a/web/src/components/storage/EncryptionSettingsDialog.jsx +++ b/web/src/components/storage/EncryptionSettingsDialog.jsx @@ -34,8 +34,8 @@ import { EncryptionMethods } from "~/client/storage"; */ const DIALOG_TITLE = _("Encryption"); -const DIALOG_DESCRIPTION = _("Full disk encryption allows to protect the information stored at \ -the device, including data, programs, and system files."); +const DIALOG_DESCRIPTION = _("Full Disk Encryption (FDE) allows to protect the information stored \ +at the device, including data, programs, and system files."); // TRANSLATORS: "Trusted Platform Module" is the name of the technology and TPM its abbreviation const TPM_LABEL = _("Use the Trusted Platform Module (TPM) to decrypt automatically on each boot"); // TRANSLATORS: The word 'directly' is key here. For example, booting to the installer media and then choosing From 19247d544029ea69cfb7cd4e50062857d6e58a32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 15 Apr 2024 12:00:52 +0100 Subject: [PATCH 3/3] web: Update changelog --- web/package/cockpit-agama.changes | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes index d8ddc43df9..d6817fe86c 100644 --- a/web/package/cockpit-agama.changes +++ b/web/package/cockpit-agama.changes @@ -1,3 +1,10 @@ +------------------------------------------------------------------- +Mon Apr 15 10:52:14 UTC 2024 - David Diaz + +- Stop using `` tag because "its exposure continues to be + inconsistent across browsers and assistive technologies" + (gh#openSUSE/agama#1149). + ------------------------------------------------------------------- Mon Apr 15 07:14:35 UTC 2024 - David Diaz