schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-16 14:54:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #309 from orangemug/feature/skip-menu

Browse source 
Added skip-menu link for keyboard users
This commit is contained in:
Orange Mug 2018-05-28 13:17:02 +01:00 committed by GitHub
commit 0f103c3c00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Toolbar.jsx
View file

@ -135,9 +135,13 @@ export default class Toolbar extends React.Component {
/> />
<div className="maputnik-toolbar__inner"> <div className="maputnik-toolbar__inner">
<ToolbarLink <ToolbarLink
tabIndex="2"
href={"https://github.com/maputnik/editor"} href={"https://github.com/maputnik/editor"}
className="maputnik-toolbar-logo" className="maputnik-toolbar-logo"
> >
<a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
Skip navigation
</a>
<img src={logoImage} alt="Maputnik" /> <img src={logoImage} alt="Maputnik" />
<h1>Maputnik <h1>Maputnik
<span className="maputnik-toolbar-version">v{pkgJson.version}</span> <span className="maputnik-toolbar-version">v{pkgJson.version}</span>

1
src/components/layers/LayerList.jsx
View file

@ -209,6 +209,7 @@ class LayerListContainer extends React.Component {
<div className="maputnik-default-property"> <div className="maputnik-default-property">
<div className="maputnik-multibutton"> <div className="maputnik-multibutton">
<button <button
id="skip-menu"
onClick={this.toggleLayers.bind(this)} onClick={this.toggleLayers.bind(this)}
className="maputnik-button"> className="maputnik-button">
{this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"} {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}

22
src/styles/_toolbar.scss
View file

@ -16,6 +16,8 @@
background-color: $color-black; background-color: $color-black;
padding: $margin-2; padding: $margin-2;
height: $toolbar-height; height: $toolbar-height;
position: relative;
overflow: hidden;
h1 { h1 {
display: inline; display: inline;
@ -80,3 +82,23 @@
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.maputnik-toolbar-skip {
position: absolute;
overflow: hidden;
width: 0px;
height: 100%;
text-align: center;
display: block;
background-color: $color-black;
z-index: 999;
line-height: 40px;
left: 0;
top: 0;
&:active,
&:focus {
width: 100%;
}
}