@backstage/plugin-catalog-react 1.1.0-next.1 → 1.1.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @backstage/plugin-catalog-react
 
+## 1.1.1-next.0
+
+### Patch Changes
+
+- 1f70704580: Accessibility updates:
+
+  - Wrapped the `EntityLifecyclePicker`, `EntityOwnerPicker`, `EntityTagPicker`, in `label` elements
+  - Changed group name `Typography` component to `span` (from default `h6`), added `aria-label` to the `List` component, and `role` of `menuitem` to the container of the `MenuItem` component
+
+- Updated dependencies
+  - @backstage/core-components@0.9.5-next.0
+  - @backstage/integration@1.2.1-next.0
+
+## 1.1.0
+
+### Minor Changes
+
+- 4274844a8c: Use InfoCardVariants on custom cards variant attribute
+
+### Patch Changes
+
+- 0418447669: Added menu parent role for menu items accessibility
+- b7514d19ff: Update the rendering of links in the entity inspector so that values starting with `https?://` are rendered as links as well.
+- b880c0e092: Fix `EntityTypeFilter` so generating available types is case insensitive
+- 57f41fb8d6: Make Menu item on filters accessible through keyboard
+- Updated dependencies
+  - @backstage/core-components@0.9.4
+  - @backstage/integration@1.2.0
+  - @backstage/core-plugin-api@1.0.2
+  - @backstage/catalog-client@1.0.2
+  - @backstage/catalog-model@1.0.2
+  - @backstage/plugin-catalog-common@1.0.2
+  - @backstage/plugin-permission-common@0.6.1
+  - @backstage/plugin-permission-react@0.4.1
+
+## 1.1.0-next.2
+
+### Patch Changes
+
+- 57f41fb8d6: Make Menu item on filters accessible through keyboard
+- Updated dependencies
+  - @backstage/core-components@0.9.4-next.1
+  - @backstage/catalog-model@1.0.2-next.0
+  - @backstage/core-plugin-api@1.0.2-next.1
+  - @backstage/integration@1.2.0-next.1
+  - @backstage/plugin-permission-common@0.6.1-next.0
+  - @backstage/plugin-permission-react@0.4.1-next.1
+  - @backstage/catalog-client@1.0.2-next.0
+  - @backstage/plugin-catalog-common@1.0.2-next.0
+
 ## 1.1.0-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.1.0-next.1",
+  "version": "1.1.1-next.0",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/index.esm.js

@@ -512,7 +512,9 @@ function useEntityTypeFilter() {
     if (loading || !kind || oldFacets === facets || !facets) {
       return;
     }
-    const newTypes = sortBy(facets, (f) => -f.count).map((f) => f.value);
+    const newTypes = [
+      ...new Set(sortBy(facets, (f) => -f.count).map((f) => f.value.toLocaleLowerCase("en-US")))
+    ];
     setAvailableTypes(newTypes);
     const stillValidTypes = selectedTypes.filter((value) => newTypes.includes(value));
     if (!isEqual$1(selectedTypes, stillValidTypes)) {
@@ -726,9 +728,9 @@ const EntityLifecyclePicker = () => {
     pb: 1,
     pt: 1
   }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, "Lifecycle"), /* @__PURE__ */ React.createElement(Autocomplete, {
-    "aria-label": "Lifecycle",
+    variant: "button",
+    component: "label"
+  }, "Lifecycle", /* @__PURE__ */ React.createElement(Autocomplete, {
     multiple: true,
     options: availableLifecycles,
     value: selectedLifecycles,
@@ -750,7 +752,7 @@ const EntityLifecyclePicker = () => {
       className: classes.input,
       variant: "outlined"
     })
-  }));
+  })));
 };
 
 const useStyles$a = makeStyles({
@@ -794,10 +796,10 @@ const EntityOwnerPicker = () => {
     pb: 1,
     pt: 1
   }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, "Owner"), /* @__PURE__ */ React.createElement(Autocomplete, {
+    variant: "button",
+    component: "label"
+  }, "Owner", /* @__PURE__ */ React.createElement(Autocomplete, {
     multiple: true,
-    "aria-label": "Owner",
     options: availableOwners,
     value: selectedOwners,
     onChange: (_, value) => setSelectedOwners(value),
@@ -818,7 +820,7 @@ const EntityOwnerPicker = () => {
       className: classes.input,
       variant: "outlined"
     })
-  }));
+  })));
 };
 
 const useStyles$9 = makeStyles((_theme) => ({
@@ -1078,10 +1080,10 @@ const EntityTagPicker = () => {
     pb: 1,
     pt: 1
   }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, "Tags"), /* @__PURE__ */ React.createElement(Autocomplete, {
+    variant: "button",
+    component: "label"
+  }, "Tags", /* @__PURE__ */ React.createElement(Autocomplete, {
     multiple: true,
-    "aria-label": "Tags",
     options: availableTags,
     value: selectedTags,
     onChange: (_, value) => setSelectedTags(value),
@@ -1102,7 +1104,7 @@ const EntityTagPicker = () => {
       className: classes.input,
       variant: "outlined"
     })
-  }));
+  })));
 };
 
 const EntityTypePicker = (props) => {
@@ -1369,13 +1371,23 @@ function Container(props) {
     to: props.helpLink
   })), props.children)));
 }
