Make view changing buttons state narrated by the screen reader

The selected state of an element is not conveyed to screen reader users.

Element Name: Selected button 'Switch to table view'/ 'Switch to Grid view'

Location: In the main region of the page.

NVDA is narrating incorrect state as 'Unavailable', instead of 'Selected'.
Recommendation to fix
RULE :
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

HOW TO FIX:
Fix this issue by using the aria-selected attribute with the following four ARIA roles: gridcell, option, row, tab.

REFERENCE:
WAI-ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-selected
WAI ARIA Authoring Practices: https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

BACKGROUND:
States and properties are attributes used to convey essential information about an element to screen readers and other assistive technologies. Some roles require certain state and property information - such as the checked/unchecked state of a checkbox. Native HTML elements provide those required states and properties, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant states and properties using ARIA.