A11Y nested button errors and colour change

[mikematos84]

I am working on fixing some accessibility issues with a company (below) and it's currently giving errors because there are nested buttons. I did not originally code this component but now trying to fix any a11y issues.

My question is how would I go about creating the button below, so that when clicked only the icon background would change color, not the whole button

[Vanals]

@mikematos84 could you also share some bits of this code? and even a link if we have access.

Also, is not clear to me, you want to both fix the accessibility issue (not having two buttons nested) AND a solution for handling the CSS bit for the color switch?

About the A11Y issue, without seeing the code, I am not sure but you may be using a <Button component AND and <IconButton ? You may just want to use an icon instead. But please share some more bits!

Thank you

[mikematos84]

So this is what I came up with now in an attempt to fix it and it looks like it clears a11y testing. I changed what use to be a Stack > Button > Button(Person Icon) to the following Stack > Button > (TextBlock, Stack (Person Icon)). Instead of using overrides, I basically had to get it to work by customizing the CSS to remove padding, margins, adjust the ICON side and being able to actually change the hover stack of the ICON only

const ProfileWrapper = styled(Stack)`
  position: relative;
  width: 300px;
  background-color: transparent;
  border: none;
  height: 76px;
`;

const ProfileIcon = styled(Stack)`
  width: 76px;
  height: inherit;
  svg {
    width: ${ICON_SIZE}px;
    height: ${ICON_SIZE}px;
    color: #fdb456 !important;
    fill: #fdb456 !important;
  }

const ProfileButton = styled(Button)<{ isOpen?: Boolean; onClick?: Function; theme?: ThemeProp }>`
  color: #fdb456 !important;
  cursor: pointer;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
  border-radius: 0px;
  height: 76px;

  &&:hover,
  &&:link,
  &&:active {
    background-color: transparent;
  }

  ${ProfileIcon} {
    ${({ isOpen }) =>
      isOpen &&
      css`
        background-color: #fdb456 !important;
        svg {
          width: ${ICON_SIZE}px;
          height: ${ICON_SIZE}px;
          color: #2f3f4d !important;
          fill: #2f3f4d !important;
        }
      `}
  }
`;

export const AccountPanel = ({ name }) => {
  return (
    <ProfileWrapper>
      {/* Button */}
      <ProfileButton role="button">
        <TextBlock>{name}</TextBlock>
        <ProfileIcon flow="vertical-center" stackDistribution="center">
          <Person size="40" />
        </ProfileIcon>
      </ProfileButton>

      {/* Dropdown Panel */}
      <Block>
        <ul role="menu">
          <li role="menu-item">
            <h4>Heading</h4>
          </li>
          <li role="menu-item">Item 1</li>
          <li role="menu-item">Item 2</li>
          <li role="menu-item">Item 3</li>
          <li role="menu-item">Item 4</li>
        </ul>
      </Block>
    </ProfileWrapper>
  );
};

[Vanals]

Glad you managed to fix the A11Y issue!

About the styling you are trying to achieve I think it is a bit of an edge case that we do not support by default through props. So I think you should definitely use custom CSS to achieve that behavior.

[Vanals]

Closing as seems to be solved