@backstage/core-components 0.9.3 → 0.9.4-next.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @backstage/core-components
 
+## 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

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

@@ -131,9 +131,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 +150,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 +179,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 +191,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 +203,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 +229,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 +247,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,
@@ -2940,6 +2955,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 +3234,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 +3275,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,7 +3379,7 @@ const DesktopSidebar = (props) => {
       toggleSidebarPinState();
     }
   };
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("nav", {
     style: {}
   }, /* @__PURE__ */ React.createElement(A11ySkipSidebar, null), /* @__PURE__ */ React.createElement(SidebarContext.Provider, {
     value: { isOpen, setOpen }
@@ -5513,7 +5532,7 @@ function Page(props) {
       ...baseTheme,
       page: baseTheme.getPageTheme({ themeId })
     })
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("main", {
     className: classes.root
   }, children));
 }