Merge remote-tracking branch 'origin/develop' into sss-objects

src/components/button.style.js

@@ -9,9 +9,9 @@ export default {
     // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
     // normal: '' // normal state is implicitly added, it is always included
     toggled: '.toggled',
-    focused: ':focus-visible',
+    focused: ':focus-within',
     pressed: ':focus:active',
-    hover: ':hover:not(:disabled)',
+    hover: ':is(:hover, :focus-visible):not(:disabled)',
     disabled: ':disabled'
   },
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
@@ -89,6 +89,13 @@ export default {
         shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
+    {
+      state: ['toggled', 'focused'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
+      }
+    },
     {
       state: ['toggled', 'disabled'],
       directives: {

src/components/button_unstyled.style.js

@@ -6,8 +6,8 @@ export default {
   states: {
     toggled: '.toggled',
     disabled: ':disabled',
-    hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
+    hover: ':is(:hover, :focus-visible):not(:disabled)',
+    focused: ':focus-within:not(:is(:focus-visible))'
   },
   validInnerComponents: [
     'Text',

src/components/emoji_input/emoji_input.vue

@@ -55,7 +55,7 @@
       ref="suggestorPopover"
       class="autocomplete-panel"
       placement="bottom"
-      :trigger-attrs="{ 'aria-hidden': true }"
+      :hide-trigger="true"
     >
       <template #content>
         <div

src/components/emoji_picker/emoji_picker.vue

@@ -3,7 +3,7 @@
     ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
+    :hide-trigger="true"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >

src/components/emoji_reactions/emoji_reactions.js

@@ -84,8 +84,6 @@ const EmojiReactions = {
     counterTriggerAttrs (reaction) {
       return {
         class: [
-          'btn',
-          'button-default',
           'emoji-reaction-count-button',
           {
             '-picked-reaction': this.reactedWith(reaction.name),

src/components/emoji_reactions/emoji_reactions.vue

@@ -52,6 +52,7 @@
       <UserListPopover
         :users="accountsForEmoji[reaction.name]"
         class="emoji-reaction-popover"
+        :normal-button="true"
         :trigger-attrs="counterTriggerAttrs(reaction)"
         @show="fetchEmojiReactionsByIfMissing()"
       >

src/components/input.style.js

@@ -2,7 +2,7 @@ export default {
   name: 'Input',
   selector: '.input',
   states: {
-    hover: ':hover:not(.disabled)',
+    hover: ':is(:hover, :focus-visible):not(.disabled)',
     focused: ':focus-within',
     disabled: '.disabled'
   },

src/components/list/list_item.style.js

@@ -3,7 +3,7 @@ export default {
   selector: '.list-item',
   states: {
     active: '.-active',
-    hover: ':hover:not(.-non-interactive)'
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
   },
   validInnerComponents: [
     'Text',

src/components/menu_item.style.js

@@ -11,7 +11,7 @@ export default {
     'Avatar'
   ],
   states: {
-    hover: ':hover:not(.disabled)',
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',
     active: '.-active',
     disabled: '.disabled'
   },

src/components/popover/popover.js

@@ -1,3 +1,4 @@
+/* global process */
 const Popover = {
   name: 'Popover',
   props: {
@@ -48,6 +49,12 @@ const Popover = {
     // Use styled button (to avoid nested buttons)
     normalButton: Boolean,
 
+    // Whether to hide the trigger totally
+    hideTrigger: {
+      type: Boolean,
+      default: false,
+    },
+
     triggerAttrs: {
       type: Object,
       default: {}
@@ -79,6 +86,26 @@ const Popover = {
       childrenShown: new Set()
     }
   },
+  computed: {
+    allTriggerAttrs () {
+      if (process.env.NODE_ENV === 'development') {
+        if ('aria-hidden' in this.triggerAttrs) {
+          throw new Error('Do not use aria-hidden in triggerAttrs. Instead set hideTrigger to true')
+        }
+      }
+
+      const attrs = {
+        ...this.triggerAttrs,
+      }
+
+      if (this.hideTrigger) {
+        attrs['aria-hidden'] = true
+        attrs.tabindex = 1
+      }
+
+      return attrs
+    }
+  },
   methods: {
     setAnchorEl (el) {
       this.anchorEl = el

src/components/popover/popover.vue

@@ -9,7 +9,7 @@
       class="popover-trigger-button"
       :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
-      v-bind="triggerAttrs"
+      v-bind="allTriggerAttrs"
       @click="onClick"
     >
       <slot name="trigger" />

src/components/scrollbar_element.style.js

@@ -34,7 +34,7 @@ export default {
   notEditable: true, // for now
   states: {
     pressed: ':active',
-    hover: ':hover:not(:disabled)',
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(:disabled)',
     disabled: ':disabled'
   },
   validInnerComponents: [

src/components/tab_switcher/tab.style.js

@@ -3,7 +3,7 @@ export default {
   selector: '.tab', // CSS selector/prefix
   states: {
     active: '.active',
-    hover: ':hover:not(.disabled)',
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',
     disabled: '.disabled'
   },
   validInnerComponents: [