Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Accessibility for radioset for tables

3436644Jan 9 2018 — edited Jan 9 2018

Hello,

I am working on oracle cloud service product using oracle jet. We used radioset for oracle jet tables for single select senerios. I noticed there are no example of oracle jet table with single select radiosets in oracle jet cookbook.

I found an example or oracle jet table with multi select checkboxes.

http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=table&demo=checkboxSelectableTable

So, I tried to use similar way to construct oracle jet table with radiosets.

I used template as the following:

<script type="text/html" id="radio_tmpl">
                <td>
                    <oj-radioset aria-hidden='true'
                                    value='{{$context.row.Selected}}'
                                    class='oj-radioset-no-chrome'>
                        <oj-option data-bind="attr:{
                                id: 'radio' + $context.cellContext.status.rowIndex}" value="checked"></oj-option>
                    </oj-radioset>
                </td>
        </script>

  self.columnArray = [{"renderer": oj.KnockoutTemplateUtils.getRenderer("radio_tmpl", true),
                         "id": "column1"},
                        {"headerText": "Department Id",
                         "field": "DepartmentId",
                         "id": "column2"},
                        {"headerText": "Department Name",
                         "field": "DepartmentName",
                         "id": "column3"},
                        {"headerText": "Location Id",
                         "field": "LocationId",
                         "id": "column4"},
                        {"headerText": "Manager Id",
                         "field": "ManagerId",
                         "id": "column5"}];

It seems to work. However, for accessibility, if I navigate to the row, enter space bar or up/down or enter key to select or unselect that radio button for the table row, it does not work.
Please advise. How to make accessibility work for oracle jet tables with single select radio buttons?

Thank you very much!

This post has been answered by John JB Brock-Oracle on Jan 9 2018
Jump to Answer
Comments
Post Details
Added on Jan 9 2018
2 comments
319 views