Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improving the accessibility #100

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Improving the accessibility #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e4ace7d
Fixing the errors
mohitm15 Jul 27, 2022
b7f096b
Fixing the errors-2
mohitm15 Jul 28, 2022
f89b8ac
Fixing the errors-3
mohitm15 Jul 28, 2022
2bc596b
Fixing the errors-4
mohitm15 Jul 28, 2022
99eec2f
Fixing the errors-5
mohitm15 Jul 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ class App extends Component {
themeListRenderer() {
const { theme } = this.state;
return themeList.map((t, k) =>
<button key={k} data-theme={t} onKeyDown={this.keyboardNavigation} className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`} onClick={this.changeTheme}></button>
<button aria-label="btn" name="theme" key={k} data-theme={t} onKeyDown={this.keyboardNavigation} className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`} onClick={this.changeTheme}></button>
)
}

Expand All @@ -283,15 +283,15 @@ class App extends Component {
<div className="blocks" key={type}>
<div className="block-category">{type}</div>
<div className="block-list">
{Object.entries(icons).map(icon => <button key={icon[0]} tabIndex="0" onClick={this.changeBlock} className={`block-item${icon[0] === blockName ? ' is-active': ''}`} block-type={type} block-name={icon[0]}>{icon[1]}</button>)}
{Object.entries(icons).map(icon => <button aria-label="btn" name="icon" key={icon[0]} tabIndex="0" onClick={this.changeBlock} className={`block-item${icon[0] === blockName ? ' is-active': ''}`} block-type={type} block-name={icon[0]}>{icon[1]}</button>)}
</div>
</div>
);
}

viewModeRenderer() {
const { view } = this.state;
return viewList.map((v, k) => <button key={k} className={`device${view === v.name ? ' is-active' : ''}`} data-view={v.name} onClick={this.changeView}>{v.icon}</button>);
return viewList.map((v, k) => <button aria-label="btn" name="viewlist" key={k} className={`device${view === v.name ? ' is-active' : ''}`} data-view={v.name} onClick={this.changeView}>{v.icon}</button>);
}