+function findLink(value) {
+  if (value.match(/^url:https?:\/\//)) {
+    return value.slice("url:".length);
+  }
+  if (value.match(/^https?:\/\//)) {
+    return value;
+  }
+  return void 0;
+}
 function KeyValueListItem(props) {
   const [key, value] = props.entry;
+  const link = findLink(value);
   return /* @__PURE__ */ React.createElement(ListItem, null, props.indent && /* @__PURE__ */ React.createElement(ListItemIcon, null), /* @__PURE__ */ React.createElement(ListItemText, {
     primary: key,
-    secondary: !value.match(/^url:https?:\/\//) ? value : /* @__PURE__ */ React.createElement(React.Fragment, null, value.substring(0, 4), /* @__PURE__ */ React.createElement(Link, {
-      to: value.substring(4)
-    }, value.substring(4)))
+    secondary: link ? /* @__PURE__ */ React.createElement(Link, {
+      to: link
+    }, value) : value
   }));
 }
 function HelpIcon(props) {
@@ -2020,16 +2032,19 @@ const UserListPicker = (props) => {
     key: group.name
   }, /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2",
+    component: "span",
     className: classes.title
   }, group.name), /* @__PURE__ */ React.createElement(Card, {
     className: classes.groupWrapper
   }, /* @__PURE__ */ React.createElement(List, {
     disablePadding: true,
     dense: true,
-    role: "menu"
+    role: "menu",
+    "aria-label": group.name
   }, group.items.map((item) => {
     var _a2, _b;
     return /* @__PURE__ */ React.createElement(MenuItem, {
+      role: "none presentation",
       key: item.id,
       button: true,
       divider: true,
@@ -2037,14 +2052,16 @@ const UserListPicker = (props) => {
       selected: item.id === ((_a2 = filters.user) == null ? void 0 : _a2.value),
       className: classes.menuItem,
       disabled: filterCounts[item.id] === 0,
-      "data-testid": `user-picker-${item.id}`
+      "data-testid": `user-picker-${item.id}`,
+      tabIndex: 0,
+      ContainerProps: { role: "menuitem" }
     }, item.icon && /* @__PURE__ */ React.createElement(ListItemIcon, {
       className: classes.listIcon
     }, /* @__PURE__ */ React.createElement(item.icon, {
       fontSize: "small"
     })), /* @__PURE__ */ React.createElement(ListItemText$1, null, /* @__PURE__ */ React.createElement(Typography, {
       variant: "body1"
-    }, item.label)), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, (_b = filterCounts[item.id]) != null ? _b : "-"));
+    }, item.label, " ")), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, (_b = filterCounts[item.id]) != null ? _b : "-"));
   }))))));
 };