Skip to content

Fix accessibility and best practices issues#60

Merged
MarcoABCorrea merged 2 commits intomainfrom
bug/lighthouse
Nov 5, 2021
Merged

Fix accessibility and best practices issues#60
MarcoABCorrea merged 2 commits intomainfrom
bug/lighthouse

Conversation

@MarcoABCorrea
Copy link
Collaborator

Resolves #53

</div>
<div class="bd-demo-code__result">
<iframe id="bd-demo-iframe" src="{{examples}}bd-demo-carousel.html"></iframe>
<iframe id="bd-demo-iframe" src="{{examples}}bd-demo-carousel.html" aria-label="Demo preview"></iframe>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename to: "Bento carousel demo preview"

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also use title instead

<button option="bd-demo-accordion" class="bd-button--light --inverted --uppercase">accordion</button>
<button option="bd-demo-sidebar" class="bd-button--light --inverted --uppercase">sidebar</button>
<button option="bd-demo-social-share" class="bd-button--light --inverted --uppercase">social share</button>
<bento-selector id="bd-demo-selector" aria-label="Demo selector button group">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try to make the labels explain what this is for: 'Select a Bento Demo'

<button option="bd-demo-sidebar" class="bd-button--light --inverted --uppercase">sidebar</button>
<button option="bd-demo-social-share" class="bd-button--light --inverted --uppercase">social share</button>
<bento-selector id="bd-demo-selector" aria-label="Demo selector button group">
<button option="bd-demo-carousel" class="bd-button--light --uppercase" aria-label="Button demo carousel">carousel</button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to add the type in the label, that's already clear from the element type. Better: 'show carousel demo'

</nav>
{# {%- include './language-selector.njk' -%} #}
<button class="bd-header-burger" tabindex="0">
<button class="bd-header-burger" tabindex="0" aria-label="Burger Menu">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above, describe the action: 'Open menu'

@MarcoABCorrea MarcoABCorrea merged commit b84f175 into main Nov 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix accessibility and best practices issues reported by lighthouse

2 participants