MM-61303 - fix accesibility issues with feature scheduled messages (#29247)

* MM-61303 - fix tab accesibility for core-menu-options

* add tabindex options and autofocus for tabs component

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Pablo Vélez
2024-11-14 23:36:17 +01:00
коммит произвёл GitHub
родитель d204083b12
Коммит 8933756aea
4 изменённых файлов: 7 добавлений и 1 удалений

Просмотреть файл

@@ -122,6 +122,7 @@ function CoreMenuOptions({handleOnSelect, channelId}: Props) {
/> />
} }
className='core-menu-options' className='core-menu-options'
autoFocus={true}
{...extraProps} {...extraProps}
/> />
); );
@@ -158,6 +159,7 @@ function CoreMenuOptions({handleOnSelect, channelId}: Props) {
/> />
} }
className='core-menu-options' className='core-menu-options'
autoFocus={now.weekday === 5 || now.weekday === 6}
{...extraProps} {...extraProps}
/> />
); );

Просмотреть файл

@@ -164,6 +164,7 @@ function Drafts({
title={draftTabHeading} title={draftTabHeading}
unmountOnExit={false} unmountOnExit={false}
tabClassName='drafts_tab' tabClassName='drafts_tab'
tabIndex={0}
> >
<DraftList <DraftList
drafts={drafts} drafts={drafts}

Просмотреть файл

@@ -10,15 +10,17 @@ type Props = {
title?: React.ReactNode | undefined; title?: React.ReactNode | undefined;
unmountOnExit?: boolean | undefined; unmountOnExit?: boolean | undefined;
tabClassName?: string | undefined; tabClassName?: string | undefined;
tabIndex?: number;
} }
export default function Tab({children, title, unmountOnExit, tabClassName, eventKey}: Props) { export default function Tab({children, title, unmountOnExit, tabClassName, eventKey, tabIndex = -1}: Props) {
return ( return (
<ReactBootstrapTab <ReactBootstrapTab
eventKey={eventKey} eventKey={eventKey}
title={title} title={title}
unmountOnExit={unmountOnExit} unmountOnExit={unmountOnExit}
tabClassName={tabClassName} tabClassName={tabClassName}
tabIndex={tabIndex}
> >
{children} {children}
</ReactBootstrapTab> </ReactBootstrapTab>

Просмотреть файл

@@ -35,6 +35,7 @@ export default function Tabs({
onSelect={onSelect} onSelect={onSelect}
className={classNames('tabs', className)} className={classNames('tabs', className)}
mountOnEnter={mountOnEnter} mountOnEnter={mountOnEnter}
autoFocus={true}
> >
{children} {children}
</ReactBootstrapTabs> </ReactBootstrapTabs>