Implicity main / h1

This commit is contained in:
mfrachet 2021-09-13 09:14:43 +02:00
parent 62c269ba2b
commit 83fdbdebf1
52 changed files with 95 additions and 195 deletions

View File

@ -26,12 +26,10 @@ const App = () => {
const { pathname } = useLocation();
const { formatMessage } = useIntl();
// Check with @mfrachet if ok with a11y
if (status === 'loading') {
return (
<Main labelledBy="title" aria-busy="true">
<Main aria-busy="true">
<HeaderLayout
id="title"
title={formatMessage({
id: getTrad('header.name'),
defaultMessage: 'Content',

View File

@ -13,9 +13,8 @@ const NoContentType = () => {
useFocusWhenNavigate();
return (
<Main labelledBy="title">
<Main>
<HeaderLayout
id="title"
title={formatMessage({
id: getTrad('header.name'),
defaultMessage: 'Content',

View File

@ -257,7 +257,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
}
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -278,7 +278,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
>
<h1
class="c4"
id="title"
id="main-content-title"
>
Content
</h1>

View File

@ -10,9 +10,8 @@ const NoPermissions = () => {
useFocusWhenNavigate();
return (
<Main labelledBy="title">
<Main>
<HeaderLayout
id="title"
title={formatMessage({
id: getTrad('header.name'),
defaultMessage: 'Content',

View File

@ -138,7 +138,7 @@ describe('<NoPermissions />', () => {
}
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -159,7 +159,7 @@ describe('<NoPermissions />', () => {
>
<h1
class="c4"
id="title"
id="main-content-title"
>
Content
</h1>

View File

@ -15,7 +15,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
return (
<UnauthenticatedLayout>
<Main labelledBy="password-forgotten">
<Main>
<LayoutContent>
<Formik
enableReinitialize
@ -31,7 +31,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
<Column>
<Logo />
<Box paddingTop={6} paddingBottom={7}>
<H1 id="password-forgotten">
<H1>
{formatMessage({
id: 'Auth.form.button.password-forgotten',
defaultMessage: 'Password forgotten',

View File

@ -12,12 +12,12 @@ const ForgotPasswordSuccess = () => {
return (
<UnauthenticatedLayout>
<Main labelledBy="email-sent">
<Main>
<LayoutContent>
<Column>
<Logo />
<Box paddingTop={6} paddingBottom={7}>
<H1 id="email-sent">
<H1>
{formatMessage({
id: 'app.containers.AuthPage.ForgotPasswordSuccess.title',
defaultMessage: 'Email sent',

View File

@ -26,7 +26,7 @@ const Login = ({ onSubmit, schema, children }) => {
const { formatMessage } = useIntl();
return (
<Main labelledBy="welcome">
<Main>
<LayoutContent>
<Formik
enableReinitialize
@ -44,7 +44,7 @@ const Login = ({ onSubmit, schema, children }) => {
<Column>
<Logo />
<Box paddingTop={6} paddingBottom={1}>
<H1 id="welcome">
<H1>
{formatMessage({
id: 'Auth.form.welcome.title',
defaultMessage: 'Welcome back!',

View File

@ -370,6 +370,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
.c19 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
color: #32324d;
@ -405,12 +406,9 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
color: inherit;
}
.c19:focus {
outline: none;
}
.c20 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 0;
color: #32324d;
@ -446,19 +444,10 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
color: inherit;
}
.c20:focus {
outline: none;
}
.c18 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}
.c18:focus-within {
border: 1px solid #4945ff;
}
.c25 {
@ -547,7 +536,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
}
<main
aria-labelledby="welcome"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -572,7 +561,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
>
<h1
class="c8"
id="welcome"
id="main-content-title"
>
Welcome back!
</h1>

View File

@ -21,12 +21,12 @@ const Oops = () => {
return (
<UnauthenticatedLayout>
<Main labelledBy="email-sent">
<Main>
<LayoutContent>
<Column>
<Logo />
<Box paddingTop={6} paddingBottom={7}>
<H1 id="email-sent">
<H1>
{formatMessage({ id: 'Auth.components.Oops.title', defaultMessage: 'Oops...' })}
</H1>
</Box>

View File

@ -251,7 +251,7 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
class="c6"
>
<main
aria-labelledby="email-sent"
aria-labelledby="main-content-title"
class="c7"
id="main-content"
tabindex="-1"
@ -272,7 +272,7 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
>
<h1
class="c14"
id="email-sent"
id="main-content-title"
>
Oops...
</h1>

View File

@ -106,11 +106,11 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
>
{({ values, errors, handleChange }) => (
<Form noValidate>
<Main labelledBy="welcome">
<Main>
<Column>
<Logo />
<Box paddingTop={6} paddingBottom={1}>
<H1 id="welcome">
<H1>
{formatMessage({
id: 'Auth.form.welcome.title',
defaultMessage: 'Welcome back!',

View File

@ -376,6 +376,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
.c29 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
color: #32324d;
@ -411,12 +412,9 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
color: inherit;
}
.c29:focus {
outline: none;
}
.c30 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 0;
color: #32324d;
@ -452,19 +450,10 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
color: inherit;
}
.c30:focus {
outline: none;
}
.c28 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}
.c28:focus-within {
border: 1px solid #4945ff;
}
.c35 {
@ -635,7 +624,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
novalidate=""
>
<main
aria-labelledby="welcome"
aria-labelledby="main-content-title"
class="c11"
id="main-content"
tabindex="-1"
@ -653,7 +642,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
>
<h1
class="c16"
id="welcome"
id="main-content-title"
>
Welcome back!
</h1>

View File

@ -19,7 +19,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
return (
<UnauthenticatedLayout>
<Main labelledBy="password-forgotten">
<Main>
<LayoutContent>
<Formik
enableReinitialize
@ -36,7 +36,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
<Column>
<Logo />
<Box paddingTop={6} paddingBottom={7}>
<H1 id="password-forgotten">
<H1>
{formatMessage({
id: 'Auth.reset-password.title',
defaultMessage: 'Reset password',

View File

@ -319,6 +319,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
.c23 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 0;
color: #32324d;
@ -354,19 +355,10 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
color: inherit;
}
.c23:focus {
outline: none;
}
.c22 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}
.c22:focus-within {
border: 1px solid #4945ff;
}
.c18 textarea {
@ -506,7 +498,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
class="c0 c8"
>
<main
aria-labelledby="password-forgotten"
aria-labelledby="main-content-title"
class="c9"
id="main-content"
tabindex="-1"
@ -531,7 +523,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
>
<h1
class="c16"
id="password-forgotten"
id="main-content-title"
>
Reset password
</h1>

View File

@ -17,14 +17,14 @@ const StackCustom = styled(Stack)`
align-items: flex-start;
`;
const HomeHeader = ({ hasCreatedContentType, id, onCreateCT }) => {
const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
const { formatMessage } = useIntl();
return (
<div>
<Box paddingLeft={6} paddingBottom={10}>
<StackCustom size={5}>
<H1 id={id}>
<H1>
{hasCreatedContentType
? formatMessage({
id: 'app.components.HomePage.welcome.again',
@ -71,13 +71,11 @@ const HomeHeader = ({ hasCreatedContentType, id, onCreateCT }) => {
HomeHeader.defaultProps = {
hasCreatedContentType: undefined,
id: undefined,
onCreateCT: undefined,
};
HomeHeader.propTypes = {
hasCreatedContentType: PropTypes.bool,
id: PropTypes.string,
onCreateCT: PropTypes.func,
};

View File

@ -58,7 +58,7 @@ const HomePage = () => {
<FormattedMessage id="HomePage.helmet.title" defaultMessage="Homepage">
{title => <Helmet title={title[0]} />}
</FormattedMessage>
<Main labelledBy="homepage">
<Main>
<LogoContainer>
<img alt="" aria-hidden src={Logo} />
</LogoContainer>
@ -67,7 +67,6 @@ const HomePage = () => {
<GridItem col={8} s={12}>
<HomeHeader
onCreateCT={handleClick}
id="homepage"
hasCreatedContentType={hasAlreadyCreatedContentTypes}
/>
</GridItem>

View File

@ -619,7 +619,7 @@ describe('Homepage', () => {
class="c1 c2"
>
<main
aria-labelledby="homepage"
aria-labelledby="main-content-title"
class="c3"
id="main-content"
tabindex="-1"
@ -628,7 +628,8 @@ describe('Homepage', () => {
class="c4"
>
<img
alt="Strapi logo"
alt=""
aria-hidden="true"
src="IMAGE_MOCK"
/>
</div>
@ -653,7 +654,7 @@ describe('Homepage', () => {
>
<h1
class="c11"
id="homepage"
id="main-content-title"
>
Welcome on board!
</h1>

View File

@ -23,10 +23,8 @@ const ApplicationInfosPage = () => {
return (
<Layout>
<SettingsPageTitle name="Application" />
<Main labelledBy="application">
<Main>
<HeaderLayout
as="h1"
id="application"
title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Application' })}
subtitle={formatMessage({
id: 'Settings.application.description',

View File

@ -258,7 +258,7 @@ describe('Application page', () => {
class="c1 c2"
>
<main
aria-labelledby="application"
aria-labelledby="main-content-title"
class="c3"
id="main-content"
tabindex="-1"
@ -279,7 +279,7 @@ describe('Application page', () => {
>
<h1
class="c7"
id="application"
id="main-content-title"
>
Application
</h1>

View File

@ -86,7 +86,7 @@ const EditPage = () => {
const isFormDisabled = role.code === 'strapi-super-admin';
return (
<Main labelledBy="title">
<Main>
<SettingsPageTitle name="Roles" />
<Formik
enableReinitialize
@ -102,7 +102,6 @@ const EditPage = () => {
<form onSubmit={handleSubmit}>
<>
<HeaderLayout
id="title"
primaryAction={
<Stack horizontal size={2}>
<Button
@ -138,7 +137,6 @@ const EditPage = () => {
id: 'Settings.roles.create.description',
defaultMessage: 'Define the rights given to the role',
})}
as="h1"
/>
<ContentLayout>
<Stack size={6}>

View File

@ -348,6 +348,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
.c26 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
color: #32324d;
@ -383,19 +384,10 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
color: inherit;
}
.c26:focus {
outline: none;
}
.c25 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}
.c25:focus-within {
border: 1px solid #4945ff;
}
.c23 textarea {
@ -430,11 +422,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
font-size: 0.875rem;
color: #32324d;
background: #ffffff;
outline: none;
}
.c28:focus {
border: 1px solid #4945ff;
}
.c28::-webkit-input-placeholder {
@ -558,7 +545,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
<div>
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -579,7 +566,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
>
<h1
class="c5"
id="title"
id="main-content-title"
>
Edit a role
</h1>

View File

@ -101,10 +101,9 @@ const RoleListPage = () => {
// ! TODO - Add the search input
return (
<Main labelledBy="title">
<Main>
<SettingsPageTitle name="Roles" />
<HeaderLayout
id="title"
primaryAction={
<Button onClick={handleToggleModalForCreatingRole} startIcon={<AddIcon />}>
{formatMessage({

View File

@ -401,7 +401,7 @@ describe('<ListPage />', () => {
}
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -422,7 +422,7 @@ describe('<ListPage />', () => {
>
<h1
class="c5"
id="title"
id="main-content-title"
>
roles
</h1>

View File

@ -130,10 +130,9 @@ const EditPage = ({ canUpdate }) => {
if (isLoading) {
return (
<Main labelledBy="title" aria-busy="true">
<Main aria-busy="true">
<SettingsPageTitle name="Users" />
<HeaderLayout
id="title"
primaryAction={
<Button disabled startIcon={<CheckIcon />} type="button">
{formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
@ -149,7 +148,7 @@ const EditPage = ({ canUpdate }) => {
}
return (
<Main labelledBy="title">
<Main>
<SettingsPageTitle name="Users" />
<Formik
onSubmit={handleSubmit}
@ -161,7 +160,6 @@ const EditPage = ({ canUpdate }) => {
return (
<Form>
<HeaderLayout
id="title"
primaryAction={
<Button
disabled={isSubmitting || !canUpdate}

View File

@ -85,10 +85,9 @@ const ListPage = () => {
);
return (
<Main labelledBy="title" aria-busy={isLoading}>
<Main aria-busy={isLoading}>
<SettingsPageTitle name="Users" />
<HeaderLayout
id="title"
primaryAction={createAction}
title={formatMessage({
id: 'Settings.permissions.users.listview.header.title',

View File

@ -790,7 +790,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
<main
aria-busy="true"
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -811,7 +811,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
>
<h1
class="c5"
id="title"
id="main-content-title"
>
Users
</h1>

View File

@ -50,7 +50,6 @@ const WebhookForm = ({
{({ handleSubmit, errors, handleReset }) => (
<Form noValidate>
<HeaderLayout
id="title"
primaryAction={
<Stack horizontal size={2}>
<Button
@ -94,7 +93,6 @@ const WebhookForm = ({
})}
</Link>
}
as="h1"
/>
<ContentLayout>
<Stack size={4}>

View File

@ -162,7 +162,7 @@ const EditView = () => {
}
return (
<Main labelledBy="title">
<Main>
<SettingsPageTitle name="Webhooks" />
<WebhookForm
{...{

View File

@ -240,11 +240,9 @@ const ListView = () => {
return (
<Layout>
<SettingsPageTitle name="Webhooks" />
<Main labelledBy="webhooks" aria-busy={isLoading || loadingWebhooks}>
<Main aria-busy={isLoading || loadingWebhooks}>
<>
<HeaderLayout
as="h1"
id="webhooks"
title={formatMessage({ id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' })}
subtitle={formatMessage({
id: 'Settings.webhooks.list.description',

View File

@ -184,7 +184,7 @@ describe('Admin | containers | ListView', () => {
>
<main
aria-busy="true"
aria-labelledby="webhooks"
aria-labelledby="main-content-title"
class="c3"
id="main-content"
tabindex="-1"
@ -205,7 +205,7 @@ describe('Admin | containers | ListView', () => {
>
<h1
class="c7"
id="webhooks"
id="main-content-title"
>
Webhooks
</h1>

View File

@ -45,12 +45,12 @@ const Providers = () => {
return (
<UnauthenticatedLayout>
<Main labelledBy="welcome">
<Main>
<LayoutContent>
<Column>
<Logo />
<Box paddingTop={6} paddingBottom={1}>
<H1 id="welcome">{formatMessage({ id: 'Auth.form.welcome.title' })}</H1>
<H1>{formatMessage({ id: 'Auth.form.welcome.title' })}</H1>
</Box>
<Box paddingBottom={7}>
<Subtitle textColor="neutral600">

View File

@ -67,7 +67,7 @@ export const SingleSignOn = () => {
const isHeaderButtonDisabled = isEqual(initialData, modifiedData);
return (
<Main labelledBy="title" tabIndex={-1}>
<Main tabIndex={-1}>
<SettingsPageTitle name="SSO" />
<form
onSubmit={e => {
@ -80,7 +80,6 @@ export const SingleSignOn = () => {
}}
>
<HeaderLayout
id="title"
primaryAction={
<Button
data-testid="save-button"

View File

@ -254,7 +254,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
}
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -276,7 +276,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
>
<h1
class="c5"
id="title"
id="main-content-title"
>
Single Sign-On
</h1>

View File

@ -118,7 +118,7 @@ const CreatePage = () => {
})} ${moment().format('LL')}`;
return (
<Main labelledBy="title">
<Main>
<SettingsPageTitle name="Roles" />
<Formik
initialValues={{ name: '', description: defaultDescription }}
@ -130,7 +130,6 @@ const CreatePage = () => {
<Form noValidate>
<>
<HeaderLayout
id="title"
primaryAction={
<Stack horizontal size={2}>
<Button
@ -161,7 +160,6 @@ const CreatePage = () => {
id: 'Settings.roles.create.description',
defaultMessage: 'Define the rights given to the role',
})}
as="h1"
/>
<ContentLayout>
<Stack size={6}>

View File

@ -348,6 +348,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
.c26 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
color: #32324d;
@ -383,19 +384,10 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
color: inherit;
}
.c26:focus {
outline: none;
}
.c25 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}
.c25:focus-within {
border: 1px solid #4945ff;
}
.c23 textarea {
@ -430,11 +422,6 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
font-size: 0.875rem;
color: #32324d;
background: #ffffff;
outline: none;
}
.c28:focus {
border: 1px solid #4945ff;
}
.c28::-webkit-input-placeholder {
@ -558,7 +545,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
<div>
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -582,7 +569,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
>
<h1
class="c5"
id="title"
id="main-content-title"
>
Create a role
</h1>

View File

@ -249,10 +249,9 @@ const RoleListPage = () => {
}
return (
<Main labelledBy="title">
<Main>
<SettingsPageTitle name="Roles" />
<HeaderLayout
id="title"
primaryAction={
canCreate ? (
<Button onClick={handleNewRoleClick} startIcon={<AddIcon />}>

View File

@ -40,8 +40,8 @@
"@fortawesome/react-fontawesome": "^0.1.14",
"@strapi/babel-plugin-switch-ee-ce": "1.0.0",
"@strapi/helper-plugin": "3.6.8",
"@strapi/icons": "0.0.1-alpha.26",
"@strapi/parts": "0.0.1-alpha.26",
"@strapi/icons": "0.0.1-alpha.27",
"@strapi/parts": "0.0.1-alpha.27",
"@strapi/utils": "3.6.8",
"axios": "^0.21.1",
"babel-loader": "8.2.2",

View File

@ -257,7 +257,6 @@ const ListView = () => {
})}
</Link>
}
as="h1"
/>
<ContentLayout>
<Stack size={4}>

View File

@ -35,9 +35,8 @@ import { LoadingIndicatorPage, NoContent, NoPermissions } from '@strapi/helper-p
return (
<Box background="neutral100">
<Layout>
<Main labelledBy="title" aria-busy={isLoading}>
<Main aria-busy={isLoading}>
<HeaderLayout
id="title"
primaryAction={<Button startIcon={<AddIcon />}>Add an entry</Button>}
secondaryAction={
<Button variant="tertiary" startIcon={<EditIcon />}>

View File

@ -57,8 +57,8 @@
"@storybook/builder-webpack5": "^6.3.7",
"@storybook/manager-webpack5": "^6.3.7",
"@storybook/react": "^6.3.7",
"@strapi/icons": "0.0.1-alpha.26",
"@strapi/parts": "0.0.1-alpha.26",
"@strapi/icons": "0.0.1-alpha.27",
"@strapi/parts": "0.0.1-alpha.27",
"babel-loader": "^8.2.2",
"cross-env": "^7.0.3",
"enzyme": "^3.8.0",

View File

@ -118,7 +118,7 @@ export const SettingsPage = () => {
};
return (
<Main labelledBy="title" tabIndex={-1}>
<Main tabIndex={-1}>
<Helmet
title={formatMessage({
id: getTrad('page.title'),
@ -127,7 +127,6 @@ export const SettingsPage = () => {
/>
<form onSubmit={handleSubmit}>
<HeaderLayout
id="title"
title={formatMessage({
id: getTrad('settings.header.label'),
defaultMessage: 'Media Library - Settings',

View File

@ -220,7 +220,7 @@ exports[`Upload | SettingsPage renders and matches the snapshot 1`] = `
<div>
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -242,7 +242,7 @@ exports[`Upload | SettingsPage renders and matches the snapshot 1`] = `
>
<h1
class="c5"
id="title"
id="main-content-title"
>
Media Library - Settings
</h1>

View File

@ -29,9 +29,8 @@ const LocaleList = ({ canUpdateLocale, canDeleteLocale, onToggleCreateModal, isC
const handleEditLocale = canUpdateLocale ? setLocaleToEdit : undefined;
return (
<Main labelledBy="title" tabIndex={-1}>
<Main tabIndex={-1}>
<HeaderLayout
id="title"
primaryAction={
<Button startIcon={<AddIcon />} onClick={onToggleCreateModal}>
{formatMessage({ id: getTrad('Settings.list.actions.add') })}

View File

@ -77,6 +77,7 @@ describe('<Input />', () => {
.c6 {
border: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
color: #32324d;
@ -112,19 +113,10 @@ describe('<Input />', () => {
color: inherit;
}
.c6:focus {
outline: none;
}
.c5 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}
.c5:focus-within {
border: 1px solid #4945ff;
}
.c1 {

View File

@ -136,15 +136,8 @@ export const ProvidersPage = () => {
return (
<Layout>
<SettingsPageTitle name={pageTitle} />
<Main
labelledBy={formatMessage({
id: getTrad('HeaderNav.link.providers'),
defaultMessage: 'Providers',
})}
>
<Main>
<HeaderLayout
as="h1"
id="providers"
title={formatMessage({
id: getTrad('HeaderNav.link.providers'),
defaultMessage: 'Providers',

View File

@ -177,7 +177,7 @@ describe('Admin | containers | ProvidersPage', () => {
class="c1 c2"
>
<main
aria-labelledby="Providers"
aria-labelledby="main-content-title"
class="c3"
id="main-content"
tabindex="-1"
@ -198,7 +198,7 @@ describe('Admin | containers | ProvidersPage', () => {
>
<h1
class="c7"
id="providers"
id="main-content-title"
>
Providers
</h1>

View File

@ -62,7 +62,7 @@ const EditPage = () => {
};
return (
<Main labelledBy="title">
<Main>
<SettingsPageTitle name="Roles" />
<Formik
enableReinitialize
@ -73,7 +73,6 @@ const EditPage = () => {
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<HeaderLayout
id="title"
primaryAction={
!isLoading && (
<Button

View File

@ -116,7 +116,7 @@ it('renders users-permissions edit role and matches snapshot', () => {
}
<main
aria-labelledby="title"
aria-labelledby="main-content-title"
class="c0"
id="main-content"
tabindex="-1"
@ -137,7 +137,7 @@ it('renders users-permissions edit role and matches snapshot', () => {
>
<h1
class="c4"
id="title"
id="main-content-title"
>
Authenticated
</h1>

View File

@ -85,10 +85,8 @@ const RoleListPage = () => {
return (
<Layout>
<SettingsPageTitle name={pageTitle} />
<Main aria-busy={isLoading} labelledBy="roles">
<Main aria-busy={isLoading}>
<HeaderLayout
as="h1"
id="roles"
title={formatMessage({
id: 'Settings.roles.title',
defaultMessage: 'Roles',

View File

@ -188,7 +188,7 @@ describe('Admin | containers | RoleListPage', () => {
>
<main
aria-busy="true"
aria-labelledby="roles"
aria-labelledby="main-content-title"
class="c3"
id="main-content"
tabindex="-1"
@ -209,7 +209,7 @@ describe('Admin | containers | RoleListPage', () => {
>
<h1
class="c7"
id="roles"
id="main-content-title"
>
Roles
</h1>

View File

@ -4910,15 +4910,15 @@
resolve-from "^5.0.0"
store2 "^2.12.0"
"@strapi/icons@0.0.1-alpha.26":
version "0.0.1-alpha.26"
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.26.tgz#652833c431b0eaf019d631e32f4dccc68ab87afb"
integrity sha512-wveXSxcgoPuQNMaiTeOYeLvSoirq/7MwV6v+Xwod7WPvzvjK82H/O8kg2sTPGhTCtya952krAm/9DcEs3LfFUQ==
"@strapi/icons@0.0.1-alpha.27":
version "0.0.1-alpha.27"
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.27.tgz#1ebfb63ac159053fd699e395baf0fbbecce00601"
integrity sha512-CICUMgGseazuKxbu7OBuLvxuFk0dKno3BFpu0og1mx+MMX354L8UnsVMHubk8t+us8eU2R9zAU0YKj3hjV/hqA==
"@strapi/parts@0.0.1-alpha.26":
version "0.0.1-alpha.26"
resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.26.tgz#44732b90026c56e48fb53c5768ad0aac7932caa0"
integrity sha512-36IgzV/jTygrTVjlkHkcMIQCmZUtyY2D3EuK+XlApQEjJIfj0XwB0Q1Of6OMbTnUVVwKrWwpB/9Qzqv4yiw9AQ==
"@strapi/parts@0.0.1-alpha.27":
version "0.0.1-alpha.27"
resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.27.tgz#ff8602cdc30b0db7033003cdcacbe3fb14bba3d2"
integrity sha512-1dk2sEhYyZaKeYCH1nUK810mHOibI41+MXmN7fxyu+jklU7OYXtMAWqjKXGiJ4QDCIgA3gZ+Xgqnt+UjwN/M8g==
dependencies:
"@internationalized/number" "^3.0.2"
compute-scroll-into-view "^1.0.17"