Closed krabina closed 1 year ago
the tabs to select different views are not accessible via keyboard. Currently the HTML is
<div class="filtered-views-selectors-container" style=""> <div class="filtered-view-selector filtered-map h6c09t94j8 selected">Map</div> <div class="filtered-view-selector filtered-table h6c09tbt2v">Table</div> </div>
it should either be buttons
<button class="filtered-view-selector filtered-map h6c09t94j8 selected">Map</button> <button class="filtered-view-selector filtered-table h6c09tbt2v">Table</button>
or the divs should use role and tabindex, so with navigating with the keyboard, they can be accessed
<div role="button" tabindex="0" class="filtered-view-selector filtered-map h6c09t94j8 selected">Map</div> <div role="button" tabindex="0" class="filtered-view-selector filtered-table h6c09tbt2v">Table</div>
JavaScript has to be changed from mouse event to click event.
Additionally, aria-expanded="false" or aria-expanded="true" should be present, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded
aria-expanded="false"
aria-expanded="true"
Issue
the tabs to select different views are not accessible via keyboard. Currently the HTML is
it should either be buttons
or the divs should use role and tabindex, so with navigating with the keyboard, they can be accessed
JavaScript has to be changed from mouse event to click event.
Additionally,
aria-expanded="false"
oraria-expanded="true"
should be present, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded