♿ a11y(bal-hint, bal-field-hint): hints are not accessible via Keyboard & Screenreader (#1637)

* Create PR for #1629

* a11y(bal-hint): support keyboard actions
-tab: to focus
-enter/space: to open popover

* a11y(bal-hint): support keyboard actions
-tab: to focus
-enter/space: to open popover

* a11y(bal-hint): run format

* a11y(bal-hint): use helper, fix text in changeset

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Magdalena Marinkov <[email protected]>

Author: github-actions[bot]

.changeset/famous-hats-appear.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**hint**: support keyboard actions: tab to focus, enter/space to open popover

packages/core/src/components/bal-hint/bal-hint.tsx

@@ -14,6 +14,7 @@ import { BEM } from '../../utils/bem'
 import { preventDefault } from '../bal-select/utils/utils'
 import { BalScrollHandler } from '../../utils/scroll'
 import { ListenToBreakpoints, BalBreakpointObserver, BalBreakpoints, balBreakpoints } from '../../utils/breakpoints'
+import { isEnterKey, isSpaceKey } from '../../utils/keyboard'
 
 @Component({
   tag: 'bal-hint',
@@ -160,7 +161,9 @@ export class Hint implements ComponentInterface, BalConfigObserver, BalBreakpoin
           aria-haspopup="true"
           role="button"
           name="info-circle"
+          tabindex={0}
           onClick={() => this.toggle()}
+          onKeyDown={event => (isEnterKey(event) || isSpaceKey(event)) && this.toggle()}
         ></bal-icon>
       )
     }