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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

package/alpha/package.json

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

package/dist/index.esm.js

@@ -728,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,
@@ -752,7 +752,7 @@ const EntityLifecyclePicker = () => {
       className: classes.input,
       variant: "outlined"
     })
-  }));
+  })));
 };
 
 const useStyles$a = makeStyles({
@@ -796,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),
@@ -820,7 +820,7 @@ const EntityOwnerPicker = () => {
       className: classes.input,
       variant: "outlined"
     })
-  }));
+  })));
 };
 
 const useStyles$9 = makeStyles((_theme) => ({
@@ -1080,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),
@@ -1104,7 +1104,7 @@ const EntityTagPicker = () => {
       className: classes.input,
       variant: "outlined"
     })
-  }));
+  })));
 };
 
 const EntityTypePicker = (props) => {
@@ -2032,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,
@@ -2050,14 +2053,15 @@ const UserListPicker = (props) => {
       className: classes.menuItem,
       disabled: filterCounts[item.id] === 0,
       "data-testid": `user-picker-${item.id}`,
-      tabIndex: 0
+      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 : "-"));
   }))))));
 };