mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2025-01-09 02:56:06 +01:00
Fix focus not showing on channel page tabs and in prompts (#3850)
This commit is contained in:
parent
479ce634e9
commit
4e4fe69384
@ -70,6 +70,11 @@ const SyncEvents = {
|
||||
}
|
||||
}
|
||||
|
||||
// https://v2.vuejs.org/v2/api/#provide-inject
|
||||
const Injectables = {
|
||||
SHOW_OUTLINES: 'showOutlines'
|
||||
}
|
||||
|
||||
// Utils
|
||||
const MAIN_PROFILE_ID = 'allChannels'
|
||||
|
||||
@ -77,5 +82,6 @@ export {
|
||||
IpcChannels,
|
||||
DBActions,
|
||||
SyncEvents,
|
||||
Injectables,
|
||||
MAIN_PROFILE_ID
|
||||
}
|
||||
|
@ -10,7 +10,7 @@ import FtButton from './components/ft-button/ft-button.vue'
|
||||
import FtToast from './components/ft-toast/ft-toast.vue'
|
||||
import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
|
||||
import { marked } from 'marked'
|
||||
import { IpcChannels } from '../constants'
|
||||
import { Injectables, IpcChannels } from '../constants'
|
||||
import packageDetails from '../../package.json'
|
||||
import { openExternalLink, openInternalPath, showToast } from './helpers/utils'
|
||||
|
||||
@ -30,6 +30,11 @@ export default defineComponent({
|
||||
FtToast,
|
||||
FtProgressBar
|
||||
},
|
||||
provide: function () {
|
||||
return {
|
||||
[Injectables.SHOW_OUTLINES]: this.showOutlines
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
dataReady: false,
|
||||
@ -495,6 +500,15 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* provided to all child components, see `provide` near the top of this file
|
||||
* after injecting it, they can show outlines during keyboard navigation
|
||||
* e.g. cycling through tabs with the arrow keys
|
||||
*/
|
||||
showOutlines: function () {
|
||||
this.hideOutlines = false
|
||||
},
|
||||
|
||||
...mapMutations([
|
||||
'setInvidiousInstancesList'
|
||||
]),
|
||||
|
@ -40,7 +40,6 @@
|
||||
<RouterView
|
||||
ref="router"
|
||||
class="routerView"
|
||||
@showOutlines="hideOutlines = false"
|
||||
/>
|
||||
<!-- </keep-alive> -->
|
||||
</transition>
|
||||
|
@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
|
||||
import FtCard from '../../components/ft-card/ft-card.vue'
|
||||
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
|
||||
import FtButton from '../../components/ft-button/ft-button.vue'
|
||||
import { Injectables } from '../../../constants'
|
||||
import { sanitizeForHtmlId } from '../../helpers/accessibility'
|
||||
|
||||
export default defineComponent({
|
||||
@ -11,6 +12,9 @@ export default defineComponent({
|
||||
'ft-flex-box': FtFlexBox,
|
||||
'ft-button': FtButton
|
||||
},
|
||||
inject: {
|
||||
showOutlines: Injectables.SHOW_OUTLINES
|
||||
},
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
@ -77,7 +81,8 @@ export default defineComponent({
|
||||
index = 0
|
||||
}
|
||||
if (index >= 0 && index < this.promptButtons.length) {
|
||||
this.promptButtons[index].focus({ focusVisible: true })
|
||||
this.promptButtons[index].focus()
|
||||
this.showOutlines()
|
||||
}
|
||||
},
|
||||
// close on escape key and unfocus
|
||||
|
@ -32,6 +32,7 @@ import {
|
||||
parseLocalListVideo,
|
||||
parseLocalSubscriberCount
|
||||
} from '../../helpers/api/local'
|
||||
import { Injectables } from '../../../constants'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Channel',
|
||||
@ -47,6 +48,9 @@ export default defineComponent({
|
||||
'ft-subscribe-button': FtSubscribeButton,
|
||||
'channel-about': ChannelAbout
|
||||
},
|
||||
inject: {
|
||||
showOutlines: Injectables.SHOW_OUTLINES
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isLoading: false,
|
||||
@ -1724,7 +1728,8 @@ export default defineComponent({
|
||||
: this.tabInfoValues[(index + 1) % this.tabInfoValues.length]
|
||||
|
||||
const tabNode = document.getElementById(`${tab}Tab`)
|
||||
tabNode.focus({ focusVisible: true })
|
||||
tabNode.focus()
|
||||
this.showOutlines()
|
||||
return
|
||||
}
|
||||
}
|
||||
@ -1732,7 +1737,8 @@ export default defineComponent({
|
||||
// `newTabNode` can be `null` when `tab` === "search"
|
||||
const newTabNode = document.getElementById(`${tab}Tab`)
|
||||
this.currentTab = tab
|
||||
newTabNode?.focus({ focusVisible: true })
|
||||
newTabNode?.focus()
|
||||
this.showOutlines()
|
||||
},
|
||||
|
||||
newSearch: function (query) {
|
||||
|
@ -6,6 +6,7 @@ import SubscriptionsShorts from '../../components/subscriptions-shorts/subscript
|
||||
|
||||
import FtCard from '../../components/ft-card/ft-card.vue'
|
||||
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
|
||||
import { Injectables } from '../../../constants'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Subscriptions',
|
||||
@ -16,6 +17,9 @@ export default defineComponent({
|
||||
'ft-card': FtCard,
|
||||
'ft-flex-box': FtFlexBox
|
||||
},
|
||||
inject: {
|
||||
showOutlines: Injectables.SHOW_OUTLINES
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
currentTab: 'videos'
|
||||
@ -102,7 +106,7 @@ export default defineComponent({
|
||||
const visibleTabs = this.visibleTabs
|
||||
|
||||
if (visibleTabs.length === 1) {
|
||||
this.$emit('showOutlines')
|
||||
this.showOutlines()
|
||||
return
|
||||
}
|
||||
|
||||
@ -121,7 +125,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
this.$refs[visibleTabs[index]].focus()
|
||||
this.$emit('showOutlines')
|
||||
this.showOutlines()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -8,6 +8,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
|
||||
import { copyToClipboard, showToast } from '../../helpers/utils'
|
||||
import { getLocalTrending } from '../../helpers/api/local'
|
||||
import { invidiousAPICall } from '../../helpers/api/invidious'
|
||||
import { Injectables } from '../../../constants'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Trending',
|
||||
@ -18,6 +19,9 @@ export default defineComponent({
|
||||
'ft-icon-button': FtIconButton,
|
||||
'ft-flex-box': FtFlexBox
|
||||
},
|
||||
inject: {
|
||||
showOutlines: Injectables.SHOW_OUTLINES
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isLoading: false,
|
||||
@ -74,7 +78,7 @@ export default defineComponent({
|
||||
if (!event.altKey) {
|
||||
event.preventDefault()
|
||||
this.$refs[tab].focus()
|
||||
this.$emit('showOutlines')
|
||||
this.showOutlines()
|
||||
}
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user