Skip to content

Commit ecb62c0

Browse files
yanthomasdevkewithammartinjagodic
committed
fix(a11y): aria-labels (decaporg#7720)
* fix(a11y): aria-labels Co-authored-by: kewitham <kewitham@gmail.com> * feat: add aria-label i18n * fix: failing tests --------- Co-authored-by: kewitham <kewitham@gmail.com> Co-authored-by: Martin Jagodic <jagodicmartin1@gmail.com>
1 parent 01b8d88 commit ecb62c0

File tree

11 files changed

+69
-12
lines changed

11 files changed

+69
-12
lines changed

‎packages/decap-cms-core/src/components/Collection/CollectionControls.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function CollectionControls({
3636
}) {
3737
return (
3838
<CollectionControlsContainer>
39-
<ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} />
39+
<ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} t={t} />
4040
{viewGroups.length > 0 && (
4141
<GroupControl viewGroups={viewGroups} onGroupClick={onGroupClick} t={t} group={group} />
4242
)}

‎packages/decap-cms-core/src/components/Collection/ViewStyleControl.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,18 @@ const ViewControlsButton = styled.button`
2828
}
2929
`;
3030

31-
function ViewStyleControl({ viewStyle, onChangeViewStyle }) {
31+
function ViewStyleControl({ viewStyle, onChangeViewStyle, t }) {
3232
return (
3333
<ViewControlsSection>
3434
<ViewControlsButton
35+
aria-label={t('collection.collectionTop.viewAsList')}
3536
isActive={viewStyle === VIEW_STYLE_LIST}
3637
onClick={() => onChangeViewStyle(VIEW_STYLE_LIST)}
3738
>
3839
<Icon type="list" />
3940
</ViewControlsButton>
4041
<ViewControlsButton
42+
aria-label={t('collection.collectionTop.viewAsGrid')}
4143
isActive={viewStyle === VIEW_STYLE_GRID}
4244
onClick={() => onChangeViewStyle(VIEW_STYLE_GRID)}
4345
>

‎packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,7 @@ class EditorControl extends React.Component {
246246
{({ css, cx }) => (
247247
<ControlContainer
248248
className={className}
249+
aria-label={t('editor.editorControl.field.widgetLabel', { widgetLabel: widgetName })}
249250
css={css`
250251
${isHidden && styleStrings.hidden};
251252
`}

‎packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ const LibraryTitle = styled.h1`
2828
color: ${props => props.isPrivate && colors.textFieldBorder};
2929
`;
3030

31-
function MediaLibraryHeader({ onClose, title, isPrivate }) {
31+
function MediaLibraryHeader({ onClose, title, isPrivate, t }) {
3232
return (
3333
<div>
34-
<CloseButton onClick={onClose}>
34+
<CloseButton aria-label={t('mediaLibrary.mediaLibraryModal.close')} onClick={onClose}>
3535
<Icon type="close" />
3636
</CloseButton>
3737
<LibraryTitle isPrivate={isPrivate}>{title}</LibraryTitle>

‎packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ function MediaLibraryTop({
7070
: t('mediaLibrary.mediaLibraryModal.mediaAssets')
7171
}`}
7272
isPrivate={privateUpload}
73+
t={t}
7374
/>
7475
<ButtonsContainer>
7576
<CopyToClipBoardButton

‎packages/decap-cms-core/src/components/UI/SettingsDropdown.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function SettingsDropdown({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }
8181
dropdownWidth="100px"
8282
dropdownPosition="right"
8383
renderButton={() => (
84-
<AvatarDropdownButton>
84+
<AvatarDropdownButton aria-label={t('ui.settingsDropdown.account')}>
8585
<Avatar imageUrl={imageUrl} />
8686
</AvatarDropdownButton>
8787
)}

‎packages/decap-cms-locales/src/en/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ const en = {
4848
collectionTop: {
4949
sortBy: 'Sort by',
5050
viewAs: 'View as',
51+
viewAsList: 'List view option',
52+
viewAsGrid: 'Grid view option',
5153
newButton: 'New %{collectionLabel}',
5254
ascending: 'Ascending',
5355
descending: 'Descending',
@@ -83,6 +85,7 @@ const en = {
8385
editorControl: {
8486
field: {
8587
optional: 'optional',
88+
widgetLabel: '%{widgetLabel} field',
8689
},
8790
},
8891
editorControlPane: {
@@ -177,6 +180,10 @@ const en = {
177180
addComponent: 'Add Component',
178181
richText: 'Rich Text',
179182
markdown: 'Markdown',
183+
toggleMode: {
184+
rich: 'Toggle to rich text mode',
185+
markdown: 'Toggle to markdown mode',
186+
},
180187
},
181188
image: {
182189
choose: 'Choose an image',
@@ -217,11 +224,16 @@ const en = {
217224
datetime: {
218225
now: 'Now',
219226
clear: 'Clear',
227+
setToNow: 'Set %{fieldLabel} to now',
220228
},
221229
list: {
222230
add: 'Add %{item}',
223231
addType: 'Add %{item}',
224232
},
233+
object: {
234+
expand: 'Expand',
235+
collapse: 'Collapse',
236+
},
225237
},
226238
},
227239
mediaLibrary: {
@@ -239,6 +251,7 @@ const en = {
239251
},
240252
mediaLibraryModal: {
241253
loading: 'Loading...',
254+
close: 'Close',
242255
noResults: 'No results.',
243256
noAssetsFound: 'No assets found.',
244257
noImagesFound: 'No images found.',
@@ -273,6 +286,7 @@ const en = {
273286
},
274287
settingsDropdown: {
275288
logOut: 'Log Out',
289+
account: 'Account options dropdown',
276290
},
277291
toast: {
278292
onFailToLoadEntries: 'Failed to load entry: %{details}',

‎packages/decap-cms-ui-default/src/ObjectWidgetTopBar.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,20 @@ class ObjectWidgetTopBar extends React.Component {
113113
}
114114

115115
render() {
116-
const { onCollapseToggle, collapsed, heading = null } = this.props;
116+
const { onCollapseToggle, collapsed, heading = null, t } = this.props;
117117

118118
return (
119119
<TopBarContainer>
120120
<ExpandButtonContainer hasHeading={!!heading}>
121-
<ExpandButton onClick={onCollapseToggle} data-testid="expand-button">
121+
<ExpandButton
122+
onClick={onCollapseToggle}
123+
data-testid="expand-button"
124+
aria-label={
125+
collapsed
126+
? t('editor.editorWidgets.object.expand')
127+
: t('editor.editorWidgets.object.collapse')
128+
}
129+
>
122130
<Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
123131
</ExpandButton>
124132
{heading}

‎packages/decap-cms-widget-datetime/src/DateTimeControl.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ dayjs.extend(customParseFormat);
1212
dayjs.extend(localizedFormat);
1313
dayjs.extend(utc);
1414

15-
function Buttons({ t, handleChange, getNow }) {
15+
function Buttons({ t, fieldName, handleChange, getNow }) {
1616
return (
1717
<div
1818
css={css`
@@ -22,6 +22,7 @@ function Buttons({ t, handleChange, getNow }) {
2222
`}
2323
>
2424
<button
25+
aria-label={t('editor.editorWidgets.datetime.setToNow', { fieldLabel: fieldName })}
2526
css={css`
2627
${buttons.button}
2728
${buttons.widget}
@@ -162,8 +163,16 @@ class DateTimeControl extends React.Component {
162163
};
163164

164165
render() {
165-
const { forID, value, classNameWrapper, setActiveStyle, setInactiveStyle, t, isDisabled } =
166-
this.props;
166+
const {
167+
forID,
168+
field,
169+
value,
170+
classNameWrapper,
171+
setActiveStyle,
172+
setInactiveStyle,
173+
t,
174+
isDisabled,
175+
} = this.props;
167176
const { inputType } = this.getFormat();
168177

169178
return (
@@ -196,7 +205,12 @@ class DateTimeControl extends React.Component {
196205
</span>
197206
)}
198207
{!isDisabled && (
199-
<Buttons t={t} handleChange={v => this.handleChange(v)} getNow={() => this.getNow()} />
208+
<Buttons
209+
t={t}
210+
fieldName={field.get('name')}
211+
handleChange={v => this.handleChange(v)}
212+
getNow={() => this.getNow()}
213+
/>
200214
)}
201215
</div>
202216
);

‎packages/decap-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
162162
class="emotion-3 emotion-4"
163163
>
164164
<button
165+
aria-label="editor.editorWidgets.object.collapse"
165166
class="emotion-5 emotion-6"
166167
data-testid="expand-button"
167168
>
@@ -414,6 +415,7 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
414415
class="emotion-3 emotion-4"
415416
>
416417
<button
418+
aria-label="editor.editorWidgets.object.collapse"
417419
class="emotion-5 emotion-6"
418420
data-testid="expand-button"
419421
>
@@ -696,6 +698,7 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
696698
class="emotion-3 emotion-4"
697699
>
698700
<button
701+
aria-label="editor.editorWidgets.object.collapse"
699702
class="emotion-5 emotion-6"
700703
data-testid="expand-button"
701704
>
@@ -961,6 +964,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
961964
class="emotion-3 emotion-4"
962965
>
963966
<button
967+
aria-label="editor.editorWidgets.object.collapse"
964968
class="emotion-5 emotion-6"
965969
data-testid="expand-button"
966970
>
@@ -1243,6 +1247,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
12431247
class="emotion-3 emotion-4"
12441248
>
12451249
<button
1250+
aria-label="editor.editorWidgets.object.collapse"
12461251
class="emotion-5 emotion-6"
12471252
data-testid="expand-button"
12481253
>
@@ -1525,6 +1530,7 @@ exports[`ListControl should render list with fields with default collapse ("true
15251530
class="emotion-3 emotion-4"
15261531
>
15271532
<button
1533+
aria-label="editor.editorWidgets.object.expand"
15281534
class="emotion-5 emotion-6"
15291535
data-testid="expand-button"
15301536
>
@@ -1790,6 +1796,7 @@ exports[`ListControl should render list with fields with default collapse ("true
17901796
class="emotion-3 emotion-4"
17911797
>
17921798
<button
1799+
aria-label="editor.editorWidgets.object.expand"
17931800
class="emotion-5 emotion-6"
17941801
data-testid="expand-button"
17951802
>
@@ -1993,6 +2000,7 @@ exports[`ListControl should render list with nested object 1`] = `
19932000
class="emotion-3 emotion-4"
19942001
>
19952002
<button
2003+
aria-label="editor.editorWidgets.object.expand"
19962004
class="emotion-5 emotion-6"
19972005
data-testid="expand-button"
19982006
>
@@ -2279,6 +2287,7 @@ exports[`ListControl should render list with nested object with collapse = false
22792287
class="emotion-3 emotion-4"
22802288
>
22812289
<button
2290+
aria-label="editor.editorWidgets.object.collapse"
22822291
class="emotion-5 emotion-6"
22832292
data-testid="expand-button"
22842293
>

0 commit comments

Comments
 (0)