MDB accordion is not accessible by keyboard and screen reade

Current MDB accordion is not accessible by keyboard and screen readers.

To make it accessible we have to do the recommended following changes

Angualr code

<mdb-accordion [multiple]="false">
      <mdb-accordion-item [collapsed]="false">
        <mdb-accordion-item-head>
           Accordion heading 1             
        </mdb-accordion-item-head> 
        <mdb-accordion-item-body>
                 Accordion body 1
        </mdb-accordion-item-body>         
      </mdb-accordion-item>

Generated HTML Code

    <mdb-accordion ng-reflect-multiple="false">
   <div class="accordion md-accordion">
      <mdb-accordion-item ng-reflect-collapsed="false">
         <div class="card active" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
            <mdb-accordion-item-head>
               <div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
                  <a role="button">
                     <h5 class="mb-0">
                          Accordion heading 1 
                          <i class="fas fa-angle-down rotate-icon ng-star-inserted"></i>
                     </h5>
                  </a>
               </div>
            </mdb-accordion-item-head>
            <mdb-accordion-item-body class="ng-tns-c12-0 ng-star-inserted">
               <div class="sb-item-body ng-trigger ng-trigger-expandBody" style="visibility: visible;">
                  <div class="card-body ">
                     Accordion body 1
                  </div>
               </div>
            </mdb-accordion-item-body>
         </div>
      </mdb-accordion-item>
   </div>
</mdb-accordion>

Code should be like below to make it accessible by keyboard and screen reader

    <mdb-accordion ng-reflect-multiple="false">
   <div class="accordion md-accordion">
      <mdb-accordion-item ng-reflect-collapsed="false">
         <div class="card active" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
            <mdb-accordion-item-head>
               <h5 class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
                 <button aria-expand="true/false" 
                 aria-controls="accordion-body1"
                 id="accordion-heading1"
                 class="btn btn-link text-justify"> 
                          Accordion heading 1
                          <i class="fas fa-angle-down rotate-icon ng-star-inserted" aria-hidden=”true”></i>                   
                  </button>
               </h5>
            </mdb-accordion-item-head>
            <mdb-accordion-item-body class="ng-tns-c12-0 ng-star-inserted">
               <div role="region" id="accordion-body1"
                aria-labelledby="accordion-heading1"
                class="sb-item-body ng-trigger ng-trigger-expandBody" style="visibility: visible;">
                  <div class="card-body">
                     Accordion body 1
                  </div>
               </div>
            </mdb-accordion-item-body>
         </div>
      </mdb-accordion-item>
   </div>
</mdb-accordion>

Recommended Updates

<a role=”button”>  without  href attribute it is not accessible by keyboard. It’s better to use the button tag itself to support accessibility .
MDB angular team also need to add aria-expand and dynamically change the value on aria-expand  true or false.
Also provide the unique ID and aria-control attribute to each header  item in accordion to establish the relationship between accordion header and body
aria-expand="true/false" 
                 aria-controls="accordion-body1"
                 id="accordion-heading1"

add aria-hidden=”true” to <i> tag for  fas fa-angle-down 

and then   <div>  after   <mdb-accordion-item-body> tag should  add the  following
role="region" 
id="accordion-body1"                                    /* unique id should be added to the div to provide relation to aria-control in header */
               aria-labelledby="accordion-heading1"   /* above defined id for accordion header should  assigned to aria-labelledby  attribute */