Tree: Item "expand" button must have discernible text within the icon

[jcjuett]

http://design-system-react-components.herokuapp.com/?selectedKind=SLDSTree&selectedStory=Base&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
(error occurs in all Trees states except Overflow Hidden and Large dataset)

Correction is necessary because assistive text is missing (even though item 1 of 4 does not appear as expandable)

HTML: <div class="slds-tree__item slds-is-selected"><button class="slds-button slds-button_icon slds-m-right_small slds-is-disabled" disabled="" tabindex="-1" type="button" aria-hidden="true"><svg aria-hidden="true" class="slds-button__icon slds-button__icon_small"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use></svg></button><span class="slds-size_1-of-1"><span class="slds-tree__item-label slds-truncate" title="Grains">Grains</span></span></div>

Add: <span class="slds-assistive-text">Expand Grains</span> between </use> and </button>

Corrected html: <div class="slds-tree__item slds-is-selected"><button class="slds-button slds-button_icon slds-m-right_small slds-is-disabled" disabled="" tabindex="-1" type="button" aria-hidden="true"><svg aria-hidden="true" class="slds-button__icon slds-button__icon_small"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use></svg><span class="slds-assistive-text">Expand Grains</span></button><span class="slds-size_1-of-1"><span class="slds-tree__item-label slds-truncate" title="Grains">Grains</span></span></div>

Success Criteria: component states will pass automated aXe test.

[interactivellama]

I thought aria-hidden="true" on the button would solve this. I think that is what the SLDS markup has done for Tree.

[jcjuett]

I think we still need the assistive text. This is added in the SLDS markup.

[interactivellama]

@AnutaK This would be a good item to pick up, too. It's adding assistive text to the visually hidden button. You will need to update the HTML snapshots for the TravisCI tests to pass once, the Tree component is updated with npm run test:snapshot:update

Here is the line that is currently blank and needs the prop/variable mentioned in #2019

https://github.com/salesforce/design-system-react/blob/master/components/tree/private/item.jsx#L169

[interactivellama]

@jcjuett I'm on board with the update. Thank you for clarifying.