fix(accessibility): Fix roles and add correct label for navigation controls (#2143)

* Accessibility: Fix roles and add correct label for navigation controls

This makes screen readers properly indicate the control name, type, and state for the Back, Forward, and Add buttons.

* Update src/renderer/components/header.js

Co-authored-by: Alex <alxmorais8@msn.com>

src/renderer/components/header.js

@@ -11,6 +11,7 @@ class Header extends React.Component {
         onMouseMove={dispatcher('mediaMouseMoved')}
         onMouseEnter={dispatcher('mediaControlsMouseEnter')}
         onMouseLeave={dispatcher('mediaControlsMouseLeave')}
+        role='navigation'
       >
         {this.getTitle()}
         <div className='nav left float-left'>
@@ -18,6 +19,9 @@ class Header extends React.Component {
             className={'icon back ' + (loc.hasBack() ? '' : 'disabled')}
             title='Back'
             onClick={dispatcher('back')}
+            role='button'
+            aria-disabled={!loc.hasBack()}
+            aria-label='Back'
           >
             chevron_left
           </i>
@@ -25,6 +29,9 @@ class Header extends React.Component {
             className={'icon forward ' + (loc.hasForward() ? '' : 'disabled')}
             title='Forward'
             onClick={dispatcher('forward')}
+            role='button'
+            aria-disabled={!loc.hasForward()}
+            aria-label='Forward'
           >
             chevron_right
           </i>
@@ -50,6 +57,7 @@ class Header extends React.Component {
         className='icon add'
         title='Add torrent'
         onClick={dispatcher('openFiles')}
+        role='button'
       >
         add
       </i>