@atlaskit/teams-public 3.1.3 → 3.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/teams-public
 
+## 3.1.4
+
+### Patch Changes
+
+- [`6f3ca06c05ce4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f3ca06c05ce4) -
+  A11Y: Fix focus management when activating the Show more button in TeamContainers — focus now
+  moves to the first newly revealed container item (gated behind `teams_a11y_20261005`)
+
 ## 3.1.3
 
 ### Patch Changes

package/dist/cjs/ui/team-containers/main.js

@@ -71,6 +71,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showMore = _useState2[0],
     setShowMore = _useState2[1];
+  var firstShowMoreItemRef = (0, _react.useRef)(null);
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isDisconnectDialogOpen = _useState4[0],
@@ -179,6 +180,13 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       }
     }
   }, [hasError, unlinkError, onError]);
+  (0, _react.useEffect)(function () {
+    if ((0, _fg.fg)('teams_a11y_20261005') && showMore && firstShowMoreItemRef.current) {
+      firstShowMoreItemRef.current.focus({
+        preventScroll: false
+      });
+    }
+  }, [showMore]);
   var handleShowMore = function handleShowMore() {
     setShowMore(!showMore);
   };
@@ -339,7 +347,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       onAddAContainerClick: onAddAContainerClick,
       CustomAddContainerCard: components === null || components === void 0 ? void 0 : components.AddContainerCard,
       canCreateContainers: hasPermissionToCreateContainer
-    }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
+    }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container, index) {
       var card = /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
         key: container.id,
         containerType: container.type,
@@ -363,7 +371,9 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
       });
       return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         key: container.id,
-        role: "listitem"
+        role: "listitem",
+        ref: index === 0 ? firstShowMoreItemRef : undefined,
+        tabIndex: index === 0 && (0, _fg.fg)('teams_a11y_20261005') ? -1 : undefined
       }, card);
     }));
   }(), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_button.default, {

package/dist/es2019/ui/team-containers/main.js

@@ -1,7 +1,7 @@
 /* main.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./main.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
@@ -55,6 +55,7 @@ export const TeamContainers = ({
   } = useTeamLinksAndContainers(teamId, true);
   const [_, actions] = useTeamContainersHook();
   const [showMore, setShowMore] = useState(false);
+  const firstShowMoreItemRef = useRef(null);
   const [isDisconnectDialogOpen, setIsDisconnectDialogOpen] = useState(false);
   const [selectedContainerDetails, setSelectedContainerDetails] = useState();
   const [filteredTeamLinks, setFilteredTeamLinks] = useState(teamLinks);
@@ -146,6 +147,13 @@ export const TeamContainers = ({
       }
     }
   }, [hasError, unlinkError, onError]);
+  useEffect(() => {
+    if (fg('teams_a11y_20261005') && showMore && firstShowMoreItemRef.current) {
+      firstShowMoreItemRef.current.focus({
+        preventScroll: false
+      });
+    }
+  }, [showMore]);
   const handleShowMore = () => {
     setShowMore(!showMore);
   };
@@ -278,7 +286,7 @@ export const TeamContainers = ({
       onAddAContainerClick: onAddAContainerClick,
       CustomAddContainerCard: components === null || components === void 0 ? void 0 : components.AddContainerCard,
       canCreateContainers: hasPermissionToCreateContainer
-    }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(container => {
+    }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map((container, index) => {
       const card = /*#__PURE__*/React.createElement(LinkedContainerCardComponent, {
         key: container.id,
         containerType: container.type,
@@ -298,7 +306,9 @@ export const TeamContainers = ({
       });
       return /*#__PURE__*/React.createElement(Box, {
         key: container.id,
-        role: "listitem"
+        role: "listitem",
+        ref: index === 0 ? firstShowMoreItemRef : undefined,
+        tabIndex: index === 0 && fg('teams_a11y_20261005') ? -1 : undefined
       }, card);
     }));
   })(), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Button, {

package/dist/esm/ui/team-containers/main.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./main.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
@@ -62,6 +62,7 @@ export var TeamContainers = function TeamContainers(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showMore = _useState2[0],
     setShowMore = _useState2[1];
+  var firstShowMoreItemRef = useRef(null);
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isDisconnectDialogOpen = _useState4[0],
@@ -170,6 +171,13 @@ export var TeamContainers = function TeamContainers(_ref) {
       }
     }
   }, [hasError, unlinkError, onError]);
+  useEffect(function () {
+    if (fg('teams_a11y_20261005') && showMore && firstShowMoreItemRef.current) {
+      firstShowMoreItemRef.current.focus({
+        preventScroll: false
+      });
+    }
+  }, [showMore]);
   var handleShowMore = function handleShowMore() {
     setShowMore(!showMore);
   };
@@ -330,7 +338,7 @@ export var TeamContainers = function TeamContainers(_ref) {
       onAddAContainerClick: onAddAContainerClick,
       CustomAddContainerCard: components === null || components === void 0 ? void 0 : components.AddContainerCard,
       canCreateContainers: hasPermissionToCreateContainer
-    }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
+    }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container, index) {
       var card = /*#__PURE__*/React.createElement(LinkedContainerCardComponent, {
         key: container.id,
         containerType: container.type,
@@ -354,7 +362,9 @@ export var TeamContainers = function TeamContainers(_ref) {
       });
       return /*#__PURE__*/React.createElement(Box, {
         key: container.id,
-        role: "listitem"
+        role: "listitem",
+        ref: index === 0 ? firstShowMoreItemRef : undefined,
+        tabIndex: index === 0 && fg('teams_a11y_20261005') ? -1 : undefined
       }, card);
     }));
   }(), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Button, {

package/package.json

@@ -45,7 +45,7 @@
 		"@atlaskit/teams-app-internal-product-permissions": "^2.2.0",
 		"@atlaskit/teams-client": "^6.1.0",
 		"@atlaskit/tile": "^5.0.0",
-		"@atlaskit/tokens": "^20.1.0",
+		"@atlaskit/tokens": "^20.3.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -53,7 +53,7 @@
 		"graphql": "^15.8.0",
 		"graphql-tag": "^2.10.1",
 		"react-loosely-lazy": "^1.0.0",
-		"react-router-dom": "^6.28.0",
+		"react-router-dom": "^6.30.6",
 		"react-sweet-state": "^2.6.5",
 		"string-hash": "1.1.3"
 	},
@@ -67,7 +67,7 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.17.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
-		"@atlassian/ptc-test-utils": "^0.15.0",
+		"@atlassian/ptc-test-utils": "^0.16.0",
 		"@atlassian/teams-app-internal-playground": "^2.10.0",
 		"@atlassian/testing-library": "^0.11.0",
 		"@atlassian/workbench": "workspace:^",
@@ -78,7 +78,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"name": "@atlaskit/teams-public",
-	"version": "3.1.3",
+	"version": "3.1.4",
 	"description": "Public components related to teams",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -87,7 +87,7 @@
 	},
 	"scripts": {
 		"ak-postbuild": "ls -d dist/* | xargs -n 1 copyfiles -u 1 -V 'src/**/*.svg'",
-		"test:coverage": "(cd ../../.. && yarn test 'packages/people-and-teams/teams-public/src' --coverage --coverageProvider=v8 --collectCoverageFrom='[\"packages/people-and-teams/teams-public/src/**\", \"!packages/people-and-teams/teams-public/src/**/**/types.ts\", \"!packages/people-and-teams/teams-public/src/ui/**/styled.tsx\"]')"
+		"test:coverage": "(cd ../../.. && afm run test -- 'packages/people-and-teams/teams-public/src' --coverage --coverageProvider=v8 --collectCoverageFrom='[\"packages/people-and-teams/teams-public/src/**\", \"!packages/people-and-teams/teams-public/src/**/**/types.ts\", \"!packages/people-and-teams/teams-public/src/ui/**/styled.tsx\"]')"
 	},
 	"platform-feature-flags": {
 		"migrate-product-permissions": {
@@ -104,6 +104,9 @@
 		},
 		"enable_teams_t26_design_drop_core_experiences": {
 			"type": "boolean"
+		},
+		"teams_a11y_20261005": {
+			"type": "boolean"
 		}
 	}
 }