mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Accessibility: Add header tags missing in title sections (#30776)

Просмотр исходного кода 
* Fixed missing header in create account

* Fixed modal header

* Fixed header for suggestionList for autocomplete popup

* Fixed heading for search hints title

* Fixed header tag in search suggestion header

* Fixed header tag in RHS title

* Fixed header in RHS search results title

* Fixed header for RHS CHannel Info title

* Linting

* Fix tests

* Styling fix

* Linting

* PR Feedback

* Fixed tests

* Moved subtitle into h2

* Fix tests from merge

* Linting

* Fix snapshots

* Updated playwright tests snapshots

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Maria A Nunez
2025-05-26 20:53:04 -04:00
коммит произвёл GitHub
родитель 1e0621252f
Коммит 5b28ddadb9
29 изменённых файлов: 176 добавлений и 128 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

Двоичные данные
e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-chrome-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 96 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-firefox-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 172 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-ipad-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 84 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-chrome-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 186 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-firefox-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 490 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-ipad-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 139 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-chrome-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 188 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-firefox-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 500 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-ipad-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 135 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-chrome-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 214 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-firefox-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 515 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-ipad-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 171 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-chrome-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 211 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-firefox-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 512 KiB

Двоичные данные
e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-ipad-linux.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 169 KiB

34
webapp/channels/src/components/channel_info_rhs/header.tsx
Просмотреть файл

@@ -41,23 +41,25 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
/> />
</button> </button>
)} )}
<HeaderTitle <h2>
id='rhsPanelTitle' <HeaderTitle
> id='rhsPanelTitle'
<FormattedMessage >
id='channel_info_rhs.header.title' <FormattedMessage
defaultMessage='Info' id='channel_info_rhs.header.title'
/> defaultMessage='Info'
</HeaderTitle> />
</HeaderTitle>
{channel.display_name && {channel.display_name &&
<span <span
className='style--none sidebar--right__title__subtitle' className='style--none sidebar--right__title__subtitle'
> >
{isArchived && (<Icon className='icon icon-archive-outline'/>)} {isArchived && (<Icon className='icon icon-archive-outline'/>)}
{channel.display_name} {channel.display_name}
</span> </span>
} }
</h2>
</span> </span>
<WithTooltip <WithTooltip

23
webapp/channels/src/components/channel_members_rhs/header.tsx
Просмотреть файл

@@ -39,23 +39,24 @@ const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
/> />
</button> </button>
)} )}
<h2>
<HeaderTitle
id='rhsPanelTitle'
>
<FormattedMessage
id='channel_members_rhs.header.title'
defaultMessage='Members'
/>
</HeaderTitle>
<HeaderTitle {channel.display_name &&
id='rhsPanelTitle'
>
<FormattedMessage
id='channel_members_rhs.header.title'
defaultMessage='Members'
/>
</HeaderTitle>
{channel.display_name &&
<span <span
className='style--none sidebar--right__title__subtitle' className='style--none sidebar--right__title__subtitle'
> >
{channel.display_name} {channel.display_name}
</span> </span>
} }
</h2>
</span> </span>
<WithTooltip <WithTooltip

144
webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
Просмотреть файл

