@backstage/core-components 0.9.3-next.2 → 0.9.4-next.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @backstage/core-components
 
+## 0.9.4-next.1
+
+### Patch Changes
+
+- 55f68c386a: Enabled select component to be enabled by keyboard
+- ba97b80421: Updated dependency `@types/react-syntax-highlighter` to `^15.0.0`.
+- 2bcb0a0e2b: Sidebar NAV now includes aria-label. Component AboutField now uses h2 variant instead of subtitle2 (font properties unchanged)
+- Updated dependencies
+  - @backstage/config@1.0.1-next.0
+  - @backstage/core-plugin-api@1.0.2-next.1
+
+## 0.9.4-next.0
+
+### Patch Changes
+
+- ac19f82936: Added ARIA landmark <main> to Page component and added ARIA landmark <nav> to DesktopSidebar and Sidebar components
+- c0055ece91: Announce external links to screen readers
+- cfc0f2e5bd: Added optional anchorOrigin alignment prop to AlertDisplay
+- f4380eb602: Add an aria-label to the support button to improve accessibility for screen readers
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.2-next.0
+
+## 0.9.3
+
+### Patch Changes
+
+- 7c7919777e: build(deps-dev): bump `@testing-library/react-hooks` from 7.0.2 to 8.0.0
+- 24254fd433: build(deps): bump `@testing-library/user-event` from 13.5.0 to 14.0.0
+- 25b8e8d5b5: Add BackstageTab to overridableComponents so can override styles in a theme
+- 230ad0826f: Bump to using `@types/node` v16
+- 41fd107189: Exported `IdentityProviders` type.
+- a13604b8f7: Adding a name to the core-components Tab styles so can customise in the theme settings
+- 19648d5cf5: fix support config ref to use backstage/backstage
+- d505e43ffc: Fix highlighting of active sidebar items.
+- 72f3dfd05a: Updated ProxiedSignInPageProps docs
+- 7741e47eae: `<Sidebar />` now accepts additional props `sidebarOptions` and `submenuOptions` to allow further customization
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.1
+
 ## 0.9.3-next.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -28,9 +28,16 @@ import { Overrides } from '@material-ui/core/styles/overrides';
  * @public
  * @remarks
  *
- * Shown as SnackBar at the top of the page
+ * Shown as SnackBar at the center top of the page by default. Configurable with props.
  */
-declare function AlertDisplay(_props: {}): JSX.Element | null;
+declare type AlertDisplayProps = {
+    anchorOrigin?: {
+        vertical: 'top' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+};
+/** @public */
+declare function AlertDisplay(props: AlertDisplayProps): JSX.Element | null;
 
 /** @public */
 declare type AvatarClassKey = 'avatar';
@@ -1892,4 +1899,4 @@ declare type BackstageOverrides = Overrides & {
     [Name in keyof BackstageComponentsNameToClassKey]?: Partial<StyleRules<BackstageComponentsNameToClassKey[Name]>>;
 };
 
-export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, IdentityProviders, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MobileSidebar, MobileSidebarProps, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ProxiedSignInPage, ProxiedSignInPageProps, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarGroup, SidebarGroupProps, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarOptions, SidebarPage, SidebarPageClassKey, SidebarPageProps, SidebarPinStateContext, SidebarPinStateContextType, SidebarProps, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubmenuOptions, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useContent, useQueryParamState, useSupportConfig };
+export { AlertDisplay, AlertDisplayProps, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, IdentityProviders, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MobileSidebar, MobileSidebarProps, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ProxiedSignInPage, ProxiedSignInPageProps, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarGroup, SidebarGroupProps, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarOptions, SidebarPage, SidebarPageClassKey, SidebarPageProps, SidebarPinStateContext, SidebarPinStateContextType, SidebarProps, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubmenuOptions, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useContent, useQueryParamState, useSupportConfig };

package/dist/index.esm.js

@@ -71,6 +71,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import Chip from '@material-ui/core/Chip';
 import FormControl from '@material-ui/core/FormControl';
 import InputBase from '@material-ui/core/InputBase';
+import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import SvgIcon from '@material-ui/core/SvgIcon';
@@ -131,9 +132,10 @@ import { useForm } from 'react-hook-form';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import isEmpty from 'lodash/isEmpty';
 
