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>
Этот коммит содержится в:
@@ -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>
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user