a11y: Option to always underline links in posts

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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,

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,

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']}

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'),

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.",

app/styles/components/status.scss

@@ -460,6 +460,15 @@
   }
 }
 
+.underline-links {
+  .status__content,
+  .reply-indicator__content {
+    a {
+      text-decoration: underline;
+    }
+  }
+}
+
 .focusable {
   &:focus {
     outline: 0;

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: ''