UI: Use computed z-index for UsersIndicator to fix tab order (#115894)

* Use computed z-index for UsersIndicator to fix tab order

* Apply z-index from UsersIndicator via nth-of-type

packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx

@@ -23,7 +23,7 @@ export interface UsersIndicatorProps {
  * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-usersindicator--docs
  */
 export const UsersIndicator = ({ users, onClick, limit = 4 }: UsersIndicatorProps) => {
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles, limit);
   if (!users.length) {
     return null;
   }
@@ -39,6 +39,9 @@ export const UsersIndicator = ({ users, onClick, limit = 4 }: UsersIndicatorProp
       className={styles.container}
       aria-label={t('grafana-ui.users-indicator.container-label', 'Users indicator container')}
     >
+      {users.slice(0, limitReached ? limit : limit + 1).map((userView, idx, arr) => (
+        <UserIcon key={userView.user.name} userView={userView} />
+      ))}
       {limitReached && (
         <UserIcon onClick={onClick} userView={{ user: { name: 'Extra users' } }} showTooltip={false}>
           {tooManyUsers
@@ -47,26 +50,30 @@ export const UsersIndicator = ({ users, onClick, limit = 4 }: UsersIndicatorProp
             : `+${extraUsers}`}
         </UserIcon>
       )}
-      {users
-        .slice(0, limitReached ? limit : limit + 1)
-        .reverse()
-        .map((userView) => (
-          <UserIcon key={userView.user.name} userView={userView} />
-        ))}
     </div>
   );
 };
 
-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2, limit: number) => {
   return {
     container: css({
       display: 'flex',
       justifyContent: 'center',
-      flexDirection: 'row-reverse',
       marginLeft: theme.spacing(1),
+      isolation: 'isolate',
 
       '& > button': {
         marginLeft: theme.spacing(-1), // Overlay the elements a bit on top of each other
+
+        // Ensure overlaying user icons are stacked correctly with z-index on each element
+        ...Object.fromEntries(
+          Array.from({ length: limit }).map((_, idx) => [
+            `&:nth-of-type(${idx + 1})`,
+            {
+              zIndex: limit - idx,
+            },
+          ])
+        ),
       },
     }),
     dots: css({