fix: remove tabbing when element not visible during slideshow

dhis2 · Dec 18, 2024 · 11e1f8c · 11e1f8c
1 parent 6e7071a
commit 11e1f8c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/Item/ListItem/Item.js b/src/components/Item/ListItem/Item.js
@@ -12,6 +12,7 @@ import {
 import { isEditMode } from '../../../modules/dashboardModes.js'
 import { itemTypeMap, getItemUrl } from '../../../modules/itemTypes.js'
 import { orArray } from '../../../modules/util.js'
+import { sGetSlideshow } from '../../../reducers/slideshow.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import classes from './Item.module.css'
 
@@ -29,6 +30,7 @@ const ListItem = ({
     removeItem,
     updateItem,
     isFullscreen,
+    isSlideshowView,
 }) => {
     const { baseUrl } = useConfig()
     const contentItems = getContentItems(item)
@@ -64,6 +66,7 @@ const ListItem = ({
                     className={classes.link}
                     style={{ color: colors.grey900 }}
                     href={getItemUrl(item.type, contentItem, baseUrl)}
+                    tabIndex={isSlideshowView ? '-1' : '0'}
                 >
                     {contentItem.name}
                 </a>
@@ -104,12 +107,17 @@ const ListItem = ({
 ListItem.propTypes = {
     dashboardMode: PropTypes.string,
     isFullscreen: PropTypes.bool,
+    isSlideshowView: PropTypes.bool,
     item: PropTypes.object,
     removeItem: PropTypes.func,
     updateItem: PropTypes.func,
 }
 
-export default connect(null, {
+const mapStateToProps = (state) => ({
+    isSlideshowView: sGetSlideshow(state) !== null,
+})
+
+export default connect(mapStateToProps, {
     removeItem: acRemoveDashboardItem,
     updateItem: acUpdateDashboardItem,
 })(ListItem)
diff --git a/src/components/Item/MessagesItem/Item.js b/src/components/Item/MessagesItem/Item.js
@@ -6,6 +6,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { isViewMode } from '../../../modules/dashboardModes.js'
 import { sGetMessagesRoot } from '../../../reducers/messages.js'
+import { sGetSlideshow } from '../../../reducers/slideshow.js'
 import { useUserSettings } from '../../UserSettingsProvider.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import { getFormattedDate } from './getFormattedDate.js'
@@ -21,7 +22,7 @@ const messageTypes = {
     SYSTEM: 'System',
 }
 
-const MessagesItem = ({ messages, item, dashboardMode }) => {
+const MessagesItem = ({ messages, item, dashboardMode, isSlideshowView }) => {
     const { baseUrl } = useConfig()
     const { userSettings } = useUserSettings()
 
@@ -83,10 +84,13 @@ const MessagesItem = ({ messages, item, dashboardMode }) => {
             />
             <Divider margin={`0 0 ${spacers.dp4} 0`} />
             {messages.length > 0 && (
-                <div className={classes.content}>
+                <div className={classes.content} tabIndex="-1">
                     <ul className={classes.list}>{getMessageItems()}</ul>
                     <div className={classes.seeAll}>
-                        <a href={getMessageHref()}>
+                        <a
+                            href={getMessageHref()}
+                            tabIndex={isSlideshowView ? '-1' : '0'}
+                        >
                             {i18n.t('See all messages')}
                         </a>
                     </div>
@@ -98,13 +102,15 @@ const MessagesItem = ({ messages, item, dashboardMode }) => {
 
 MessagesItem.propTypes = {
     dashboardMode: PropTypes.string,
+    isSlideshowView: PropTypes.bool,
     item: PropTypes.object,
     messages: PropTypes.array,
 }
 
 const mapStateToProps = (state) => {
     return {
         messages: Object.values(sGetMessagesRoot(state)),
+        isSlideshowView: sGetSlideshow(state) !== null,
     }
 }