Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): Basic screen reader accessibility functionality
- Adds aria roles to the grid to allow screen readers to understand what text to read out. - Adds screen reader only css element - Allows you to make a dom element have content exclusively for a screen reader. - Adds an accessibility demo to help with testing
- Loading branch information
1 parent
94e50a5
commit 377485a
Showing
9 changed files
with
132 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <!DOCTYPE html> | ||
| <html class="no-js" ng-app="test"><!--<![endif]--> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | ||
| <title></title> | ||
| <meta content="width=device-width" name="viewport"> | ||
|
|
||
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" /> | ||
| <link href="/dist/release/ui-grid.css" rel="stylesheet"> | ||
|
|
||
| <!--<script src="https://code.jquery.com/jquery-1.11.1.js"></script>--> | ||
| <script src="/lib/test/angular/1.3.16/angular.js"></script> | ||
| <script src="https://code.angularjs.org/1.3.16/angular-aria.js"></script> | ||
| <script src="/dist/release/ui-grid.js"></script> | ||
|
|
||
| <style> | ||
| body { | ||
| padding: 60px; | ||
| min-height: 600px; | ||
| } | ||
| .grid { | ||
| width: 1200px; | ||
| height: 400px; | ||
| } | ||
| .placeholder { | ||
| height: 50%; | ||
| width: 50%; | ||
| border: 3px solid black; | ||
| background: #ccc; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body ng-controller="Main"> | ||
| <!-- <h1>Test</h1> --> | ||
|
|
||
| <!-- <div class="row main"> --> | ||
| <h2>Grid</h2> | ||
| <div ui-grid="gridOptions" class="grid" ui-grid-resize-columns ui-grid-cellNav ui-grid-pagination></div> | ||
| <!-- <div class="placeholder"> --> | ||
| <!-- </div> --> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <script> | ||
| var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns', 'ui.grid.cellNav', 'ui.grid.pagination', 'ngAria']); | ||
| app.controller('Main', function($scope, $http) { | ||
| $scope.gridOptions = { | ||
| enableSorting: true, | ||
| showGridFooter: true, | ||
| enableGridMenu: true, | ||
| enableFiltering: true, | ||
| paginationPageSizes: [25, 50, 75, 100], | ||
| paginationPageSize: 25, | ||
| useExternalPagination: false, | ||
| useExternalSorting: false, | ||
| }; | ||
| $scope.gridOptions.columnDefs = [ | ||
| { name:'id', width:50 }, | ||
| { name:'name', width:100, pinnedLeft:true }, | ||
| { name:'age', width:100, pinnedRight:true }, | ||
| { name:'address.street', width:150 }, | ||
| { name:'address.city', width:150 }, | ||
| { name:'address.state', width:50 }, | ||
| { name:'address.zip', width:50 }, | ||
| { name:'company', width:100 }, | ||
| { name:'email', width:100 }, | ||
| { name:'phone', width:200 }, | ||
| { name:'about', width:300 }, | ||
| { name:'friends[0].name', displayName:'1st friend', width:150 }, | ||
| { name:'friends[1].name', displayName:'2nd friend', width:150 }, | ||
| { name:'friends[2].name', displayName:'3rd friend', width:150 } | ||
| ]; | ||
|
|
||
| $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') | ||
| .success(function(data) { | ||
| $scope.gridOptions.data = data; | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,13 @@ | ||
| <div class="ui-grid-header"> | ||
| <div role="rowgroup" class="ui-grid-header"> <!-- theader --> | ||
| <div class="ui-grid-top-panel"> | ||
| <div class="ui-grid-header-viewport"> | ||
| <div class="ui-grid-header-canvas"> | ||
| <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()"> | ||
| <div class="ui-grid-header-cell-row"> | ||
| <div role="row" class="ui-grid-header-cell-row"> | ||
| <div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.uid" ui-grid-header-cell col="col" render-index="$index"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,7 @@ | ||
| <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div> | ||
| <div | ||
| ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" | ||
| ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" | ||
| class="ui-grid-cell" | ||
| ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" | ||
| role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" | ||
| ui-grid-cell></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| <div class="ui-grid-viewport" ng-style="colContainer.getViewportStyle()"> | ||
| <div role="rowgroup" | ||
| class="ui-grid-viewport" | ||
| ng-style="colContainer.getViewportStyle()"><!-- tbody --> | ||
| <div class="ui-grid-canvas"> | ||
| <div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="Viewport.rowStyle(rowRenderIndex)"> | ||
| <div ui-grid-row="row" row-render-index="rowRenderIndex"></div> | ||
| <div role="row" ui-grid-row="row" row-render-index="rowRenderIndex"></div> | ||
| </div> | ||
| </div> | ||
| </div> |