From 377485a47dcb32868f155c880108e3f07ec74820 Mon Sep 17 00:00:00 2001 From: Jonathan Leitschuh Date: Mon, 27 Jul 2015 12:05:58 -0400 Subject: [PATCH] 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 --- misc/demo/grid-accessiblility.html | 83 +++++++++++++++++++ src/less/grid.less | 15 ++++ src/less/variables.less | 6 ++ src/templates/ui-grid/ui-grid-footer.html | 6 +- src/templates/ui-grid/ui-grid-header.html | 5 +- src/templates/ui-grid/ui-grid-row.html | 8 +- src/templates/ui-grid/uiGridHeaderCell.html | 14 ++-- .../ui-grid/uiGridRenderContainer.html | 7 +- src/templates/ui-grid/uiGridViewport.html | 6 +- 9 files changed, 132 insertions(+), 18 deletions(-) create mode 100644 misc/demo/grid-accessiblility.html diff --git a/misc/demo/grid-accessiblility.html b/misc/demo/grid-accessiblility.html new file mode 100644 index 0000000000..c031eff605 --- /dev/null +++ b/misc/demo/grid-accessiblility.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + +

Grid

+
+ + + +
+
+ + + + diff --git a/src/less/grid.less b/src/less/grid.less index f352d7945a..b0b96332aa 100644 --- a/src/less/grid.less +++ b/src/less/grid.less @@ -63,3 +63,18 @@ height: 100%; width: 100%; } + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +.ui-grid-sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} diff --git a/src/less/variables.less b/src/less/variables.less index 60dd18b69f..aba4c918ae 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -69,6 +69,12 @@ @invalidValueBorder: 1px solid rgb(252, 143, 143); @validValueBorder: 1px solid @borderColor; +//Pagination controls +@paginationButtonColor: @headerGradientStart; +@paginationButtonBackgroundColor: @headerBackgroundColor; +@paginationButtonBorderColor: #ccc; + + /** * @section font library path */ diff --git a/src/templates/ui-grid/ui-grid-footer.html b/src/templates/ui-grid/ui-grid-footer.html index b7d815470f..d245b7bc23 100644 --- a/src/templates/ui-grid/ui-grid-footer.html +++ b/src/templates/ui-grid/ui-grid-footer.html @@ -1,9 +1,9 @@ -
+
-
-
+
+
diff --git a/src/templates/ui-grid/ui-grid-header.html b/src/templates/ui-grid/ui-grid-header.html index 9530ebd05c..875d318d5c 100644 --- a/src/templates/ui-grid/ui-grid-header.html +++ b/src/templates/ui-grid/ui-grid-header.html @@ -1,14 +1,13 @@ -
+
-
+
-
diff --git a/src/templates/ui-grid/ui-grid-row.html b/src/templates/ui-grid/ui-grid-row.html index cb69469ced..dde3476757 100644 --- a/src/templates/ui-grid/ui-grid-row.html +++ b/src/templates/ui-grid/ui-grid-row.html @@ -1 +1,7 @@ -
+
diff --git a/src/templates/ui-grid/uiGridHeaderCell.html b/src/templates/ui-grid/uiGridHeaderCell.html index 599fd6956f..63aaedc01a 100644 --- a/src/templates/ui-grid/uiGridHeaderCell.html +++ b/src/templates/ui-grid/uiGridHeaderCell.html @@ -1,15 +1,13 @@ -
+
-
- {{ col.displayName CUSTOM_FILTERS }} +
+ {{ col.displayName CUSTOM_FILTERS }} - -   - +  
-
-   +
+
diff --git a/src/templates/ui-grid/uiGridRenderContainer.html b/src/templates/ui-grid/uiGridRenderContainer.html index 179943f326..939c74b54d 100644 --- a/src/templates/ui-grid/uiGridRenderContainer.html +++ b/src/templates/ui-grid/uiGridRenderContainer.html @@ -1,4 +1,9 @@ -
+
+
diff --git a/src/templates/ui-grid/uiGridViewport.html b/src/templates/ui-grid/uiGridViewport.html index 7926aee3bd..450c79d44d 100644 --- a/src/templates/ui-grid/uiGridViewport.html +++ b/src/templates/ui-grid/uiGridViewport.html @@ -1,7 +1,9 @@ -
+
-
+