fix(a11y): aria-labels

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

@@ -36,7 +36,7 @@ function CollectionControls({
 }) {
   return (
     <CollectionControlsContainer>
-      <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} />
+      <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={onChangeViewStyle} t={t} />
       {viewGroups.length > 0 && (
         <GroupControl viewGroups={viewGroups} onGroupClick={onGroupClick} t={t} group={group} />
       )}

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

@@ -28,16 +28,18 @@ const ViewControlsButton = styled.button`
   }
 `;
 
-function ViewStyleControl({ viewStyle, onChangeViewStyle }) {
+function ViewStyleControl({ viewStyle, onChangeViewStyle, t }) {
   return (
     <ViewControlsSection>
       <ViewControlsButton
+        aria-label={t('collection.collectionTop.viewAsList')}
         isActive={viewStyle === VIEW_STYLE_LIST}
         onClick={() => onChangeViewStyle(VIEW_STYLE_LIST)}
       >
         <Icon type="list" />
       </ViewControlsButton>
       <ViewControlsButton
+        aria-label={t('collection.collectionTop.viewAsGrid')}
         isActive={viewStyle === VIEW_STYLE_GRID}
         onClick={() => onChangeViewStyle(VIEW_STYLE_GRID)}
       >

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

@@ -245,6 +245,7 @@ class EditorControl extends React.Component {
         {({ css, cx }) => (
           <ControlContainer
             className={className}
+            aria-label={t('editor.editorControl.field.widgetLabel', { widgetLabel: widgetName })}
             css={css`
               ${isHidden && styleStrings.hidden};
             `}

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

@@ -28,10 +28,10 @@ const LibraryTitle = styled.h1`
   color: ${props => props.isPrivate && colors.textFieldBorder};
 `;
 
-function MediaLibraryHeader({ onClose, title, isPrivate }) {
+function MediaLibraryHeader({ onClose, title, isPrivate, t }) {
   return (
     <div>
-      <CloseButton onClick={onClose}>
+      <CloseButton aria-label={t('mediaLibrary.mediaLibraryModal.close')} onClick={onClose}>
         <Icon type="close" />
       </CloseButton>
       <LibraryTitle isPrivate={isPrivate}>{title}</LibraryTitle>

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

@@ -70,6 +70,7 @@ function MediaLibraryTop({
               : t('mediaLibrary.mediaLibraryModal.mediaAssets')
           }`}
           isPrivate={privateUpload}
+          t={t}
         />
         <ButtonsContainer>
           <CopyToClipBoardButton

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

@@ -81,7 +81,7 @@ function SettingsDropdown({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }
         dropdownWidth="100px"
         dropdownPosition="right"
         renderButton={() => (
-          <AvatarDropdownButton>
+          <AvatarDropdownButton aria-label={t('ui.settingsDropdown.account')}>
             <Avatar imageUrl={imageUrl} />
           </AvatarDropdownButton>
         )}

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

@@ -43,6 +43,8 @@ const en = {
     collectionTop: {
       sortBy: 'Sort by',
       viewAs: 'View as',
+      viewAsList: 'List view option',
+      viewAsGrid: 'Grid view option',
       newButton: 'New %{collectionLabel}',
       ascending: 'Ascending',
       descending: 'Descending',
@@ -74,6 +76,7 @@ const en = {
     editorControl: {
       field: {
         optional: 'optional',
+        widgetLabel: '%{widgetLabel} field',
       },
     },
     editorControlPane: {
@@ -168,6 +171,10 @@ const en = {
         addComponent: 'Add Component',
         richText: 'Rich Text',
         markdown: 'Markdown',
+        toggleMode: {
+          rich: 'Toggle to rich text mode',
+          markdown: 'Toggle to markdown mode',
+        },
       },
       image: {
         choose: 'Choose an image',
@@ -208,11 +215,16 @@ const en = {
       datetime: {
         now: 'Now',
         clear: 'Clear',
+        setToNow: 'Set %{fieldLabel} to now',
       },
       list: {
         add: 'Add %{item}',
         addType: 'Add %{item}',
       },
+      object: {
+        expand: 'Expand',
+        collapse: 'Collapse',
+      },
     },
   },
   mediaLibrary: {
@@ -230,6 +242,7 @@ const en = {
     },
     mediaLibraryModal: {
       loading: 'Loading...',
+      close: 'Close',
       noResults: 'No results.',
       noAssetsFound: 'No assets found.',
       noImagesFound: 'No images found.',
@@ -264,6 +277,7 @@ const en = {
     },
     settingsDropdown: {
       logOut: 'Log Out',
+      account: 'Account options dropdown',
     },
     toast: {
       onFailToLoadEntries: 'Failed to load entry: %{details}',

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

@@ -113,12 +113,20 @@ class ObjectWidgetTopBar extends React.Component {
   }
 
   render() {
-    const { onCollapseToggle, collapsed, heading = null } = this.props;
+    const { onCollapseToggle, collapsed, heading = null, t } = this.props;
 
     return (
       <TopBarContainer>
         <ExpandButtonContainer hasHeading={!!heading}>
-          <ExpandButton onClick={onCollapseToggle} data-testid="expand-button">
+          <ExpandButton
+            onClick={onCollapseToggle}
+            data-testid="expand-button"
+            aria-label={
+              collapsed
+                ? t('editor.editorWidgets.object.expand')
+                : t('editor.editorWidgets.object.collapse')
+            }
+          >
             <Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
           </ExpandButton>
           {heading}

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

@@ -12,7 +12,7 @@ dayjs.extend(customParseFormat);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
 
-function Buttons({ t, handleChange, getNow }) {
+function Buttons({ t, fieldName, handleChange, getNow }) {
   return (
     <div
       css={css`
@@ -22,6 +22,7 @@ function Buttons({ t, handleChange, getNow }) {
       `}
     >
       <button
+        aria-label={t('editor.editorWidgets.datetime.setToNow', { fieldLabel: fieldName })}
         css={css`
           ${buttons.button}
           ${buttons.widget}
@@ -162,8 +163,16 @@ class DateTimeControl extends React.Component {
   };
 
   render() {
-    const { forID, value, classNameWrapper, setActiveStyle, setInactiveStyle, t, isDisabled } =
-      this.props;
+    const {
+      forID,
+      field,
+      value,
+      classNameWrapper,
+      setActiveStyle,
+      setInactiveStyle,
+      t,
+      isDisabled,
+    } = this.props;
     const { inputType } = this.getFormat();
 
     return (
@@ -196,7 +205,12 @@ class DateTimeControl extends React.Component {
           </span>
         )}
         {!isDisabled && (
-          <Buttons t={t} handleChange={v => this.handleChange(v)} getNow={() => this.getNow()} />
+          <Buttons
+            t={t}
+            fieldName={field.get('name')}
+            handleChange={v => this.handleChange(v)}
+            getNow={() => this.getNow()}
+          />
         )}
       </div>
     );

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

@@ -162,6 +162,7 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -414,6 +415,7 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -696,6 +698,7 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -961,6 +964,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1243,6 +1247,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1525,6 +1530,7 @@ exports[`ListControl should render list with fields with default collapse ("true
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.expand"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1790,6 +1796,7 @@ exports[`ListControl should render list with fields with default collapse ("true
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.expand"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1993,6 +2000,7 @@ exports[`ListControl should render list with nested object 1`] = `
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.expand"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -2279,6 +2287,7 @@ exports[`ListControl should render list with nested object with collapse = false
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >

packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js

@@ -281,7 +281,15 @@ export default class Toolbar extends React.Component {
             <ToolbarToggleLabel isActive={!rawMode} offPosition>
               {t('editor.editorWidgets.markdown.richText')}
             </ToolbarToggleLabel>
-            <StyledToggle active={rawMode} onChange={onToggleMode} />
+            <StyledToggle
+              active={rawMode}
+              onChange={onToggleMode}
+              aria-label={
+                rawMode
+                  ? t('editor.editorWidgets.markdown.toggleMode.rich')
+                  : t('editor.editorWidgets.markdown.toggleMode.markdown')
+              }
+            />
             <ToolbarToggleLabel isActive={rawMode}>
               {t('editor.editorWidgets.markdown.markdown')}
             </ToolbarToggleLabel>