Implement Accessibility Features for the Calculator!

[TechEvolvace]

New Accessibility Features for the Calculator to implement!

1) When user hovers over the buttons, the cursor icon should change from its default arrow icon to the hand with a finger outstretched icon

• Before hover:
• After hover:

2) When user hovers over a button, the button's color and text color should change.

3) When user clicks on a button, there should be animation on that clicked button that is trigged to indicate a successful click (button's box shadow turns yellow before defaulting to black)

4) Add colorful box shadow for the calculator buttons

5) Make the calculator appear 3D, if possible

[TechEvolvace]

New Changes (Part 1)

• Calculator now appears as a 3D object, due to the calculator and calculator buttons' border sizes and box shadows.
• Successfully implemented the effect of a mouse cursor hovering over a calculator button that can visibly contrast against the other calculator elements.
• Box shadows for the calculator buttons are implemented now.

[TechEvolvace]

New Changes (Part 2)

• Added hover and click effects on a calculator button now retains the appearance of a calculator button being a 3D button on a calculator!
• Click effect on a calculator button now looks like a calculator button being pressed down
• Hover effect on a calculator button retains the effect of a calculator button that hasn't been pressed down yet, but still visibly contrast against the other calculator button to indicate which button the mouse cursor is currently being hovered over.

Potential Improvements:

• Have the animation for the calculator button being clicked on last longer than instantaneously that helps the user recognize what button they have clicked on. However, don't make the animation last too longer (that would confuse the user when they press the button down multiple times)

[TechEvolvace]

New Changes (Part 3)

• Cursor now changes when cursor is over a calculator button, which indicate that the calculator button can now be clicked on!

[TechEvolvace]

New Changes (Part 4)

• Implemented additional animation for when the calculator button is clicked!
  • The shadow under the calculator button that was clicked will briefly glow yellow before going back to its default shadow color for the calculator button! (Long enough for the user to see that it was a successful click on a calculator button, and brief enough to last within one click on any of the calculator buttons!)

Outcome

• With these changes, all of the criterias for this issue have now been met! 1) Mouse cursor changes to a different cursor when it's hovering over the calculator button (Complete!) 2) A calculator button's color changes to a different color when a mouse cursor is currently over that calculator button (Complete!) 3) Animation for when the calculator button is clicked is now implemented! (Complete!) 4) Box shadow for the calculator buttons successfully implemented! (Complete!) 5) Both the calculator and the calculator buttons appear as 3D objects, even when the calculator buttons are clicked on or hovered over! (Complete!)