Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add hidden table headings.
Makes the headings available for accessibility but hides them visually.
  • Loading branch information
joshuap committed Nov 26, 2017
1 parent d10303f commit 2ec97c1
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 0 deletions.
5 changes: 5 additions & 0 deletions app/javascript/mastodon/features/keyboard_shortcuts/index.js
Expand Up @@ -6,6 +6,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';

const messages = defineMessages({
heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
hotkey: { id: 'keyboard_shortcuts.hotkey', defaultMessage: 'Hotkey' },
description: { id: 'keyboard_shortcuts.description', defaultMessage: 'Description' },
reply: { id: 'keyboard_shortcuts.reply', defaultMessage: 'to reply' },
mention: { id: 'keyboard_shortcuts.mention', defaultMessage: 'to mention author' },
favourite: { id: 'keyboard_shortcuts.favourite', defaultMessage: 'to favourite' },
Expand Down Expand Up @@ -38,6 +40,9 @@ export default class KeyboardShortcuts extends ImmutablePureComponent {
<Column icon='question' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile>
<div className='keyboard-shortcuts scrollable optionally-scrollable'>
<table>
<thead>
<tr><th>{intl.formatMessage(messages.hotkey)}</th><th>{intl.formatMessage(messages.description)}</th></tr>
</thead>
<tbody>
<tr><td><code>r</code></td><td>{intl.formatMessage(messages.reply)}</td></tr>
<tr><td><code>m</code></td><td>{intl.formatMessage(messages.mention)}</td></tr>
Expand Down
6 changes: 6 additions & 0 deletions app/javascript/styles/mastodon/components.scss
Expand Up @@ -2101,6 +2101,12 @@

.keyboard-shortcuts {
padding: 8px 0 0;
overflow: hidden;

thead {
position: absolute;
left: -9999px;
}

td {
padding: 0 10px 8px;
Expand Down

0 comments on commit 2ec97c1

Please sign in to comment.