toggleSidebar() {
Expand All @@ -318,22 +318,22 @@ class App extends Component {
const { darkMode, theme, blockName, blockType, sidebar, view, copied, currentKeyCode } = this.state;
return (
<div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
<textarea className="copy-textarea" ref={this.textareaRef} />
<label htmlFor="copy-textarea" className='hidden'>Copy<textarea id="copy-textarea" name="copy-textarea" className="copy-textarea" ref={this.textareaRef} /></label>
<aside className="sidebar" ref={this.sidebarRef}>
{this.listRenderer()}
</aside>
<div className="toolbar">
<button className="opener" onClick={this.toggleSidebar} ref={this.openerRef}>TAILBLOCKS</button>
<button aria-label="btn" name="opener" className="opener" onClick={this.toggleSidebar} ref={this.openerRef}>TAILBLOCKS</button>
{this.state.codeView &&
<div className="clipboard-wrapper">
<button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
<button aria-label="btn" name="clipboardicon" className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
{clipboardIcon}
<span>COPY TO CLIPBOARD</span>
</button>
<span className={`clipboard-tooltip${copied ? ' is-copied ' : ''}`} >Copied!</span>
</div>
}
<button className="copy-the-block" onClick={this.toggleView}>
<button aria-label="btn" name="codeview" className="copy-the-block" onClick={this.toggleView}>
{!this.state.codeView ?
<svg
fill="none"
Expand Down Expand Up @@ -366,12 +366,13 @@ class App extends Component {
{this.themeListRenderer()}
</div>
{this.viewModeRenderer()}
<button className="mode" onClick={this.changeMode}></button>
<button aria-label="btn" name="mode" className="mode" onClick={this.changeMode}></button>
</div>
<div className="markup" ref={this.markupRef}>{getBlock({ theme, darkMode })[blockType][blockName]}</div>
<main className="main" style={{ opacity: this.state.ready ? '1' : '0' }}>
<div className={`view${this.state.codeView ? ' show-code' : ''}`}>
<Frame
title='landingframe'
contentDidMount={this.handleContentDidMount}
contentDidUpdate={this.handleContentDidUpdate}
head={
Expand Down
9 changes: 6 additions & 3 deletions src/blocks/contact/dark/a.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,31 @@ function DarkContactA(props) {
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
<div className="relative mb-4">
<form>
<label
htmlFor="message"
className="leading-7 text-sm text-gray-400"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</label>
</form>
</div>
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>

<button aria-label="btn" name="btn" className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
<p className="text-xs text-gray-400 text-opacity-90 mt-3">
Expand Down
11 changes: 7 additions & 4 deletions src/blocks/contact/dark/b.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,48 +49,51 @@ function DarkContactB(props) {
<p className="leading-relaxed mb-5">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>

<div className="relative mb-4">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-400"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
<div className="relative mb-4">
<form>
<label
htmlFor="message"
className="leading-7 text-sm text-gray-400"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</label>
</form>
</div>
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
<button aria-label="btn" name="btn" className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
<p className="text-xs text-gray-400 text-opacity-90 mt-3">
Expand Down
12 changes: 8 additions & 4 deletions src/blocks/contact/dark/c.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,21 @@ function DarkContactC(props) {
</div>
<div className="lg:w-1/2 md:w-2/3 mx-auto">
<div className="flex flex-wrap -m-2">

<div className="p-2 w-1/2">
<div className="relative">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-400"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
</div>
<div className="p-2 w-1/2">
Expand All @@ -39,32 +40,35 @@ function DarkContactC(props) {
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
</div>
<div className="p-2 w-full">
<div className="relative">
<form>
<label
htmlFor="message"
className="leading-7 text-sm text-gray-400"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</label>
</form>
</div>
</div>

<div className="p-2 w-full">
<button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
<button aria-label="btn" name="btn" className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
</div>
Expand Down
11 changes: 8 additions & 3 deletions src/blocks/contact/light/a.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,34 +25,39 @@ function LightContactA(props) {
<p className="leading-relaxed mb-5 text-gray-600">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>

<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-600"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>

<div className="relative mb-4">
<form>
<label
htmlFor="message"
className="leading-7 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</label>
</form>
</div>
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>

<button aria-label="btn" name="btn" className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
<p className="text-xs text-gray-500 mt-3">
Expand Down
12 changes: 8 additions & 4 deletions src/blocks/contact/light/b.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,48 +49,52 @@ function LightContactB(props) {
<p className="leading-relaxed mb-5 text-gray-600">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>

<div className="relative mb-4">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-600"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-600"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
<div className="relative mb-4">
<form>
<label
htmlFor="message"
className="leading-7 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</label>
</form>
</div>
<button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>

<button aria-label="btn" name="btn" className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
<p className="text-xs text-gray-500 mt-3">
Expand Down
12 changes: 8 additions & 4 deletions src/blocks/contact/light/c.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,21 @@ function LightContactC(props) {
</div>
<div className="lg:w-1/2 md:w-2/3 mx-auto">
<div className="flex flex-wrap -m-2">

<div className="p-2 w-1/2">
<div className="relative">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-600"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
</div>
<div className="p-2 w-1/2">
Expand All @@ -39,32 +40,35 @@ function LightContactC(props) {
className="leading-7 text-sm text-gray-600"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</label>
</div>
</div>
<div className="p-2 w-full">
<div className="relative">
<form>
<label
htmlFor="message"
className="leading-7 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</label>
</form>
</div>
</div>

<div className="p-2 w-full">
<button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
<button aria-label="btn" name="btn" className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/content/dark/a.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ function DarkContentA(props) {
</a>
</div>
</div>
<button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
<button aria-label="btn" name="btn" className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
</div>
Expand Down
Loading