How to fix button to be interacted with, in carousel?

Question

When I try to import a layer/button onto one of these cards it does not allow it to be clicked or interacted with. I believe the problem is with the carousel. What is a way I can fix this? The "CenterLayer" is supposed to act as a button and is the one I am having problems with. When I put this code the layer appears on the card as a footer but it's not allowed to be clicked. Is there anyone that can help me with this, please?

import React from "react";
import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Box,
  Image,
  Heading,
  Carousel,
  Grommet,
  Calendar,
  Text,
} from "grommet";
import {CenterLayer} from "./EventsButton";

import { MainFooter } from "../Footer/Footer";


const Card0 = () => (
  <Card pad="large" background="dark-1" gap="medium">
   <CardHeader>
   <Box height="small" width="small">
   <Image src="./images/Photo.jpg" />
   </Box>
   </CardHeader>
   <CardBody>The Stranahan High School Graduation</CardBody>
   <Box direction="row" round gap="xlarge">
   <CardFooter>
   3/25/2021
   </CardFooter>
   <CardFooter>
   <CenterLayer />
   </CardFooter>
    </Box>
          
  </Card>
);

const Card1 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
 <Box height="small" width="small">
  <Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>Card1 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);

const Card2 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />{" "}
</Box>
</CardHeader>
<CardBody>Card2 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);


const Events = () => (
<Grommet>
    
<Heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",
top: "large",}}>Upcoming Events</Heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>

<Heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",
top: "large",}}>Past Events</Heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
 <Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>

    
<Box direction="row" pad="xlarge" round gap="xlarge">
<Box height="medium" width="medium" margin={{left: "xlarge"}}>
<Calendar fill daysOfWeek />
</Box>
<Box margin={{left: "xlarge", top:"large"}}>
<Card background={'orange'} >
<CardBody height="medium" width="medium" margin={{right: "medium", bottom: "medium", left: "medium", top: "medium"}}> 
<Text>At SEEF we take every opportunity to help the Stranahan community. We hope that our impact will lead others to do the same.</Text>
</CardBody>
</Card>
</Box>
</Box>  
< MainFooter />


</Grommet>

);



export default Events

import React from 'react';

import { Add } from 'grommet-icons';

import { Box, Button, Grommet, Heading, Layer, Select, Text } from 'grommet';
import { grommet } from 'grommet/themes';

export const CenterLayer = () => {
const [open, setOpen] = React.useState();
const onOpen = () => setOpen(true);
const onClose = () => setOpen(undefined);



return (
    <Grommet theme={grommet} >
    <Box fill align="center" justify="center">
        <Button
        icon={<Add />}
        label={
            <Text>
            <strong>More Information</strong>
            </Text>
        }
        onClick={onOpen}
        plain
        />
    </Box>
    {open && (
        <Layer position="center" onClickOutside={onClose} onEsc={onClose}>
        <Box pad="medium" gap="small" width="medium">
            <Heading level={3} margin="none">
            The Stranahan High School Graduation
            </Heading>
            <Text>This event will be taken place at City Hall in Fort Lauderdale</Text>
            <Text>This event will be taken place on 3/25/2021 at 3:00PM</Text>
            <Box
            as="footer"
            gap="small"
            direction="row"
            align="center"
            justify="end"
            pad={{ top: 'medium', bottom: 'small' }}
            >
            
            <Button
                label={
                <Text color="white">
                    <strong>Close</strong>
                </Text>
                }
                onClick={onClose}
                primary
                color="status-critical"
            />
            </Box>
        </Box>
        </Layer>
    )}

    </Grommet>
);
};

CenterLayer.storyName = 'Center';

CenterLayer.parameters = {
chromatic: { disable: true },
};

export default {
title: 'EventsButton',
};

Answer 1

Carousel is an interactive element, i.e. it has its own focus and navigation behavior, and for UX & accessibility reasons you shouldn't place nested interactive elements inside of each other, hence I'd try to avoid a button inside of a card, inside of a Carousel.

That being said, the button you've placed in the card is placed 'behind' the Carousel, so moving up its z-index would solve the problem. Add this style to a Card and it should do trick

<Card style={{ zIndex: "100" }} ... >

I chose 100 as a random number, feel free to make it smaller according to your app behavior.