chore: clean up aria labels (#886)

KaneFreeman · web-flow · commit b8de5f15bf65 · 2023-09-19T14:44:00.000-04:00
diff --git a/packages/core/src/components/collections/CollectionHeader.tsx b/packages/core/src/components/collections/CollectionHeader.tsx
@@ -72,7 +72,7 @@ const CollectionHeader: FC<TranslatedProps<CollectionHeaderProps>> = ({ collecti
       {newEntryUrl ? (
         <Button to={newEntryUrl} className={collectionClasses['new-entry-button']}>
           {t('collection.collectionTop.newButton', {
-            collectionLabel: collectionLabelSingular || pluralLabel,
+            collectionLabel: collectionLabelSingular ?? pluralLabel,
           })}
         </Button>
       ) : null}
diff --git a/packages/core/src/components/collections/FilterControl.tsx b/packages/core/src/components/collections/FilterControl.tsx
@@ -83,6 +83,7 @@ const FilterControl = ({
       color={anyActive ? 'primary' : 'secondary'}
       variant={anyActive ? 'contained' : 'outlined'}
       rootClassName={classes.root}
+      aria-label="filter options dropdown"
     >
       <MenuGroup>
         {viewFilters.map(viewFilter => {
diff --git a/packages/core/src/components/collections/GroupControl.tsx b/packages/core/src/components/collections/GroupControl.tsx
@@ -79,6 +79,7 @@ const GroupControl = ({
       color={activeGroup ? 'primary' : 'secondary'}
       variant={activeGroup ? 'contained' : 'outlined'}
       rootClassName={classes.root}
+      aria-label="group by options dropdown"
     >
       <MenuGroup>
         {viewGroups.map(viewGroup => (
diff --git a/packages/core/src/components/collections/SortControl.tsx b/packages/core/src/components/collections/SortControl.tsx
@@ -123,6 +123,7 @@ const SortControl = ({
       color={selectedSort.key ? 'primary' : 'secondary'}
       variant={selectedSort.key ? 'contained' : 'outlined'}
       rootClassName={classes.root}
+      aria-label="sort options dropdown"
     >
       <MenuGroup>
         {fields.map(field => {
diff --git a/packages/core/src/components/collections/entries/EntriesCollection.tsx b/packages/core/src/components/collections/entries/EntriesCollection.tsx
@@ -128,6 +128,7 @@ const EntriesCollection = ({
                     variant={index === selectedGroup ? 'contained' : 'text'}
                     onClick={handleGroupClick(index)}
                     className={entriesClasses['group-button']}
+                    aria-label={`group by ${title}`}
                   >
                     {title}
                   </Button>
diff --git a/packages/core/src/components/collections/mobile/MobileCollectionControls.tsx b/packages/core/src/components/collections/mobile/MobileCollectionControls.tsx
@@ -32,6 +32,7 @@ const MobileCollectionControls: FC<MobileCollectionControlsProps> = props => {
         className={mobileCollectionControlsClasses.toggle}
         variant="text"
         onClick={toggleMobileMenu}
+        aria-label="toggle menu"
       >
         <FilterListIcon className={mobileCollectionControlsClasses['toggle-icon']} />
       </IconButton>
diff --git a/packages/core/src/components/common/autocomplete/Autocomplete.tsx b/packages/core/src/components/common/autocomplete/Autocomplete.tsx
@@ -201,6 +201,7 @@ const Autocomplete = ({
             disabled={disabled}
             className={classes.button}
             onClick={handleDropdownButtonClick}
+            aria-label="open options"
           >
             <KeyboardArrowDownIcon className={classes['button-icon']} aria-hidden="true" />
           </IconButton>
@@ -211,6 +212,7 @@ const Autocomplete = ({
               disabled={disabled}
               className={classes.button}
               onClick={clear}
+              aria-label="clear"
             >
               <CloseIcon className={classes['button-icon']} aria-hidden="true" />
             </IconButton>
diff --git a/packages/core/src/components/common/menu/Menu.tsx b/packages/core/src/components/common/menu/Menu.tsx
@@ -43,6 +43,7 @@ export interface MenuProps {
   disabled?: boolean;
   keepMounted?: boolean;
   'data-testid'?: string;
+  'aria-label': string;
 }
 
 const Menu = ({
@@ -63,6 +64,7 @@ const Menu = ({
   disabled = false,
   keepMounted = false,
   'data-testid': dataTestId,
+  'aria-label': ariaLabel,
 }: MenuProps) => {
   const calculatedButtonClassName = useButtonClassNames(variant, color, size, rounded);
 
@@ -87,6 +89,7 @@ const Menu = ({
           data-testid={dataTestId}
           className={menuButtonClassNames}
           disabled={disabled}
+          aria-label={ariaLabel}
         >
           {StartIcon ? (
             <StartIcon className={classNames(classes['dropdown-start-icon'], iconClassName)} />
diff --git a/packages/core/src/components/common/view-style/ViewStyleControl.tsx b/packages/core/src/components/common/view-style/ViewStyleControl.tsx
@@ -24,7 +24,7 @@ const ViewStyleControl = ({ viewStyle, onChangeViewStyle }: ViewStyleControlPros
         color={viewStyle === VIEW_STYLE_TABLE ? 'primary' : 'secondary'}
         variant="text"
         className={classes.button}
-        aria-label="table view"
+        aria-label="table view option"
         onClick={() => onChangeViewStyle(VIEW_STYLE_TABLE)}
       >
         <TableRowsIcon className={classes.icon} />
@@ -33,7 +33,7 @@ const ViewStyleControl = ({ viewStyle, onChangeViewStyle }: ViewStyleControlPros
         color={viewStyle === VIEW_STYLE_GRID ? 'primary' : 'secondary'}
         variant="text"
         className={classes.button}
-        aria-label="grid view"
+        aria-label="grid view option"
         onClick={() => onChangeViewStyle(VIEW_STYLE_GRID)}
       >
         <GridIcon className={classes.icon} />
diff --git a/packages/core/src/components/entry-editor/EditorToolbar.tsx b/packages/core/src/components/entry-editor/EditorToolbar.tsx
@@ -202,6 +202,7 @@ const EditorToolbar = ({
             rootClassName={classes['more-menu']}
             buttonClassName={classes['more-menu-button']}
             hideDropdownIcon
+            aria-label="more options dropdown"
           >
             <MenuGroup>
               {showI18nToggle && (
@@ -252,6 +253,7 @@ const EditorToolbar = ({
             variant={showMobilePreview ? 'contained' : 'text'}
             onClick={onMobilePreviewToggle}
             className={classes['preview-toggle']}
+            aria-label="toggle preview"
           >
             <EyeIcon className={classes['preview-toggle-icon']} />
           </IconButton>
@@ -264,6 +266,7 @@ const EditorToolbar = ({
             variant="text"
             onClick={onDelete}
             className={classes['delete-button']}
+            aria-label="delete"
           >
             <TrashIcon className={classes['delete-button-icon']} />
           </IconButton>
@@ -279,6 +282,7 @@ const EditorToolbar = ({
           iconClassName={classes['publish-button-icon']}
           labelClassName={classes['publish-button-label']}
           hideDropdownIconOnMobile
+          aria-label="publish options dropdown"
         >
           {menuItems.map((group, index) => (
             <MenuGroup key={`menu-group-${index}`}>{group}</MenuGroup>
diff --git a/packages/core/src/components/entry-editor/editor-control-pane/EditorControl.tsx b/packages/core/src/components/entry-editor/editor-control-pane/EditorControl.tsx
@@ -198,7 +198,10 @@ const EditorControl = ({
     }
 
     return (
-      <div className={classNames(classes.root, hidden && classes.hidden)}>
+      <div
+        className={classNames(classes.root, hidden && classes.hidden)}
+        aria-label={widgetName?.concat(' field')}
+      >
         {createElement(widget.control, {
           key: `${id}-${version}`,
           collection,
diff --git a/packages/core/src/components/entry-editor/editor-control-pane/LocaleDropdown.tsx b/packages/core/src/components/entry-editor/editor-control-pane/LocaleDropdown.tsx
@@ -36,7 +36,7 @@ const LocaleDropdown = ({
   }
 
   return (
-    <Menu label={dropdownText} rootClassName={classes.root}>
+    <Menu label={dropdownText} rootClassName={classes.root} aria-label="locale options dropdown">
       <MenuGroup>
         {locales
           .filter(locale => !excludeLocales.includes(locale))
diff --git a/packages/core/src/components/media-library/MediaLibraryModal.tsx b/packages/core/src/components/media-library/MediaLibraryModal.tsx
@@ -33,7 +33,7 @@ const MediaLibraryModal: FC = () => {
         className={classes['close-button']}
         color="secondary"
         variant="outlined"
-        aria-label="add"
+        aria-label="close"
         onClick={handleClose}
         rounded
       >
diff --git a/packages/core/src/components/media-library/common/FolderCreationDialog.tsx b/packages/core/src/components/media-library/common/FolderCreationDialog.tsx
@@ -63,7 +63,7 @@ const FolderCreationDialog: FC<TranslatedProps<FolderCreationDialogProps>> = ({
         <h3 className={classes.title}>{t('mediaLibrary.folderSupport.createNewFolder')}</h3>
         <IconButton
           variant="text"
-          aria-label="add"
+          aria-label="close"
           onClick={handleClose}
           className={classes['close-button']}
         >
diff --git a/packages/core/src/components/media-library/common/MediaLibrary.tsx b/packages/core/src/components/media-library/common/MediaLibrary.tsx
@@ -536,6 +536,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
                       title={t('mediaLibrary.folderSupport.home')}
                       color="secondary"
                       disabled={!currentFolder}
+                      aria-label="go to home"
                     >
                       <HomeIcon className={mediaLibraryClasses['folder-controls-icon']} />
                     </IconButton>
@@ -548,13 +549,15 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
                       }
                       color="secondary"
                       disabled={!parentFolder}
+                      aria-label="go to parent folder"
                     >
                       <UpwardIcon className={mediaLibraryClasses['folder-controls-icon']} />
                     </IconButton>
                     <IconButton
                       onClick={handleCreateFolder}
                       title={t('mediaLibrary.folderSupport.newFolder')}
                       color="secondary"
+                      aria-label="create folder"
                     >
                       <NewFolderIcon
                         className={mediaLibraryClasses['folder-controls-icon']}
diff --git a/packages/core/src/components/navbar/BottomNavigation.tsx b/packages/core/src/components/navbar/BottomNavigation.tsx
@@ -49,11 +49,21 @@ const BottomNavigation: FC<BottomNavigationProps> = ({ collection }) => {
   return (
     <>
       <div className={classes.root}>
-        <IconButton variant="text" className={classes['menu-button']} onClick={toggleMobileMenu}>
+        <IconButton
+          variant="text"
+          className={classes['menu-button']}
+          onClick={toggleMobileMenu}
+          aria-label="toggle menu"
+        >
           <MenuIcon className={classes['menu-button-icon']} />
         </IconButton>
         {isNotEmpty(newEntryUrl) ? (
-          <IconButton to={newEntryUrl} variant="text" className={classes['add-button']}>
+          <IconButton
+            to={newEntryUrl}
+            variant="text"
+            className={classes['add-button']}
+            aria-label="create entry"
+          >
             <AddIcon className={classes['add-button-icon']} />
           </IconButton>
         ) : (
@@ -67,7 +77,12 @@ const BottomNavigation: FC<BottomNavigationProps> = ({ collection }) => {
           />
         )}
         {displayUrl ? (
-          <IconButton variant="text" className={classes['site-url-button']} href={displayUrl}>
+          <IconButton
+            variant="text"
+            className={classes['site-url-button']}
+            href={displayUrl}
+            aria-label="go to site"
+          >
             <OpenInNewIcon className={classes['site-url-button-icon']} />
           </IconButton>
         ) : null}
diff --git a/packages/core/src/components/navbar/QuickCreate.tsx b/packages/core/src/components/navbar/QuickCreate.tsx
@@ -30,7 +30,12 @@ const QuickCreate: FC<TranslatedProps<QuickCreateProps>> = ({ t, ...menuProps })
   );
 
   return (
-    <Menu label={t('app.header.quickAdd')} startIcon={AddIcon} {...menuProps}>
+    <Menu
+      label={t('app.header.quickAdd')}
+      startIcon={AddIcon}
+      {...menuProps}
+      aria-label="create entry options dropdown"
+    >
       <MenuGroup>
         {createableCollections.map(collection => (
           <MenuItemLink key={collection.name} href={getNewEntryUrl(collection.name)}>
diff --git a/packages/core/src/components/navbar/SettingsDropdown.tsx b/packages/core/src/components/navbar/SettingsDropdown.tsx
@@ -75,6 +75,7 @@ const SettingsDropdown: FC<TranslatedProps<SettingsDropdownProps>> = ({ inEditor
         rounded={!user?.avatar_url || 'no-padding'}
         hideDropdownIcon
         rootClassName={classNames(classes.root, inEditor && classes['in-editor'])}
+        aria-label="account options dropdown"
       >
         <MenuGroup>
           <MenuItemButton key="dark-mode" onClick={handleOpenThemeDialog} startIcon={PaletteIcon}>
diff --git a/packages/core/src/components/navbar/Sidebar.tsx b/packages/core/src/components/navbar/Sidebar.tsx
@@ -9,7 +9,7 @@ import './Sidebar.css';
 
 const Sidebar: FC = () => {
   return (
-    <aside className={sidebarClasses.root} aria-label="Sidebar">
+    <aside className={sidebarClasses.root} aria-label="sidebar">
       <SidebarContent />
     </aside>
   );
diff --git a/packages/core/src/components/snackbar/SnackbarAlert.tsx b/packages/core/src/components/snackbar/SnackbarAlert.tsx
@@ -75,7 +75,7 @@ const SnackbarAlert = forwardRef<HTMLDivElement, TranslatedProps<SnackbarAlertPr
         <div className={classes['icon-wrapper']}>{icon}</div>
         <div className={classes.message}>{renderedMessage}</div>
         <IconButton
-          aria-label="Close"
+          aria-label="close"
           variant="text"
           color="secondary"
           onClick={onClose}
diff --git a/packages/core/src/components/theme/components/ThemeSelectorDialog.tsx b/packages/core/src/components/theme/components/ThemeSelectorDialog.tsx
@@ -46,7 +46,7 @@ const ThemeSelectorDialog: FC<ThemeSelectorDialogProps> = ({ open, onClose }) =>
     <Modal open={open} onClose={onClose} className={classes.root}>
       <div className={classes.header}>
         <h2 className={classes.title}>{t('ui.settingsDropdown.theme')}</h2>
-        <IconButton variant="text" onClick={onClose}>
+        <IconButton variant="text" onClick={onClose} aria-label="close">
           <CloseIcon className={classes['close-icon']} />
         </IconButton>
       </div>
diff --git a/packages/core/src/widgets/code/SettingsButton.tsx b/packages/core/src/widgets/code/SettingsButton.tsx
@@ -26,6 +26,7 @@ const SettingsButton: FC<SettingsButtonProps> = ({ showClose = false, disabled,
       variant="text"
       disabled={disabled}
       className={classes.root}
+      aria-label="toggle settings"
     >
       {showClose ? (
         <CloseIcon className={classes.icon} />
diff --git a/packages/core/src/widgets/colorstring/ColorControl.tsx b/packages/core/src/widgets/colorstring/ColorControl.tsx
@@ -168,6 +168,7 @@ const ColorControl: FC<WidgetControlProps<string, ColorField>> = ({
             onClick={handleClear}
             disabled={disabled}
             className={classes['clear-button']}
+            aria-label="clear"
           >
             <CloseIcon className={classes['clear-button-icon']} />
           </IconButton>
diff --git a/packages/core/src/widgets/datetime/DateTimeControl.tsx b/packages/core/src/widgets/datetime/DateTimeControl.tsx
@@ -210,6 +210,7 @@ const DateTimeControl: FC<WidgetControlProps<string | Date, DateTimeField>> = ({
                 t={t}
                 handleChange={v => handleChange(v)}
                 disabled={disabled}
+                field={field}
               />
             </>
           )}
@@ -243,6 +244,7 @@ const DateTimeControl: FC<WidgetControlProps<string | Date, DateTimeField>> = ({
                 t={t}
                 handleChange={v => handleChange(v)}
                 disabled={disabled}
+                field={field}
               />
             </>
           )}
@@ -275,22 +277,24 @@ const DateTimeControl: FC<WidgetControlProps<string | Date, DateTimeField>> = ({
               t={t}
               handleChange={v => handleChange(v)}
               disabled={disabled}
+              field={field}
             />
           </>
         )}
       />
     );
   }, [
     dateFormat,
+    timeFormat,
+    inputFormat,
+    label,
     dateValue,
+    disabled,
     handleChange,
-    handleClose,
     handleOpen,
-    inputFormat,
-    disabled,
-    label,
+    handleClose,
     t,
-    timeFormat,
+    field,
   ]);
 
   return (
diff --git a/packages/core/src/widgets/datetime/components/NowButton.tsx b/packages/core/src/widgets/datetime/components/NowButton.tsx
@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import Button from '@staticcms/core/components/common/button/Button';
 import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
 
-import type { TranslatedProps } from '@staticcms/core/interface';
+import type { DateTimeField, TranslatedProps } from '@staticcms/core/interface';
 import type { FC, MouseEvent } from 'react';
 
 import './NowButton.css';
@@ -12,10 +12,11 @@ const classes = generateClassNames('WidgetDateTime_NowButton', ['root', 'button'
 
 export interface NowButtonProps {
   handleChange: (value: Date) => void;
+  field: DateTimeField;
   disabled: boolean;
 }
 
-const NowButton: FC<TranslatedProps<NowButtonProps>> = ({ disabled, t, handleChange }) => {
+const NowButton: FC<TranslatedProps<NowButtonProps>> = ({ disabled, field, t, handleChange }) => {
   const handleClick = useCallback(
     (event: MouseEvent) => {
       event.stopPropagation();
@@ -34,6 +35,7 @@ const NowButton: FC<TranslatedProps<NowButtonProps>> = ({ disabled, t, handleCha
         color="secondary"
         variant="outlined"
         className={classes.button}
+        aria-label={`set ${field.label ?? field.name} to now`}
       >
         {t('editor.editorWidgets.datetime.now')}
       </Button>
diff --git a/packages/core/src/widgets/file/components/SortableImage.tsx b/packages/core/src/widgets/file/components/SortableImage.tsx
@@ -102,6 +102,7 @@ const SortableImage: FC<SortableImageProps> = ({
                 variant="text"
                 onClick={handleReplace}
                 className={classes['replace-button']}
+                aria-label="replace image"
               >
                 <CameraAltIcon className={classes['button-icon']} />
               </IconButton>
@@ -113,6 +114,7 @@ const SortableImage: FC<SortableImageProps> = ({
                 color="error"
                 onClick={handleRemove}
                 className={classes['remove-button']}
+                aria-label="remove image"
               >
                 <DeleteIcon className={classes['button-icon']} />
               </IconButton>
diff --git a/packages/core/src/widgets/file/components/SortableLink.tsx b/packages/core/src/widgets/file/components/SortableLink.tsx
diff --git a/packages/core/src/widgets/keyvalue/KeyValueControl.tsx b/packages/core/src/widgets/keyvalue/KeyValueControl.tsx
diff --git a/packages/core/src/widgets/list/ListControl.tsx b/packages/core/src/widgets/list/ListControl.tsx
diff --git a/packages/core/src/widgets/list/components/ListItemWrapper.tsx b/packages/core/src/widgets/list/components/ListItemWrapper.tsx
diff --git a/packages/core/src/widgets/markdown/plate/components/buttons/ShortcodeToolbarButton.tsx b/packages/core/src/widgets/markdown/plate/components/buttons/ShortcodeToolbarButton.tsx
diff --git a/packages/core/src/widgets/markdown/plate/components/color-picker/ColorButton.tsx b/packages/core/src/widgets/markdown/plate/components/color-picker/ColorButton.tsx
diff --git a/packages/core/src/widgets/markdown/plate/hooks/useToolbarButtons.tsx b/packages/core/src/widgets/markdown/plate/hooks/useToolbarButtons.tsx
diff --git a/packages/core/src/widgets/markdown/withMarkdownControl.tsx b/packages/core/src/widgets/markdown/withMarkdownControl.tsx
diff --git a/packages/core/src/widgets/object/ObjectFieldWrapper.tsx b/packages/core/src/widgets/object/ObjectFieldWrapper.tsx

Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,7 @@ const FilterControl = ({`
`83`	`83`	`color={anyActive ? 'primary' : 'secondary'}`
`84`	`84`	`variant={anyActive ? 'contained' : 'outlined'}`
`85`	`85`	`rootClassName={classes.root}`
	`86`	`+ aria-label="filter options dropdown"`
`86`	`87`	`>`
`87`	`88`	`<MenuGroup>`
`88`	`89`	`{viewFilters.map(viewFilter => {`
Original file line number	Diff line number	Diff line change
`@@ -79,6 +79,7 @@ const GroupControl = ({`
`79`	`79`	`color={activeGroup ? 'primary' : 'secondary'}`
`80`	`80`	`variant={activeGroup ? 'contained' : 'outlined'}`
`81`	`81`	`rootClassName={classes.root}`
	`82`	`+ aria-label="group by options dropdown"`
`82`	`83`	`>`
`83`	`84`	`<MenuGroup>`
`84`	`85`	`{viewGroups.map(viewGroup => (`
Original file line number	Diff line number	Diff line change
`@@ -123,6 +123,7 @@ const SortControl = ({`
`123`	`123`	`color={selectedSort.key ? 'primary' : 'secondary'}`
`124`	`124`	`variant={selectedSort.key ? 'contained' : 'outlined'}`
`125`	`125`	`rootClassName={classes.root}`
	`126`	`+ aria-label="sort options dropdown"`
`126`	`127`	`>`
`127`	`128`	`<MenuGroup>`
`128`	`129`	`{fields.map(field => {`
Original file line number	Diff line number	Diff line change
`@@ -128,6 +128,7 @@ const EntriesCollection = ({`
`128`	`128`	`variant={index === selectedGroup ? 'contained' : 'text'}`
`129`	`129`	`onClick={handleGroupClick(index)}`
`130`	`130`	`className={entriesClasses['group-button']}`
	`131`	+ aria-label={`group by ${title}`}
`131`	`132`	`>`
`132`	`133`	`{title}`
`133`	`134`	`</Button>`
Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@ const MobileCollectionControls: FC<MobileCollectionControlsProps> = props => {`
`32`	`32`	`className={mobileCollectionControlsClasses.toggle}`
`33`	`33`	`variant="text"`
`34`	`34`	`onClick={toggleMobileMenu}`
	`35`	`+ aria-label="toggle menu"`
`35`	`36`	`>`
`36`	`37`	`<FilterListIcon className={mobileCollectionControlsClasses['toggle-icon']} />`
`37`	`38`	`</IconButton>`