-function AlertDisplay(_props) {
+function AlertDisplay(props) {
   const [messages, setMessages] = useState([]);
   const alertApi = useApi(alertApiRef);
+  const { anchorOrigin = { vertical: "top", horizontal: "center" } } = props;
   useEffect(() => {
     const subscription = alertApi.alert$().subscribe((message) => setMessages((msgs) => msgs.concat(message)));
     return () => {
@@ -149,7 +151,7 @@ function AlertDisplay(_props) {
   };
   return /* @__PURE__ */ React.createElement(Snackbar, {
     open: true,
-    anchorOrigin: { vertical: "top", horizontal: "center" }
+    anchorOrigin
   }, /* @__PURE__ */ React.createElement(Alert, {
     action: /* @__PURE__ */ React.createElement(IconButton, {
       color: "inherit",
@@ -178,7 +180,7 @@ function extractInitials(value) {
   return (_a = value.match(/\b\w/g)) == null ? void 0 : _a.join("").substring(0, 2);
 }
 
-const useStyles$R = makeStyles((theme) => createStyles({
+const useStyles$S = makeStyles((theme) => createStyles({
   avatar: {
     width: "4rem",
     height: "4rem",
@@ -190,7 +192,7 @@ const useStyles$R = makeStyles((theme) => createStyles({
 }), { name: "BackstageAvatar" });
 function Avatar(props) {
   const { displayName, picture, customStyles } = props;
-  const classes = useStyles$R();
+  const classes = useStyles$S();
   return /* @__PURE__ */ React.createElement(MaterialAvatar, {
     alt: displayName,
     src: picture,
@@ -202,6 +204,17 @@ function Avatar(props) {
   }, displayName && extractInitials(displayName));
 }
 
+const useStyles$R = makeStyles({
+  visuallyHidden: {
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    overflow: "hidden",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    height: 1,
+    width: 1
+  }
+}, { name: "Link" });
 const isExternalUri = (uri) => /^([a-z+.-]+):/.test(uri);
 const getNodeText = (node) => {
   var _a;
@@ -217,6 +230,7 @@ const getNodeText = (node) => {
   return "";
 };
 const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
+  const classes = useStyles$R();
   const analytics = useAnalytics();
   const to = String(props.to);
   const linkText = getNodeText(props.children) || to;
@@ -234,7 +248,9 @@ const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
     onClick: handleClick,
     ...newWindow ? { target: "_blank", rel: "noopener" } : {},
     ...props
-  }) : /* @__PURE__ */ React.createElement(Link$1, {
+  }, props.children, /* @__PURE__ */ React.createElement("span", {
+    className: classes.visuallyHidden
+  }, ", Opens in a new window")) : /* @__PURE__ */ React.createElement(Link$1, {
     ref,
     component: Link$2,
     onClick: handleClick,
@@ -2249,6 +2265,16 @@ const useStyles$s = makeStyles((theme) => createStyles({
       color: theme.palette.text.primary
     }
   },
+  formLabel: {
+    transform: "initial",
+    fontWeight: "bold",
+    fontSize: 14,
+    fontFamily: theme.typography.fontFamily,
+    color: theme.palette.text.primary,
+    "&.Mui-focused": {
+      color: theme.palette.text.primary
+    }
+  },
   chips: {
     display: "flex",
     flexWrap: "wrap"
@@ -2311,13 +2337,13 @@ function SelectComponent(props) {
   };
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.root
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, label), /* @__PURE__ */ React.createElement(ClickAwayListener, {
+  }, /* @__PURE__ */ React.createElement(ClickAwayListener, {
     onClickAway: handleClickAway
   }, /* @__PURE__ */ React.createElement(FormControl, {
     className: classes.formControl
-  }, /* @__PURE__ */ React.createElement(Select, {
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
+    className: classes.formLabel
+  }, label), /* @__PURE__ */ React.createElement(Select, {
     value,
     native,
     disabled,
@@ -2328,6 +2354,8 @@ function SelectComponent(props) {
     onClick: handleClick,
     open: isOpen,
     input: /* @__PURE__ */ React.createElement(BootstrapInput, null),
+    label,
+    tabIndex: 0,
     renderValue: (s) => {
       var _a;
       return multiple && value.length !== 0 ? /* @__PURE__ */ React.createElement("div", {
@@ -2940,6 +2968,7 @@ function SupportButton(props) {
     "data-testid": "support-button"
   }, /* @__PURE__ */ React.createElement(HelpIcon, null)) : /* @__PURE__ */ React.createElement(Button$1, {
     "data-testid": "support-button",
+    "aria-label": "support",
     color: "primary",
     onClick: onClickHandler,
     startIcon: /* @__PURE__ */ React.createElement(HelpIcon, null)
@@ -3218,7 +3247,9 @@ const OverlayMenu = ({
   }, label), /* @__PURE__ */ React.createElement(IconButton, {
     onClick: onClose,
     classes: { root: classes.overlayHeaderClose }
-  }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement(Box, null, children));
+  }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement(Box, {
+    component: "nav"
+  }, children));
 };
 const MobileSidebarContext = createContext({
   selectedMenuItemIndex: -1,
@@ -3257,7 +3288,8 @@ const MobileSidebar = (props) => {
     onClose: () => setSelectedMenuItemIndex(-1)
   }, sidebarGroups[selectedMenuItemIndex] && sidebarGroups[selectedMenuItemIndex].props.children), /* @__PURE__ */ React.createElement(BottomNavigation, {
     className: classes.root,
-    "data-testid": "mobile-sidebar-root"
+    "data-testid": "mobile-sidebar-root",
+    component: "nav"
   }, sidebarGroups)));
 };
 
@@ -3360,8 +3392,9 @@ const DesktopSidebar = (props) => {
       toggleSidebarPinState();
     }
   };
-  return /* @__PURE__ */ React.createElement("div", {
-    style: {}
+  return /* @__PURE__ */ React.createElement("nav", {
+    style: {},
+    "aria-label": "sidebar nav"
   }, /* @__PURE__ */ React.createElement(A11ySkipSidebar, null), /* @__PURE__ */ React.createElement(SidebarContext.Provider, {
     value: { isOpen, setOpen }
   }, /* @__PURE__ */ React.createElement("div", {
@@ -5513,7 +5546,7 @@ function Page(props) {
       ...baseTheme,
       page: baseTheme.getPageTheme({ themeId })
     })
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("main", {
     className: classes.root
   }, children));
 }