SemanticMediaWiki / SemanticResultFormats

Provides additional visualizations (result formats) for Semantic MediaWiki
https://www.semantic-mediawiki.org/wiki/Extension:Semantic_Result_Formats
Other
45 stars 75 forks source link

[filtered] switching view in filtered format should improve accessibility #726

Closed krabina closed 1 year ago

krabina commented 1 year ago

Issue

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