From f295633a6e779108db30c75f72ac98ea46073b67 Mon Sep 17 00:00:00 2001 From: Darius Kazemi Date: Wed, 28 Dec 2022 23:35:49 -0800 Subject: [PATCH] Add icon on media that lacks alt description (#1261) A warning icon now appears on media that lacks an alt description. Also, for admins who want to add custom CSS rules to media that is missing descriptions, there is now a `.media-missing-description` rule that can be added to the custom CSS settings so you can do stuff like this if you want: Fixes #1165 --- .../mastodon/components/media_gallery.js | 23 +++++++---- .../mastodon/features/audio/index.js | 4 +- .../mastodon/features/video/index.js | 4 +- app/javascript/mastodon/locales/en.json | 1 + .../styles/mastodon/components.scss | 40 ++++++++++++++++--- 5 files changed, 56 insertions(+), 16 deletions(-) diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 2e7ce2e60..4f2814a3a 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -12,6 +12,7 @@ import Blurhash from 'mastodon/components/blurhash'; const messages = defineMessages({ toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' }, + no_descriptive_text: { id: 'media.no_descriptive_text', defaultMessage: 'No descriptive text was provided for this media.' }, }); class Item extends React.PureComponent { @@ -25,6 +26,7 @@ class Item extends React.PureComponent { displayWidth: PropTypes.number, visible: PropTypes.bool.isRequired, autoplay: PropTypes.bool, + noDescriptionTitle: PropTypes.object, }; static defaultProps = { @@ -135,7 +137,7 @@ class Item extends React.PureComponent { if (attachment.get('type') === 'unknown') { return (
- + + { !attachment.get('description') && }
); } @@ -329,13 +335,14 @@ class MediaGallery extends React.PureComponent { style.height = height; } - const size = media.take(4).size; - const uncached = media.every(attachment => attachment.get('type') === 'unknown'); + const size = media.take(4).size; + const uncached = media.every(attachment => attachment.get('type') === 'unknown'); + const noDescriptionTitle = intl.formatMessage(messages.no_descriptive_text); if (standalone && this.isFullSizeEligible()) { - children = ; + children = ; } else { - children = media.take(4).map((attachment, i) => ); + children = media.take(4).map((attachment, i) => ); } if (uncached) { diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js index 00854d0e4..9da6e8463 100644 --- a/app/javascript/mastodon/features/audio/index.js +++ b/app/javascript/mastodon/features/audio/index.js @@ -19,6 +19,7 @@ const messages = defineMessages({ unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, download: { id: 'video.download', defaultMessage: 'Download file' }, hide: { id: 'audio.hide', defaultMessage: 'Hide audio' }, + no_descriptive_text: { id: 'media.no_descriptive_text', defaultMessage: 'No descriptive text was provided for this media.' }, }); const TICK_SIZE = 10; @@ -470,7 +471,7 @@ class Audio extends React.PureComponent { } return ( -
+
+ {!alt && } {!editable && } diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 4f90e955f..28646f830 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -19,6 +19,7 @@ const messages = defineMessages({ close: { id: 'video.close', defaultMessage: 'Close video' }, fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' }, exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, + no_descriptive_text: { id: 'media.no_descriptive_text', defaultMessage: 'No descriptive text was provided for this media.' }, }); export const formatTime = secondsNum => { @@ -558,7 +559,7 @@ class Video extends React.PureComponent { return (
+ {!alt && } {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && } {(!fullscreen && onOpenVideo) && } {onCloseVideo && } diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index ebaba42e5..c780d6224 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -363,6 +363,7 @@ "load_pending": "{count, plural, one {# new item} other {# new items}}", "loading_indicator.label": "Loading...", "media_gallery.toggle_visible": "{number, plural, one {Hide image} other {Hide images}}", + "media.no_descriptive_text": "No descriptive text was provided for this media.", "missing_indicator.label": "Not found", "missing_indicator.sublabel": "This resource could not be found", "moved_to_account_banner.text": "Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ce1e56008..1011d8040 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5885,22 +5885,40 @@ a.status-card.compact:hover { z-index: 9999; } -.media-gallery__gifv__label { +.media-gallery__gifv__label__container { display: block; position: absolute; + bottom: 4px; + left: 4px; + z-index: 1; + cursor: default; +} + +.media-gallery__gifv__label { color: $primary-text-color; background: rgba($base-overlay-background, 0.5); - bottom: 6px; - left: 6px; - padding: 2px 6px; border-radius: 2px; + padding: 3px 6px; font-size: 11px; font-weight: 600; - z-index: 1; pointer-events: none; opacity: 0.9; transition: opacity 0.1s ease; - line-height: 18px; +} + +.media-gallery__gifv__label__no-description { + color: $primary-text-color; + border-radius: 2px; + padding: 2px 6px; + font-size: 11px; + font-weight: 600; + z-index: 1; + opacity: 0.9; + transition: opacity 0.1s ease; + + button { + cursor: default; + } } .media-gallery__gifv { @@ -6002,6 +6020,12 @@ a.status-card.compact:hover { } } +.media-gallery__item-no-alt { + position: absolute; + bottom: 4px; + left: 4px; +} + .media-gallery__item-thumbnail { cursor: zoom-in; display: block; @@ -6289,6 +6313,10 @@ a.status-card.compact:hover { color: $white; } } + + .no-action { + cursor: default; + } } &__time {