Confusion with Cursor Pointer and Default Styles in Custom Cookie Consent Banner

[cheesea3]

We've encountered an issue in our repository regarding the cursor pointer and default styles in our custom cookie consent banner and modal. Due to our implementation of accessibility features using roles, there's confusion with cursor pointer behavior where it's not intended and vice versa.

Steps to Reproduce:

1. Open the website/application and trigger the cookie consent banner.
2. Attempt to interact with the elements within the banner and modal.
3. Observe the cursor behavior inconsistently applying pointer and default styles.

Expected Behavior:

• Cursor pointer should only be displayed when interacting with actionable elements (e.g., buttons).
• Default cursor style should be maintained for non-actionable elements (e.g., text content).

Actual Behavior:

• Cursor pointer is inconsistently applied, causing confusion for users interacting with non-actionable elements.

Additional Context: This issue stems from our implementation where buttons were created from <div> elements using roles for accessibility purposes. While this setup was necessary for onclick functionality and accessibility compliance, it has inadvertently led to confusion regarding cursor behavior.

Proposed Solution:

• Review and refine the implementation to ensure consistent cursor behavior according to user expectations.
• Consider alternative approaches to maintain accessibility compliance without sacrificing user experience.

Screenshot: