Keyboard Navigation to a disabled donate button allows you to click the link

[dimitur2204]

Which area(s) of Podkrepi.bg are affected? (leave empty if unsure)

No response

Describe the Bug

When you use your keyboard to go to one of the finished campaigns and click the donate link it redirects you to the page that should generally be inaccessible.

To Reproduce

1. Go to the homepage
2. Start hitting Tab on your keybaord until you get to one of the finished donations
3. Get to the disabled Donate button and hit enter
4. It will redirect you to the page

Expected Behavior

It should be untabbable with a tabindex={0}

Which browser are you using? (if relevant)

Not relevant.

[ani-kalpachka]

Have in mind that according to the new design of the Home page (shown here: #1302) we will not have a Donate button on the successful campaign cards, but this is a well spotted defect and it will be good if we fix it until the new design is implemented since currently it is not in progress.

[dimitur2204]

Have in mind that according to the new design of the Home page (shown here: #1302) we will not have a Donate button on the successful campaign cards, but this is a well spotted defect and it will be good if we fix it until the new design is implemented since currently it is not in progress.

Good to know!
We can reference this in the new design issue as a "Keep in mind" thing and close it if the Homepage closes before it is fixed

[sashko9807]

In the current usecase of <LinkButton> the <Button> component needs to be converted to anchor.
It could be done either by passing legacyBehavior prop to the <Link> component as shown in the example below or by passing the href prop to <Button> component which will make it an anchor (doc)

If not done we end up with the following HTML structure
<a href="...." style="pointer-events: disabled">
<button></button>
</a>
In which the button is actually disabled, but the <a href=""></a> remains valid, since pointer-events is not meant to work for keyboard navigation.

Only issue is that custom style should be provided for focused elements, otherwise you wont be able to see which LinkButton is focused.
Here is a working example with legacyBehavior if you want to test

const LinkButton = (
  { href, as, prefetch, locale, disabled, ...props }: NextLinkProps,
  ref: Ref<LinkRef>,
) => (
  <Link
    href={href}
    as={as}
    prefetch={prefetch}
    locale={locale}
    passHref
    legacyBehavior>
    <Button ref={ref} disabled={disabled} {...props} sx={{
        "&.Mui-focusVisible": {
      border: 2,
      borderColor: 'orange'
    },
    }}/>
  </Link>
)

UPDATE: Tested again on a freshly started server seems like using legacyBehavior prop is the only solution

Solves #1328 as well.