feat: publish button disabled UX (#886)

components/publish/PublishWidget.vue

@@ -184,6 +184,13 @@ defineExpose({
     editor.value?.commands?.focus?.()
   },
 })
+
+const isPublishDisabled = computed(() => {
+  if (isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status))
+    return true
+
+  return false
+})
 </script>
 
 <template>
@@ -348,14 +355,31 @@ defineExpose({
           </template>
         </PublishVisibilityPicker>
 
+        <CommonTooltip id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
           <button
-          btn-solid rounded-3 text-sm w-full md:w-fit
+            btn-solid rounded-3 text-sm w-full
-          :disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status) || characterCount > characterLimit"
+            md:w-fit
+            class="publish-button"
+            :aria-disabled="isPublishDisabled"
+            aria-describedby="publish-tooltip"
             @click="publish"
           >
             {{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
           </button>
+        </CommonTooltip>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+  .publish-button[aria-disabled=true] {
+    cursor: not-allowed;
+    background-color: var(--c-bg-btn-disabled);
+    color: var(--c-text-btn-disabled);
+  }
+  .publish-button[aria-disabled=true]:hover {
+    background-color: var(--c-bg-btn-disabled);
+    color: var(--c-text-btn-disabled);
+  }
+</style>

locales/en-GB.json

@@ -362,6 +362,8 @@
   "tooltip": {
     "add_content_warning": "Add content warning",
     "add_media": "Add images, a video or an audio file",
+    "add_publishable_content": "Add content to publish",
+
     "change_content_visibility": "Change content visibility",
     "change_language": "Change language",
     "emoji": "Emoji",

locales/en-US.json

@@ -432,6 +432,7 @@
   "tooltip": {
     "add_content_warning": "Add content warning",
     "add_media": "Add images, a video or an audio file",
+    "add_publishable_content": "Add content to publish",
     "change_content_visibility": "Change content visibility",
     "change_language": "Change language",
     "emoji": "Emoji",