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>
)}
<HeaderTitle
id='rhsPanelTitle'
>
<FormattedMessage
id='channel_info_rhs.header.title'
defaultMessage='Info'
/>
</HeaderTitle>
<h2>
<HeaderTitle
id='rhsPanelTitle'
>
<FormattedMessage
id='channel_info_rhs.header.title'
defaultMessage='Info'
/>
</HeaderTitle>
{channel.display_name &&
<span
className='style--none sidebar--right__title__subtitle'
>
{isArchived && (<Icon className='icon icon-archive-outline'/>)}
{channel.display_name}
</span>
}
{channel.display_name &&
<span
className='style--none sidebar--right__title__subtitle'
>
{isArchived && (<Icon className='icon icon-archive-outline'/>)}
{channel.display_name}
</span>
}
</h2>
</span>
<WithTooltip

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

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

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

@@ -53,20 +53,22 @@ Object {
<header
class="mm-modal-header"
>
<h1
<h2
class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel"
>
Notification Preferences
</h1>
<div
class="mm-modal-header__vertical-divider"
/>
<p
class="mm-modal-header__subtitle"
>
channel_display_name
</p>
<span>
Notification Preferences
</span>
<span
class="mm-modal-header__vertical-divider"
/>
<span
class="mm-modal-header__subtitle"
>
channel_display_name
</span>
</h2>
</header>
</h1>
</div>
@@ -535,20 +537,22 @@ Object {
<header
class="mm-modal-header"
>
<h1
<h2
class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel"
>
Notification Preferences
</h1>
<div
class="mm-modal-header__vertical-divider"
/>
<p
class="mm-modal-header__subtitle"
>
channel_display_name
</p>
<span>
Notification Preferences
</span>
<span
class="mm-modal-header__vertical-divider"
/>
<span
class="mm-modal-header__subtitle"
>
channel_display_name
</span>
</h2>
</header>
</h1>
</div>
@@ -1177,20 +1181,22 @@ Object {
<header
class="mm-modal-header"
>
<h1
<h2
class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel"
>
Notification Preferences
</h1>
<div
class="mm-modal-header__vertical-divider"
/>
<p
class="mm-modal-header__subtitle"
>
channel_display_name
</p>
<span>
Notification Preferences
</span>
<span
class="mm-modal-header__vertical-divider"
/>
<span
class="mm-modal-header__subtitle"
>
channel_display_name
</span>
</h2>
</header>
</h1>
</div>
@@ -1538,20 +1544,22 @@ Object {
<header
class="mm-modal-header"
>
<h1
<h2
class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel"
>
Notification Preferences
</h1>
<div
class="mm-modal-header__vertical-divider"
/>
<p
class="mm-modal-header__subtitle"
>
channel_display_name
</p>
<span>
Notification Preferences
</span>
<span
class="mm-modal-header__vertical-divider"
/>
<span
class="mm-modal-header__subtitle"
>
channel_display_name
</span>
</h2>
</header>
</h1>
</div>
@@ -2118,20 +2126,22 @@ Object {
<header
class="mm-modal-header"
>
<h1
<h2
class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel"
>
Notification Preferences
</h1>
<div
class="mm-modal-header__vertical-divider"
/>
<p
class="mm-modal-header__subtitle"
>
channel_display_name
</p>
<span>
Notification Preferences
</span>
<span
class="mm-modal-header__vertical-divider"
/>
<span
class="mm-modal-header__subtitle"
>
channel_display_name
</span>
</h2>
</header>
</h1>
</div>
@@ -2698,20 +2708,22 @@ Object {
<header
class="mm-modal-header"
>
<h1
<h2
class="mm-modal-header__title"
id="mm-modal-header-channelNotificationModalLabel"
>
Notification Preferences
</h1>
<div
class="mm-modal-header__vertical-divider"
/>
<p
class="mm-modal-header__subtitle"
>
channel_display_name
</p>
<span>
Notification Preferences
</span>
<span
class="mm-modal-header__vertical-divider"
/>
<span
class="mm-modal-header__subtitle"
>
channel_display_name
</span>
</h2>
</header>
</h1>
</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';
const SuggestionsHeader = styled.div`
const SuggestionsHeader = styled.h2`
margin-top: 16px;
padding: 8px 24px;
color: rgba(var(--center-channel-color-rgb), 0.56);
@@ -22,6 +22,11 @@ const SuggestionsHeader = styled.div`
line-height: 16px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0;
&& {
font-family: 'Open Sans', sans-serif;
}
`;
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;
color: var(--center-channel-color-56);
}
h2 {
all: inherit;
display: inline;
margin: 0;
padding: 0;
}
`;
const SearchFilter = styled.button`
@@ -98,10 +104,12 @@ const SearchHints = ({onSelectFilter, searchType, searchTerms, searchTeam, hasSe
return (
<SearchHintsContainer id='searchHints'>
<i className='icon icon-lightbulb-outline'/>
<FormattedMessage
id='search_hint.filter'
defaultMessage='Filter your search with:'
/>
<h2>
<FormattedMessage
id='search_hint.filter'
defaultMessage='Filter your search with:'
/>
</h2>
{filters.map((filter) => (
<SearchFilter
key={filter.searchTerm}
@@ -117,4 +125,3 @@ const SearchHints = ({onSelectFilter, searchType, searchTerms, searchTeam, hasSe
};
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"
id="rhsPanelTitle"
>
Edit History
<h2
id="rhsPanelTitle"
>
Edit History
</h2>
<div
class="sidebar--right__title__channel"
>
@@ -184,7 +188,11 @@ exports[`components/post_edit_history should match snapshot 1`] = `
class="sidebar--right__title"
id="rhsPanelTitle"
>
Edit History
<h2
id="rhsPanelTitle"
>
Edit History
</h2>
<div
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}
>
<SearchResultsHeader>
{title}
<h2 id='rhsPanelTitle'>
{title}
</h2>
<div className='sidebar--right__title__channel'>{channelDisplayName}</div>
</SearchResultsHeader>
{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
className="signup-body-card-content"
>
<p
<h2
className="signup-body-card-title"
>
Create your account with one of the following:
</p>
</h2>
<div
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
className="signup-body-card-content"
>
<p
<h2
className="signup-body-card-title"
>
Create your account
</p>
</h2>
<form
className="signup-body-card-form"
>
@@ -275,11 +275,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
<div
className="signup-body-card-content"
>
<p
<h2
className="signup-body-card-title"
>
Create your account
</p>
</h2>
<form
className="signup-body-card-form"
>

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

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

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

@@ -805,9 +805,9 @@ const Signup = ({onCustomizeHeader}: SignupProps) => {
<div
className='signup-body-card-content'
>
<p className='signup-body-card-title'>
<h2 className='signup-body-card-title'>
{getCardTitle()}
</p>
</h2>
{enableCustomBrand && getMessageSubtitle()}
{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'
role='separator'
>
<span>
<h2>
<FormattedMessage id={id}/>
</span>
</h2>
</li>
);
}

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

@@ -19,9 +19,12 @@
}
&__vertical-divider {
display: inline-block;
width: 1px;
height: 24px;
margin: 0 8px;
background: rgba(var(--center-channel-color-rgb), 0.16);
vertical-align: middle;
}
&__subtitle {
@@ -35,6 +38,7 @@
font-weight: 400;
line-height: 20px;
text-overflow: ellipsis;
vertical-align: middle;
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();
return (
<header className='mm-modal-header'>
<h1
<h2
id={`mm-modal-header-${id}`}
className='mm-modal-header__title'
>
{title}
</h1>
<div className='mm-modal-header__vertical-divider'/>
<p className='mm-modal-header__subtitle'>{subtitle}</p>
{handleClose && <div className='mm-modal-header__ctr'>
<button
className='btn btn-icon'
onClick={handleClose}
aria-label={intl.formatMessage({id: 'modal.header_close', defaultMessage: 'Close'})}
>
<i className='icon icon-close'/>
</button>
</div>}
<span>{title}</span>
<span className='mm-modal-header__vertical-divider'/>
<span className='mm-modal-header__subtitle'>{subtitle}</span>
{handleClose && <div className='mm-modal-header__ctr'>
<button
className='btn btn-icon'
onClick={handleClose}
aria-label={intl.formatMessage({id: 'modal.header_close', defaultMessage: 'Close'})}
>
<i className='icon icon-close'/>
</button>
</div>}
</h2>
</header>
);
}

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

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