datatable adding scope for accessibility

Topic: datatable adding scope for accessibility

Mike Barlow asked 5 years ago

I'm developing an app for a customer who requires the app to be accessible (WCAG/508 accessilbity). And one of the requirements is that tables have a "scope" parameter assigned to TH/TD tags. Currently the mdbDatatable2 component renders thus:

<table data-v-2d57c4e6="" class="table table-bordered dataTable table-fixed table-striped">
    <thead data-v-3a77a5d7="" data-v-c34d2574="" class="table-header" data-v-2d57c4e6="">
        <tr data-v-c34d2574="" data-v-3a77a5d7="">
            <th data-v-c34d2574="" data-v-3a77a5d7=""></th>
            <th data-v-c34d2574="" data-v-3a77a5d7="" class="">
                <i data-v-c34d2574="" data-v-3a77a5d7="" class="mdb-datatable-header-hover-icon fas fa-arrow-up"></i> Field Changed 
            </th>
            <th data-v-c34d2574="" data-v-3a77a5d7="" class="">
                <i data-v-c34d2574="" data-v-3a77a5d7="" class="mdb-datatable-header-hover-icon fas fa-arrow-up"></i> Date 
            </th>
            <th data-v-c34d2574="" data-v-3a77a5d7="" class="">
                <i data-v-c34d2574="" data-v-3a77a5d7="" class="mdb-datatable-header-hover-icon fas fa-arrow-up"></i> Site data accessed from 
            </th>
        </tr>
    </thead>
    <tbody data-v-f820cad8="" data-v-c34d2574="" class="" data-v-2d57c4e6="">
        <tr data-v-c34d2574="" data-v-f820cad8="" class="selectable-row grey lighten-4" style="">
            <td data-v-c34d2574="" data-v-f820cad8="" class="text-center" style="padding-top: 1rem; padding-bottom: 0px;">
                <div data-v-5c7d4350="" data-v-c34d2574="" class="form-check" data-v-f820cad8="">
                    <input data-v-5c7d4350="" type="checkbox" class="form-control filled-in form-check-input" value="true" checked="checked">
                    <label data-v-5c7d4350="" class="form-check-label"></label>
                </div>
            </td>
            <td data-v-c34d2574="" data-v-f820cad8="" contenteditable="false" class="">MOTHER'S MAIDEN NAME</td>
            <td data-v-c34d2574="" data-v-f820cad8="" contenteditable="false" class="">31/10/1985 - 05:01:21 - 0500Z</td>
            <td data-v-c34d2574="" data-v-f820cad8="" contenteditable="false" class="">DANVILLE</td>
        </tr>
    </tbody>
</table>

I need to be able to add "scope" parameters to render like this:

<table data-v-2d57c4e6="" class="table table-bordered dataTable table-fixed table-striped">
        <thead data-v-3a77a5d7="" data-v-c34d2574="" class="table-header" data-v-2d57c4e6="">
            <tr data-v-c34d2574="" data-v-3a77a5d7="">
                <th scope="col" data-v-c34d2574="" data-v-3a77a5d7=""></th>
                <th scope="col" data-v-c34d2574="" data-v-3a77a5d7="" class="">
                    <i data-v-c34d2574="" data-v-3a77a5d7="" class="mdb-datatable-header-hover-icon fas fa-arrow-up"></i> Field Changed 
                </th>
                <th scope="col" data-v-c34d2574="" data-v-3a77a5d7="" class="">
                    <i data-v-c34d2574="" data-v-3a77a5d7="" class="mdb-datatable-header-hover-icon fas fa-arrow-up"></i> Date 
                </th>
                <th scope="col" data-v-c34d2574="" data-v-3a77a5d7="" class="">
                    <i data-v-c34d2574="" data-v-3a77a5d7="" class="mdb-datatable-header-hover-icon fas fa-arrow-up"></i> Site data accessed from 
                </th>
            </tr>
        </thead>
        <tbody data-v-f820cad8="" data-v-c34d2574="" class="" data-v-2d57c4e6="">
            <tr data-v-c34d2574="" data-v-f820cad8="" class="selectable-row grey lighten-4" style="">
                <td scope="col" data-v-c34d2574="" data-v-f820cad8="" class="text-center" style="padding-top: 1rem; padding-bottom: 0px;">
                    <div data-v-5c7d4350="" data-v-c34d2574="" class="form-check" data-v-f820cad8="">
                        <input data-v-5c7d4350="" type="checkbox" class="form-control filled-in form-check-input" value="true" checked="checked">
                        <label data-v-5c7d4350="" class="form-check-label"></label>
                    </div>
                </td>
                <td scope="row" data-v-c34d2574="" data-v-f820cad8="" contenteditable="false" class="">MOTHER'S MAIDEN NAME</td>
                <td scope="row" data-v-c34d2574="" data-v-f820cad8="" contenteditable="false" class="">31/10/1985 - 05:01:21 - 0500Z</td>
                <td scope="row" data-v-c34d2574="" data-v-f820cad8="" contenteditable="false" class="">DANVILLE</td>
            </tr>
        </tbody>
    </table>

Short of recoding the mdbdatatable component is there an easier way to add this requirement?

Thanks

Add comment

Magdalena Dembna staff premium answered 5 years ago

0 0 Best answer

Unfortunately, there is no easy way to do this with this component - it's a great suggestion for us though. The only way I could think of is setting attributes with javascript:

<mdb-datatable-2 ref="table" v-model="data" />

   mounted() {
    this.$nextTick(() => {
      const table = this.$refs.table.$el;
      const rowCells = table.getElementsByTagName('td');
      const headerCells = table.getElementsByTagName('th');
      rowCells.forEach(cell => cell.setAttribute('scope', 'row'))
      headerCells.forEach(cell => cell.setAttribute('scope', 'col'))
    })
  },

It would be a little bit trickier with asynchrouous data - you need to set those attributes after the entire table is loaded. Kind regards, Magdalena

Mike Barlow commented 5 years ago

Thanks for the suggestion. I was able to implement your suggestion and that works just great!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: MDB Vue
MDB Version: 6.7.1
Device: Any
Browser: Any
OS: windows
Provided sample code: No
Provided link: No

About author

Mike Barlow

100Support score
14Questions 3Answers

0Snippets likes 0Snippets