Accordion: max-width is not working properly in the headings.

**Describe the bug**

1. `max-width` needs to be added for the case texts get longer in the headings.
after adding `max-width` to the button locally, the background color is not going all the way when its hovered over because the hover effect is applied to the button.

2. `span` needs to be added inside the buttons to fix this hover effect bug mentioned above.
after adding `span` inside the button locally, `max-width` is not working as `span` has inline attribute. so I had to add `display: inline-block`
after adding `display: inline-block` to the `span`, the position of the icon in the button moves down.

Start by locating the Accordion heading button styles in the Vanilla Framework and reproduce the issue with a long heading. Check the hover background coverage, max-width behavior, and icon alignment; done means long headings constrain correctly while the hover state spans the intended area without shifting the icon.

Written by the indexing model from the issue text.