fix(simple-list): added tabindex, button type, removed hover underline (#2679)

mcoker · web-flow · commit c3efeee8bbfd · 2020-02-07T16:00:43.000-05:00
* fix(simple-list): added tabindex, button type, removed hover underline
diff --git a/src/patternfly/components/SimpleList/examples/SimpleList.md b/src/patternfly/components/SimpleList/examples/SimpleList.md
@@ -27,6 +27,29 @@ cssPrefix: pf-c-simple-list
   {{/simple-list-list}}
 {{/simple-list}}
 ```
+
+```hbs title=Simple-list-with-links
+{{#> simple-list simple-list-item-link--IsLink="true"}}
+  {{#> simple-list-list}}
+    {{#> simple-list-item}}
+      {{#> simple-list-item-link simple-list-item-link--modifier="pf-m-current"}}
+        List item 1
+      {{/simple-list-item-link}}
+    {{/simple-list-item}}
+    {{#> simple-list-item}}
+      {{#> simple-list-item-link}}
+        List item 2
+      {{/simple-list-item-link}}
+    {{/simple-list-item}}
+    {{#> simple-list-item}}
+      {{#> simple-list-item-link}}
+        List item 3
+      {{/simple-list-item-link}}
+    {{/simple-list-item}}
+  {{/simple-list-list}}
+{{/simple-list}}
+```
+
 ```hbs title=Grouped-list
 {{#> simple-list}}
   {{#> simple-list-section}}
@@ -87,7 +110,11 @@ cssPrefix: pf-c-simple-list
 ```
 
 ## Documentation
-### Overview
+
+### Accessibility
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `tabindex="0"` | `a.pf-c-simple-list__item-link` | Inserts the link into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 | Class | Applied to | Outcome |
diff --git a/src/patternfly/components/SimpleList/simple-list-item-link.hbs b/src/patternfly/components/SimpleList/simple-list-item-link.hbs
@@ -1,6 +1,12 @@
-<{{#if simple-list-item-link--type}}{{simple-list-item-link--type}}{{else}}button{{/if}} class="pf-c-simple-list__item-link{{#if simple-list-item-link--modifier}} {{simple-list-item-link--modifier}}{{/if}}"
+<{{#if simple-list-item-link--IsLink}}a{{else}}button{{/if}} class="pf-c-simple-list__item-link{{#if simple-list-item-link--modifier}} {{simple-list-item-link--modifier}}{{/if}}"
+  {{#if simple-list-item-link--IsLink}}
+    href="#"
+    tabindex="0"
+  {{else}}
+    type="button"
+  {{/if}}
   {{#if simple-list-item-link--attribute}}
     {{{simple-list-item-link--attribute}}}
   {{/if}}>
   {{> @partial-block}}
-</{{#if simple-list-item-link--type}}{{simple-list-item-link--type}}{{else}}button{{/if}}>
+</{{#if simple-list-item-link--IsLink}}a{{else}}button{{/if}}>
diff --git a/src/patternfly/components/SimpleList/simple-list.scss b/src/patternfly/components/SimpleList/simple-list.scss
@@ -52,6 +52,8 @@
 
   &.pf-m-hover,
   &:hover {
+    text-decoration: none;
+
     --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
     --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
   }

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,8 @@`
`52`	`52`
`53`	`53`	`&.pf-m-hover,`
`54`	`54`	`&:hover {`
	`55`	`+ text-decoration: none;`
	`56`	`+`
`55`	`57`	`--pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);`
`56`	`58`	`--pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);`
`57`	`59`	`}`