diff --git a/src/features/accesskit.json b/src/features/accesskit.json index 71bb19e88..03cdb889a 100644 --- a/src/features/accesskit.json +++ b/src/features/accesskit.json @@ -57,6 +57,11 @@ { "value": "hide", "label": "Only show image descriptions" } ], "default": "show" + }, + "alt_text_reminder": { + "type": "checkbox", + "label": "Remind me to add alt text to images", + "default": false } } } diff --git a/src/features/accesskit/alt_text_reminder.js b/src/features/accesskit/alt_text_reminder.js new file mode 100644 index 000000000..b27d97681 --- /dev/null +++ b/src/features/accesskit/alt_text_reminder.js @@ -0,0 +1,45 @@ +import { keyToCss } from '../../utils/css_map.js'; +import { buildStyle } from '../../utils/interface.js'; +import { translate } from '../../utils/language_data.js'; +import { pageModifications } from '../../utils/mutations.js'; + +const missingAltTextBlock = `figure:has(img[alt="${translate('Image')}"], img[alt="${translate('Image').toLowerCase()}"])`; + +const styleElement = buildStyle(` + ${missingAltTextBlock} ${keyToCss('optionsIcon')} { + outline: 3px dashed rgb(var(--accent)); + outline-offset: -1px; + } + + ${missingAltTextBlock}:hover ${keyToCss('images')} > div::after { + position: absolute; + bottom: 5px; + right: 0px; + + padding: 23px 46px 23px 12px; + border-radius: 23px; + + background-color: rgba(var(--black)); + color: rgb(var(--white)); + + content: "Add a description! ->"; + font-size: var(--base-font-size); + font-weight: 500; + line-height: 0; + } + + ${missingAltTextBlock} ${keyToCss('optionsWrapper')} { + display: unset !important; + } +`); + +const processEditors = ([editor]) => editor.prepend(styleElement); + +export const main = async () => { + pageModifications.register('.block-editor-writing-flow', processEditors); +}; + +export const clean = async () => { + pageModifications.unregister(processEditors); + styleElement.remove(); +};