yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-25 22:23:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix divider stack issue, add meaningfull aria-labels to checkboxes w/o labels

Browse Source
This commit is contained in:
bulby97 2021-08-26 10:28:52 +02:00
parent 1188d8023e
commit 4d89016e9c
10 changed files with 144 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/core/admin/admin/src/components/Roles/ConditionsModal/ActionRow/index.js
View File

@ -4,7 +4,7 @@ import { Row, TableLabel } from '@strapi/parts';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import ConditionsSelect from '../ConditionsSelect';
// import ConditionsSelect from '../ConditionsSelect';
import { rowHeight } from '../../Permissions/utils/constants';
const RowWrapper = styled(Row)`
@ -12,14 +12,14 @@ const RowWrapper = styled(Row)`
`;
const ActionRow = ({
arrayOfOptionsGroupedByCategory,
isFormDisabled,
// arrayOfOptionsGroupedByCategory,
// isFormDisabled,
isGrey,
label,
name,
onCategoryChange,
onChange,
value,
// name,
// onCategoryChange,
// onChange,
// value,
}) => {
const { formatMessage } = useIntl();
@ -56,26 +56,26 @@ const ActionRow = ({
})}
</TableLabel>
</Row>
<ConditionsSelect
{/* <ConditionsSelect
arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
name={name}
isFormDisabled={isFormDisabled}
onCategoryChange={onCategoryChange}
onChange={onChange}
value={value}
/>
/> */}
</RowWrapper>
);
};
ActionRow.propTypes = {
arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired,
isFormDisabled: PropTypes.bool.isRequired,
// arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired,
// isFormDisabled: PropTypes.bool.isRequired,
isGrey: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.object.isRequired,
onCategoryChange: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
// name: PropTypes.string.isRequired,
// value: PropTypes.object.isRequired,
// onCategoryChange: PropTypes.func.isRequired,
// onChange: PropTypes.func.isRequired,
};
export default ActionRow;

5
packages/core/admin/admin/src/components/Roles/ConditionsModal/index.js
View File

@ -115,8 +115,9 @@ const ConditionsModal = ({
defaultMessage: 'Define conditions',
})}
</H2>
{/* ! Need to force margin here - Remove this when Divider is updated in parts */}
<Divider style={{ marginTop: `${24 / 16}rem` }} />
<Box>
<Divider />
</Box>
<Box>
{actionsToDisplay.length === 0 && (
<Text>

15
packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js
View File

@ -1,9 +1,10 @@
import { Box, Checkbox, Text, Row } from '@strapi/parts';
import { Up, Down } from '@strapi/icons';
import { Down, Up } from '@strapi/icons';
import { Box, Checkbox, Row, Text } from '@strapi/parts';
import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/Collapse/utils/constants';
import { get, omit } from 'lodash';
import PropTypes from 'prop-types';
import React, { useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { usePermissionsDataManager } from '../../../../hooks';
import ConditionsButton from '../../ConditionsButton';
@ -86,6 +87,7 @@ const Collapse = ({
pathToData,
}) => {
const [isModalOpen, setModalOpen] = useState(false);
const { formatMessage } = useIntl();
const {
modifiedData,
onChangeParentCheckbox,
@ -152,6 +154,7 @@ const Collapse = ({
isDisplayed,
isParentCheckbox,
checkboxName,
label: permissionLabel,
}) => {
if (!isDisplayed) {
return <HiddenAction key={actionId} />;
@ -164,7 +167,13 @@ const Collapse = ({
<Checkbox
disabled={isFormDisabled || IS_DISABLED}
name={checkboxName}
aria-label={checkboxName}
aria-label={formatMessage(
{
id: `Settings.permissions.select-by-permission`,
defaultMessage: 'Select {label} permission',
},
{ label: `${permissionLabel} ${label}` }
)}
// Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
onValueChange={value =>
onChangeParentCheckbox({

17
packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
View File

@ -2,6 +2,7 @@ import { Checkbox, Row } from '@strapi/parts';
import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import React, { memo, useCallback, useMemo, useState } from 'react';
import styled from 'styled-components';
import { usePermissionsDataManager } from '../../../../../hooks';
@ -49,6 +50,7 @@ const ActionRow = ({
propertyName,
isOdd,
}) => {
const { formatMessage } = useIntl();
const [rowToOpen, setRowToOpen] = useState(null);
const {
modifiedData,
@ -133,7 +135,13 @@ const ActionRow = ({
<Checkbox
disabled={isFormDisabled || IS_DISABLED}
name={checkboxName.join('..')}
aria-label={checkboxName.join('..')}
aria-label={formatMessage(
{
id: `Settings.permissions.select-by-permission`,
defaultMessage: 'Select {label} permission',
},
{ label: `${name} ${label}` }
)}
// Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
onValueChange={value =>
onChangeSimpleCheckbox({
@ -165,6 +173,13 @@ const ActionRow = ({
value,
},
})}
aria-label={formatMessage(
{
id: `Settings.permissions.select-by-permission`,
defaultMessage: 'Select {label} permission',
},
{ label: `${name} ${label}` }
)}
value={hasAllActionsSelected}
indeterminate={hasSomeActionsSelected}
/>

128
packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
View File

@ -1,18 +1,19 @@
import React, { memo, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { get, upperFirst } from 'lodash';
import styled from 'styled-components';
import { Box, Row, Text, Checkbox } from '@strapi/parts';
import { Box, Checkbox, Row, Text } from '@strapi/parts';
import IS_DISABLED from 'ee_else_ce/components/Roles/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants';
import { get, upperFirst } from 'lodash';
import PropTypes from 'prop-types';
import React, { memo, useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { usePermissionsDataManager } from '../../../../../hooks';
import { getCheckboxState } from '../../../utils';
import CollapseLabel from '../../../CollapseLabel';
import Curve from '../../../Curve';
import HiddenAction from '../../../HiddenAction';
import RequiredSign from '../../../RequiredSign';
import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
import CarretIcon from '../CarretIcon';
import RequiredSign from '../../../RequiredSign';
import { getCheckboxState } from '../../../utils';
import { activeStyle } from '../../utils';
import CarretIcon from '../CarretIcon';
const Cell = styled(Row)`
width: ${cellWidth};
@ -75,6 +76,7 @@ const SubActionRow = ({
parentName,
propertyName,
}) => {
const { formatMessage } = useIntl();
const {
modifiedData,
onChangeParentCheckbox,
@ -133,71 +135,85 @@ const SubActionRow = ({
</CollapseLabel>
</RowStyle>
<Row style={{ flex: 1 }}>
{propertyActions.map(({ actionId, label, isActionRelatedToCurrentProperty }) => {
if (!isActionRelatedToCurrentProperty) {
return <HiddenAction key={actionId} />;
}
/*
* Usually we use a 'dot' in order to know the key path of an object for which we want to change the value.
* Since an action and a subject are both separated by '.' or '::' we chose to use the '..' separators
*/
const checkboxName = [
...pathToDataFromActionRow.split('..'),
actionId,
'properties',
propertyName,
...parentName.split('..'),
value,
];
{propertyActions.map(
({ actionId, label: propertyLabel, isActionRelatedToCurrentProperty }) => {
if (!isActionRelatedToCurrentProperty) {
return <HiddenAction key={actionId} />;
}
/*
* Usually we use a 'dot' in order to know the key path of an object for which we want to change the value.
* Since an action and a subject are both separated by '.' or '::' we chose to use the '..' separators
*/
const checkboxName = [
...pathToDataFromActionRow.split('..'),
actionId,
'properties',
propertyName,
...parentName.split('..'),
value,
];
const checkboxValue = get(modifiedData, checkboxName, false);
const checkboxValue = get(modifiedData, checkboxName, false);
if (!subChildrenForm) {
return (
<Cell key={propertyLabel} justifyContent="center" alignItems="center">
<Checkbox
disabled={isFormDisabled || IS_DISABLED}
name={checkboxName.join('..')}
aria-label={formatMessage(
{
id: `Settings.permissions.select-by-permission`,
defaultMessage: 'Select {label} permission',
},
{ label: `${parentName} ${label} ${propertyLabel}` }
)}
// Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
onValueChange={value =>
onChangeSimpleCheckbox({
target: {
name: checkboxName.join('..'),
value,
},
})}
value={checkboxValue}
/>
</Cell>
);
}
const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(
checkboxValue
);
if (!subChildrenForm) {
return (
<Cell key={label} justifyContent="center" alignItems="center">
<Cell key={propertyLabel} justifyContent="center" alignItems="center">
<Checkbox
key={propertyLabel}
disabled={isFormDisabled || IS_DISABLED}
name={checkboxName.join('..')}
aria-label={checkboxName.join('..')}
aria-label={formatMessage(
{
id: `Settings.permissions.select-by-permission`,
defaultMessage: 'Select {label} permission',
},
{ label: `${parentName} ${label} ${propertyLabel}` }
)}
// Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
onValueChange={value =>
onChangeSimpleCheckbox({
onChangeParentCheckbox({
target: {
name: checkboxName.join('..'),
value,
},
})}
value={checkboxValue}
value={hasAllActionsSelected}
indeterminate={hasSomeActionsSelected}
/>
</Cell>
);
}
const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(
checkboxValue
);
return (
<Cell key={label} justifyContent="center" alignItems="center">
<Checkbox
key={label}
disabled={isFormDisabled || IS_DISABLED}
name={checkboxName.join('..')}
aria-label={checkboxName.join('..')}
// Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
onValueChange={value =>
onChangeParentCheckbox({
target: {
name: checkboxName.join('..'),
value,
},
})}
value={hasAllActionsSelected}
indeterminate={hasSomeActionsSelected}
/>
</Cell>
);
})}
)}
</Row>
</Row>
</RowWrapper>

4
packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/index.js
View File

@ -35,13 +35,13 @@ const ContentTypeCollapse = ({
pathToData={pathToData}
/>
{isActive &&
properties.map(({ label, value, children: childrenForm }, i) => {
properties.map(({ label: propertyLabel, value, children: childrenForm }, i) => {
return (
<CollapsePropertyMatrix
availableActions={availableActions}
childrenForm={childrenForm}
isFormDisabled={isFormDisabled}
label={label}
label={propertyLabel}
pathToData={pathToData}
propertyName={value}
key={value}

13
packages/core/admin/admin/src/components/Roles/GlobalActions/index.js
View File

@ -46,7 +46,18 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
}}
name={actionId}
aria-label={actionId}
aria-label={formatMessage(
{
id: `Settings.permissions.select-all-by-permission`,
defaultMessage: 'Select all {label} permissions',
},
{
label: formatMessage({
id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
defaultMessage: label,
}),
}
)}
value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)}
indeterminate={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)}
/>

1
packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js
View File

@ -78,7 +78,6 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
<Box paddingLeft={4}>
<Checkbox
name={pathToData.join('..')}
aria-label={pathToData.join('..')}
disabled={isFormDisabled || IS_DISABLED}
// Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
onValueChange={value =>

11
packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js
View File

@ -3,6 +3,7 @@ import upperFirst from 'lodash/upperFirst';
import PropTypes from 'prop-types';
import React, { memo } from 'react';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import CollapseLabel from '../CollapseLabel';
import { firstRowWidth } from '../Permissions/utils/constants';
@ -25,11 +26,19 @@ const RowLabelWithCheckbox = ({
someChecked,
value,
}) => {
const { formatMessage } = useIntl();
return (
<Row alignItems="center" paddingLeft={6} style={{ width: firstRowWidth, flexShrink: 0 }}>
<Checkbox
name={checkboxName}
aria-label={checkboxName}
aria-label={formatMessage(
{
id: `Settings.permissions.select-all-by-permission`,
defaultMessage: 'Select all {label} permissions',
},
{ label }
)}
disabled={isFormDisabled}
// Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
onValueChange={value =>

2
packages/core/admin/admin/src/translations/en.json
View File

@ -118,6 +118,8 @@
"Settings.permissions.users.listview.header.description.plural": "{number} users found",
"Settings.permissions.users.listview.header.description.singular": "{number} user found",
"Settings.permissions.users.listview.header.title": "Users",
"Settings.permissions.select-all-by-permission": "Select all {label} permissions",
"Settings.permissions.select-by-permission": "Select {label} permission",
"Settings.profile.form.section.experience.interfaceLanguage": "Interface language",
"Settings.profile.form.section.experience.interfaceLanguage.hint": "This will only display your own interface in the chosen language.",
"Settings.profile.form.section.experience.title": "Experience",