@@ -53,20 +53,22 @@ Object {
<header <header
class="mm-modal-header" class="mm-modal-header"
> >
<h1 <h2
class="mm-modal-header__title" class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel" id="mm-modal-header-channelNotificationModalLabel"
> >
Notification Preferences <span>
</h1> Notification Preferences
<div </span>
class="mm-modal-header__vertical-divider" <span
/> class="mm-modal-header__vertical-divider"
<p />
class="mm-modal-header__subtitle" <span
> class="mm-modal-header__subtitle"
channel_display_name >
</p> channel_display_name
</span>
</h2>
</header> </header>
</h1> </h1>
</div> </div>
@@ -535,20 +537,22 @@ Object {
<header <header
class="mm-modal-header" class="mm-modal-header"
> >
<h1 <h2
class="mm-modal-header__title" class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel" id="mm-modal-header-channelNotificationModalLabel"
> >
Notification Preferences <span>
</h1> Notification Preferences
<div </span>
class="mm-modal-header__vertical-divider" <span
/> class="mm-modal-header__vertical-divider"
<p />
class="mm-modal-header__subtitle" <span
> class="mm-modal-header__subtitle"
channel_display_name >
</p> channel_display_name
</span>
</h2>
</header> </header>
</h1> </h1>
</div> </div>
@@ -1177,20 +1181,22 @@ Object {
<header <header
class="mm-modal-header" class="mm-modal-header"
> >
<h1 <h2
class="mm-modal-header__title" class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel" id="mm-modal-header-channelNotificationModalLabel"
> >
Notification Preferences <span>
</h1> Notification Preferences
<div </span>
class="mm-modal-header__vertical-divider" <span
/> class="mm-modal-header__vertical-divider"
<p />
class="mm-modal-header__subtitle" <span
> class="mm-modal-header__subtitle"
channel_display_name >
</p> channel_display_name
</span>
</h2>
</header> </header>
</h1> </h1>
</div> </div>
@@ -1538,20 +1544,22 @@ Object {
<header <header
class="mm-modal-header" class="mm-modal-header"
> >
<h1 <h2
class="mm-modal-header__title" class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel" id="mm-modal-header-channelNotificationModalLabel"
> >
Notification Preferences <span>
</h1> Notification Preferences
<div </span>
class="mm-modal-header__vertical-divider" <span
/> class="mm-modal-header__vertical-divider"
<p />
class="mm-modal-header__subtitle" <span
> class="mm-modal-header__subtitle"
channel_display_name >
</p> channel_display_name
</span>
</h2>
</header> </header>
</h1> </h1>
</div> </div>
@@ -2118,20 +2126,22 @@ Object {
<header <header
class="mm-modal-header" class="mm-modal-header"
> >
<h1 <h2
class="mm-modal-header__title" class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel" id="mm-modal-header-channelNotificationModalLabel"
> >
Notification Preferences <span>
</h1> Notification Preferences
<div </span>
class="mm-modal-header__vertical-divider" <span
/> class="mm-modal-header__vertical-divider"
<p />
class="mm-modal-header__subtitle" <span
> class="mm-modal-header__subtitle"
channel_display_name >
</p> channel_display_name
</span>
</h2>
</header> </header>
</h1> </h1>
</div> </div>
@@ -2698,20 +2708,22 @@ Object {
<header <header
class="mm-modal-header" class="mm-modal-header"
> >
<h1 <h2
class="mm-modal-header__title" class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel" id="mm-modal-header-channelNotificationModalLabel"
> >
Notification Preferences <span>
</h1> Notification Preferences
<div </span>
class="mm-modal-header__vertical-divider" <span
/> class="mm-modal-header__vertical-divider"
<p />
class="mm-modal-header__subtitle" <span
> class="mm-modal-header__subtitle"
channel_display_name >
</p> channel_display_name
</span>
</h2>
</header> </header>
</h1> </h1>
</div> </div>

7
webapp/channels/src/components/new_search/search_box_suggestions.tsx
Просмотреть файл

@@ -14,7 +14,7 @@ import type {SuggestionProps} from 'components/suggestion/suggestion';
import ErrorBoundary from 'plugins/pluggable/error_boundary'; import ErrorBoundary from 'plugins/pluggable/error_boundary';
const SuggestionsHeader = styled.div` const SuggestionsHeader = styled.h2`
margin-top: 16px; margin-top: 16px;
padding: 8px 24px; padding: 8px 24px;
color: rgba(var(--center-channel-color-rgb), 0.56); color: rgba(var(--center-channel-color-rgb), 0.56);
@@ -22,6 +22,11 @@ const SuggestionsHeader = styled.div`
line-height: 16px; line-height: 16px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0;
&& {
font-family: 'Open Sans', sans-serif;
}
`; `;
const SuggestionsBody = styled.div` const SuggestionsBody = styled.div`

17
webapp/channels/src/components/new_search/search_hint.tsx
Просмотреть файл

@@ -25,6 +25,12 @@ const SearchHintsContainer = styled.div`
margin-right: 8px; margin-right: 8px;
color: var(--center-channel-color-56); color: var(--center-channel-color-56);
} }
h2 {
all: inherit;
display: inline;
margin: 0;
padding: 0;
}
`; `;
const SearchFilter = styled.button` const SearchFilter = styled.button`
@@ -98,10 +104,12 @@ const SearchHints = ({onSelectFilter, searchType, searchTerms, searchTeam, hasSe
return ( return (
<SearchHintsContainer id='searchHints'> <SearchHintsContainer id='searchHints'>
<i className='icon icon-lightbulb-outline'/> <i className='icon icon-lightbulb-outline'/>
<FormattedMessage <h2>
id='search_hint.filter' <FormattedMessage
defaultMessage='Filter your search with:' id='search_hint.filter'
/> defaultMessage='Filter your search with:'
/>
</h2>
{filters.map((filter) => ( {filters.map((filter) => (
<SearchFilter <SearchFilter
key={filter.searchTerm} key={filter.searchTerm}
@@ -117,4 +125,3 @@ const SearchHints = ({onSelectFilter, searchType, searchTerms, searchTeam, hasSe
}; };
export default SearchHints; export default SearchHints;

12
webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
Просмотреть файл

@@ -20,7 +20,11 @@ exports[`components/post_edit_history should display error screen if errors are
class="sidebar--right__title" class="sidebar--right__title"
id="rhsPanelTitle" id="rhsPanelTitle"
> >
Edit History <h2
id="rhsPanelTitle"
>
Edit History
</h2>
<div <div
class="sidebar--right__title__channel" class="sidebar--right__title__channel"
> >
@@ -184,7 +188,11 @@ exports[`components/post_edit_history should match snapshot 1`] = `
class="sidebar--right__title" class="sidebar--right__title"
id="rhsPanelTitle" id="rhsPanelTitle"
> >
Edit History <h2
id="rhsPanelTitle"
>
Edit History
</h2>
<div <div
class="sidebar--right__title__channel" class="sidebar--right__title__channel"
> >

4
webapp/channels/src/components/post_edit_history/post_edit_history.tsx
Просмотреть файл

@@ -150,7 +150,9 @@ const PostEditHistory = ({
renderView={renderView} renderView={renderView}
> >
<SearchResultsHeader> <SearchResultsHeader>
{title} <h2 id='rhsPanelTitle'>
{title}
</h2>
<div className='sidebar--right__title__channel'>{channelDisplayName}</div> <div className='sidebar--right__title__channel'>{channelDisplayName}</div>
</SearchResultsHeader> </SearchResultsHeader>
{hasError ? errorContainer : postEditItems} {hasError ? errorContainer : postEditItems}

12
webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap
Просмотреть файл

@@ -36,11 +36,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
<div <div
className="signup-body-card-content" className="signup-body-card-content"
> >
<p <h2
className="signup-body-card-title" className="signup-body-card-title"
> >
Create your account with one of the following: Create your account with one of the following:
</p> </h2>
<div <div
className="signup-body-card-form-login-options column" className="signup-body-card-form-login-options column"
> >
@@ -106,11 +106,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
<div <div
className="signup-body-card-content" className="signup-body-card-content"
> >
<p <h2
className="signup-body-card-title" className="signup-body-card-title"
> >
Create your account Create your account
</p> </h2>
<form <form
className="signup-body-card-form" className="signup-body-card-form"
> >
@@ -275,11 +275,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
<div <div
className="signup-body-card-content" className="signup-body-card-content"
> >
<p <h2
className="signup-body-card-title" className="signup-body-card-title"
> >
Create your account Create your account
</p> </h2>
<form <form
className="signup-body-card-form" className="signup-body-card-form"
> >

2
webapp/channels/src/components/signup/signup.scss
Просмотреть файл

@@ -142,6 +142,7 @@
box-shadow: none; box-shadow: none;
.signup-body-card-title { .signup-body-card-title {
margin: 0;
color: var(--center-channel-color); color: var(--center-channel-color);
font-family: 'Metropolis'; font-family: 'Metropolis';
font-size: 22px; font-size: 22px;
@@ -187,7 +188,6 @@
@include mixins.button-large; @include mixins.button-large;
width: 100%; width: 100%;
margin-top: 30px;
} }
} }

4
webapp/channels/src/components/signup/signup.tsx
Просмотреть файл

@@ -805,9 +805,9 @@ const Signup = ({onCustomizeHeader}: SignupProps) => {
<div <div
className='signup-body-card-content' className='signup-body-card-content'
> >
<p className='signup-body-card-title'> <h2 className='signup-body-card-title'>
{getCardTitle()} {getCardTitle()}
</p> </h2>
{enableCustomBrand && getMessageSubtitle()} {enableCustomBrand && getMessageSubtitle()}
{alertBanner && ( {alertBanner && (
<AlertBanner <AlertBanner

4
webapp/channels/src/components/suggestion/suggestion_list.tsx
Просмотреть файл

@@ -211,9 +211,9 @@ export default class SuggestionList extends React.PureComponent<Props> {
className='suggestion-list__divider' className='suggestion-list__divider'
role='separator' role='separator'
> >
<span> <h2>
<FormattedMessage id={id}/> <FormattedMessage id={id}/>
</span> </h2>
</li> </li>
); );
} }

4
webapp/channels/src/components/widgets/modals/components/modal_header.scss
Просмотреть файл

@@ -19,9 +19,12 @@
} }
&__vertical-divider { &__vertical-divider {
display: inline-block;
width: 1px; width: 1px;
height: 24px; height: 24px;
margin: 0 8px;
background: rgba(var(--center-channel-color-rgb), 0.16); background: rgba(var(--center-channel-color-rgb), 0.16);
vertical-align: middle;
} }
&__subtitle { &__subtitle {
@@ -35,6 +38,7 @@
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap; white-space: nowrap;
} }

28
webapp/channels/src/components/widgets/modals/components/modal_header.tsx
Просмотреть файл

@@ -16,23 +16,23 @@ function ModalHeader({id, title, subtitle, handleClose}: Props) {
const intl = useIntl(); const intl = useIntl();
return ( return (
<header className='mm-modal-header'> <header className='mm-modal-header'>
<h1 <h2
id={`mm-modal-header-${id}`} id={`mm-modal-header-${id}`}
className='mm-modal-header__title' className='mm-modal-header__title'
> >
{title} <span>{title}</span>
</h1> <span className='mm-modal-header__vertical-divider'/>
<div className='mm-modal-header__vertical-divider'/> <span className='mm-modal-header__subtitle'>{subtitle}</span>
<p className='mm-modal-header__subtitle'>{subtitle}</p> {handleClose && <div className='mm-modal-header__ctr'>
{handleClose && <div className='mm-modal-header__ctr'> <button
<button className='btn btn-icon'
className='btn btn-icon' onClick={handleClose}
onClick={handleClose} aria-label={intl.formatMessage({id: 'modal.header_close', defaultMessage: 'Close'})}
aria-label={intl.formatMessage({id: 'modal.header_close', defaultMessage: 'Close'})} >
> <i className='icon icon-close'/>
<i className='icon icon-close'/> </button>
</button> </div>}
</div>} </h2>
</header> </header>
); );
} }

7
webapp/channels/src/sass/components/_suggestion-list.scss
Просмотреть файл

@@ -152,6 +152,13 @@
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
h2 {
all: inherit;
display: flex;
padding: 0;
margin: 0;
}
&:first-child { &:first-child {
&::before { &::before {
display: none; display: none;