From ea65f1b53eaca19586ad735794d5391aba7dd94f Mon Sep 17 00:00:00 2001 From: Paul Schreiber Date: Wed, 29 Nov 2023 12:41:04 -0500 Subject: [PATCH 1/6] fix: add alt text to tool images --- src/localization/locales/en-US.json | 7 +++++-- src/tool/components/ToolCard.js | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/localization/locales/en-US.json b/src/localization/locales/en-US.json index 931d70fce..83b186601 100644 --- a/src/localization/locales/en-US.json +++ b/src/localization/locales/en-US.json @@ -164,7 +164,8 @@ "img": { "height": "140", "width": "250", - "src": "tools/kobotoolbox-screenshot.png" + "src": "tools/kobotoolbox-screenshot.png", + "alt": "A phone, a laptop, and a tablet, each displaying a data collection form. The tool’s logo is in the foreground." }, "description": [ "Design and build forms quickly", @@ -181,7 +182,8 @@ "img": { "height": "140", "width": "250", - "src": "tools/landscale-screenshot.png" + "src": "tools/landscale-screenshot.png", + "alt": "A dashboard containing charts and graphs about a landscape. The tool’s logo is in the foreground." }, "description": [ "Assess landscape sustainability performance", @@ -198,6 +200,7 @@ "height": "188", "width": "250", "src": "tools/story-maps.png", + "alt": "A satellite map of a bend in a river, overlayed by a window containing a picture and a block of text.", "caption": "Rocky Hill’s Story Map" }, "description": ["Create beautiful map-based stories"], diff --git a/src/tool/components/ToolCard.js b/src/tool/components/ToolCard.js index 464b2da6c..67750e5bd 100644 --- a/src/tool/components/ToolCard.js +++ b/src/tool/components/ToolCard.js @@ -42,7 +42,7 @@ const ToolIconAndLink = ({ tool, title, external }) => { Date: Wed, 29 Nov 2023 14:02:48 -0500 Subject: [PATCH 2/6] fix: rewrite tool icon/text links as separate items --- src/tool/components/ToolCard.js | 63 +++++++++++++++++---------------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/src/tool/components/ToolCard.js b/src/tool/components/ToolCard.js index 67750e5bd..db07f5430 100644 --- a/src/tool/components/ToolCard.js +++ b/src/tool/components/ToolCard.js @@ -36,24 +36,37 @@ import theme from 'theme'; const ToolIconAndLink = ({ tool, title, external }) => { const { t } = useTranslation(); const toolImage = require(`assets/${t(`tools.${tool}.img.src`)}`); + const toolUrl = t(`tools.${tool}.url`); + const toolText = t('tool.go_to', { tool: title }); + const toolIcon = ( + + ); return ( - + {external ? ( + {toolIcon} + ) : ( + {toolIcon} + )}

- {t('tool.go_to', { tool: title })} + {external ? ( + {toolText} + ) : ( + {toolText} + )} {external && ( {

- {isToolExternal ? ( - - - - ) : ( - - - - )} +
From 561cc91d22ac7845b900bcdde036679691639d61 Mon Sep 17 00:00:00 2001 From: Paul Schreiber Date: Wed, 29 Nov 2023 14:09:59 -0500 Subject: [PATCH 3/6] refactor: DRY up Link vs ExternalLink --- src/tool/components/ToolCard.js | 36 ++++++++++----------------------- 1 file changed, 11 insertions(+), 25 deletions(-) diff --git a/src/tool/components/ToolCard.js b/src/tool/components/ToolCard.js index db07f5430..eef1db2c8 100644 --- a/src/tool/components/ToolCard.js +++ b/src/tool/components/ToolCard.js @@ -53,20 +53,13 @@ const ToolIconAndLink = ({ tool, title, external }) => { }} /> ); + const LinkComponent = external ? ExternalLink : Link; return ( - {external ? ( - {toolIcon} - ) : ( - {toolIcon} - )} + {toolIcon}

- {external ? ( - {toolText} - ) : ( - {toolText} - )} + {toolText} {external && ( { attributes['aria-label'] = pronunciation; } - const isToolExternal = t(`tools.${tool}.external`) === 'true'; + const external = t(`tools.${tool}.external`) === 'true'; + const LinkComponent = external ? ExternalLink : Link; return ( @@ -138,9 +132,9 @@ const ToolCard = ({ tool }) => { {learnMoreUrl && ( - {isToolExternal ? ( - - {t('tool.learn_more', { tool: toolTitle })} + + {t('tool.learn_more', { tool: toolTitle })} + {external && ( { verticalAlign: '-0.2rem', }} /> - - ) : ( - - {t('tool.learn_more', { tool: toolTitle })} - - )} + )} + )}

- +
From 8aab6f54ac587e5278b723f55a5ef6c51212ec5a Mon Sep 17 00:00:00 2001 From: Paul Schreiber Date: Wed, 29 Nov 2023 17:32:40 -0500 Subject: [PATCH 4/6] fix: color LaunchIcon link blue on tools page --- src/tool/components/ToolCard.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tool/components/ToolCard.js b/src/tool/components/ToolCard.js index eef1db2c8..b75d7fc1a 100644 --- a/src/tool/components/ToolCard.js +++ b/src/tool/components/ToolCard.js @@ -67,6 +67,7 @@ const ToolIconAndLink = ({ tool, title, external }) => { height: '1.2rem', width: '1.2rem', verticalAlign: 'bottom', + color: theme.palette.link, }} /> )} From 1152a8551d7d0e689ca0f80b38a30a08c45a1aa0 Mon Sep 17 00:00:00 2001 From: Paul Schreiber Date: Thu, 30 Nov 2023 10:54:58 -0500 Subject: [PATCH 5/6] fix: restore link to launch icon --- src/tool/components/ToolCard.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/tool/components/ToolCard.js b/src/tool/components/ToolCard.js index b75d7fc1a..db2efea5d 100644 --- a/src/tool/components/ToolCard.js +++ b/src/tool/components/ToolCard.js @@ -59,18 +59,20 @@ const ToolIconAndLink = ({ tool, title, external }) => { {toolIcon}

- {toolText} - {external && ( - - )} + + {toolText} + {external && ( + + )} +

); From 235f0524e51fd28a597a734f3d32f055270f4666 Mon Sep 17 00:00:00 2001 From: Jose Buitron Date: Thu, 30 Nov 2023 12:16:04 -0500 Subject: [PATCH 6/6] chore: Added ES translations --- src/localization/locales/es-ES.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/localization/locales/es-ES.json b/src/localization/locales/es-ES.json index 79bb6d5d5..502bd34b6 100644 --- a/src/localization/locales/es-ES.json +++ b/src/localization/locales/es-ES.json @@ -164,7 +164,8 @@ "img": { "height": "140", "width": "250", - "src": "tools/kobotoolbox-screenshot.png" + "src": "tools/kobotoolbox-screenshot.png", + "alt": "Un teléfono, una computadora portátil y una tableta, cada uno de los cuales muestra un formulario de recopilación de datos. El logotipo de la herramienta está en primer plano." }, "description": [ "Diseñe y cree formularios rápidamente", @@ -181,7 +182,8 @@ "img": { "height": "140", "width": "250", - "src": "tools/landscale-screenshot.png" + "src": "tools/landscale-screenshot.png", + "alt": "Un panel que contiene cuadros y gráficos sobre un paisaje. El logotipo de la herramienta está en primer plano." }, "description": [ "Evaluar el desempeño de la sostenibilidad del paisaje", @@ -198,6 +200,7 @@ "height": "188", "width": "250", "src": "tools/story-maps.png", + "alt": "Un mapa satelital de un recodo de un río, superpuesto por una ventana que contiene una imagen y un bloque de texto.", "caption": "Story Map de Rocky Hill" }, "description": ["Crea hermosas historias basadas en mapas"],