From 193b326d15604f5801f4144c384bf2621ef1a3db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 28 Jul 2021 16:03:14 +0200
Subject: [PATCH] a11y: Option to always underline links in posts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/settings.js                          | 1 +
 app/soapbox/containers/soapbox.js                        | 3 +++
 app/soapbox/features/preferences/index.js                | 4 ++++
 .../features/soapbox_config/components/site_preview.js   | 1 +
 app/soapbox/locales/pl.json                              | 1 +
 app/styles/components/status.scss                        | 9 +++++++++
 docs/store.md                                            | 1 +
 7 files changed, 20 insertions(+)

diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js
index 5c0cfe47b..54f2fb78b 100644
--- a/app/soapbox/actions/settings.js
+++ b/app/soapbox/actions/settings.js
@@ -16,6 +16,7 @@ export const defaultSettings = ImmutableMap({
 
   skinTone: 1,
   reduceMotion: false,
+  underlineLinks: false,
   autoPlayGif: true,
   displayMedia: 'default',
   expandSpoilers: false,
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 3b9f1321e..ca58d57af 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -48,6 +48,7 @@ const mapStateToProps = (state) => {
     showIntroduction,
     me,
     reduceMotion: settings.get('reduceMotion'),
+    underlineLinks: settings.get('underlineLinks'),
     systemFont: settings.get('systemFont'),
     dyslexicFont: settings.get('dyslexicFont'),
     demetricator: settings.get('demetricator'),
@@ -66,6 +67,7 @@ class SoapboxMount extends React.PureComponent {
     showIntroduction: PropTypes.bool,
     me: SoapboxPropTypes.me,
     reduceMotion: PropTypes.bool,
+    underlineLinks: PropTypes.bool,
     systemFont: PropTypes.bool,
     dyslexicFont: PropTypes.bool,
     demetricator: PropTypes.bool,
@@ -117,6 +119,7 @@ class SoapboxMount extends React.PureComponent {
     const bodyClass = classNames('app-body', `theme-mode-${this.props.themeMode}`, {
       'system-font': this.props.systemFont,
       'no-reduce-motion': !this.props.reduceMotion,
+      'underline-links': this.props.underlineLinks,
       'dyslexic': this.props.dyslexicFont,
       'demetricator': this.props.demetricator,
       'halloween': this.props.halloween,
diff --git a/app/soapbox/features/preferences/index.js b/app/soapbox/features/preferences/index.js
index 5bed02edf..a5a05a54d 100644
--- a/app/soapbox/features/preferences/index.js
+++ b/app/soapbox/features/preferences/index.js
@@ -221,6 +221,10 @@ class Preferences extends ImmutablePureComponent {
               label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}
               path={['reduceMotion']}
             />
+            <SettingsCheckbox
+              label={<FormattedMessage id='preferences.fields.underline_links_label' defaultMessage='Always underline links in posts' />}
+              path={['underlineLinks']}
+            />
             <SettingsCheckbox
               label={<FormattedMessage id='preferences.fields.system_font_label' defaultMessage="Use system's default font" />}
               path={['systemFont']}
diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site_preview.js
index 725ed3079..ee8714588 100644
--- a/app/soapbox/features/soapbox_config/components/site_preview.js
+++ b/app/soapbox/features/soapbox_config/components/site_preview.js
@@ -11,6 +11,7 @@ export default function SitePreview({ soapbox }) {
   const bodyClass = classNames('site-preview app-body', `theme-mode-${settings.get('themeMode')}`, {
     'system-font': settings.get('systemFont'),
     'no-reduce-motion': !settings.get('reduceMotion'),
+    'underline-links': settings.get('underlineLinks'),
     'dyslexic': settings.get('dyslexicFont'),
     'demetricator': settings.get('demetricator'),
     'halloween': settings.get('halloween'),
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index b968895d7..092ca3259 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -544,6 +544,7 @@
   "preferences.fields.privacy_label": "Prywatność wpisów",
   "preferences.fields.reduce_motion_label": "Ogranicz ruch w animacjach",
   "preferences.fields.system_font_label": "Używaj domyślnej czcionki systemu",
+  "preferences.fields.underline_links_label": "Zawsze podkreślaj odnośniki we wpisach",
   "preferences.fields.unfollow_modal_label": "Pokazuj prośbę o potwierdzenie przed cofnięciem obserwacji",
   "preferences.hints.content_type_markdown": "Ostrzeżenie: eksperymentalne!",
   "preferences.hints.demetricator": "Ogranicz uzależnienie od mediów społecznościowych ukrywając wszystkie liczby ze strony.",
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 359ed2999..3ceec3962 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -460,6 +460,15 @@
   }
 }
 
+.underline-links {
+  .status__content,
+  .reply-indicator__content {
+    a {
+      text-decoration: underline;
+    }
+  }
+}
+
 .focusable {
   &:focus {
     outline: 0;
diff --git a/docs/store.md b/docs/store.md
index 4a09f62be..69f2ba1e4 100644
--- a/docs/store.md
+++ b/docs/store.md
@@ -450,6 +450,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
        }
      ],
      systemFont: false,
+     underlineLinks: false,
      home: {
        regex: {
          body: ''