Fix focus not showing on channel page tabs and in prompts (#3850)

This commit is contained in:
absidue 2023-08-06 19:26:22 +02:00 committed by GitHub
parent 479ce634e9
commit 4e4fe69384
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 46 additions and 8 deletions

View File

@ -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
}

View File

@ -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'
]),

View File

@ -40,7 +40,6 @@
<RouterView
ref="router"
class="routerView"
@showOutlines="hideOutlines = false"
/>
<!-- </keep-alive> -->
</transition>

View File

@ -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

View File

@ -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) {

View File

@ -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()
}
}
}

View File

@ -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()
}
},