I did in my project accessibility button but I have problem with the Responsiveness of the Button. I can’t see the menu in screens untill the size 1300px and and even then there is a problem ‘cuz the the menu became bigger the bigger the screen. What can I do the solve this?
Here’s the code of the menu:
import React, { useState } from "react";
import "../../../css/AccessibilityMenu.css";
const AccessibilityMenu = ({
style,
onToggleDarkMode,
onToggleTextOnly,
onToggleAnimations,
onToggleLinkHighlight,
}) => {
const [fontSize, setFontSize] = useState(16);
const fontFamilies = [
{ name: "Arial", text: " מעבר לפונט אריאל" },
{ name: "Times New Roman", text: "מעבר לפונט טיימס ניו רומן" },
{ name: "Verdana", text: "מעבר לפונט ורדנה " },
];
const increaseLineSpacing = () => {
const bodyStyles = getComputedStyle(document.body);
const currentFontSize = parseFloat(bodyStyles.fontSize);
const currentLineSpacing =
parseFloat(bodyStyles.lineHeight) / currentFontSize;
const newLineSpacing = currentLineSpacing + 0.2;
document.body.style.lineHeight = `${newLineSpacing}`;
};
const decreaseLineSpacing = () => {
const bodyStyles = getComputedStyle(document.body);
const currentFontSize = parseFloat(bodyStyles.fontSize);
const currentLineSpacing =
parseFloat(bodyStyles.lineHeight) / currentFontSize;
const newLineSpacing = currentLineSpacing - 0.2;
document.body.style.lineHeight = `${newLineSpacing}`;
};
const increaseTextSize = () => {
setFontSize((prevFontSize) => {
const newFontSize = prevFontSize + 2;
document.documentElement.style.fontSize = `${newFontSize}px`;
console.log("New Font Size:", newFontSize);
return newFontSize;
});
};
const decreaseTextSize = () => {
setFontSize((prevFontSize) => {
const newFontSize = prevFontSize - 2;
document.documentElement.style.fontSize = `${newFontSize}px`;
console.log("New Font Size:", newFontSize);
return newFontSize;
});
};
const changeFontFamily = (fontFamily) => {
document.body.style.fontFamily = fontFamily;
};
const changeTextColor = (color) => {
document.body.style.color = color;
};
const toggleHeaderHighlight = () => {
const headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
headers.forEach((header) => {
header.classList.toggle("highlighted-header");
});
};
return (
<div className="accessibility-menu" style={style}>
<button onClick={increaseTextSize}>הגדל טקסט</button>
<button onClick={decreaseTextSize}>הקטן טקסט</button>
<button onClick={onToggleDarkMode}>מצב לילה</button>
<button onClick={onToggleTextOnly}>מצב טקסט בלבד</button>
<button onClick={() => changeTextColor("black")}>טקסט שחור</button>
<button onClick={() => changeTextColor("blue")}>טקסט כחול</button>
<button onClick={() => changeTextColor("red")}>טקסט אדום</button>
<button onClick={onToggleLinkHighlight}>הדגש קישורים</button>
<button onClick={toggleHeaderHighlight}>סמן כותרות</button>
<div className="font-family-buttons">
{fontFamilies.map((fontFamily) => (
<button
key={fontFamily.name}
onClick={() => changeFontFamily(fontFamily.name)}
>
{fontFamily.text}
</button>
))}
</div>
<button onClick={increaseLineSpacing}>הגדל רווח בין שורות</button>
<button onClick={decreaseLineSpacing}>הקטן רווח בין שורות</button>
</div>
);
};
export default AccessibilityMenu;
Ans this is the code of the css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accessibility-menu {
position: absolute;
top: 100%;
left: 0;
background-color: white;
border: 1px solid #ccc;
padding: 1rem;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 100%;
width: auto;
}
.accessibility-menu button {
background-color: #4a90e2;
border: none;
color: white;
font-size: 14px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
padding: 0.5rem 1rem;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 10px 10px 10px;
}
body.dark-mode {
background-color: #333;
color: red;
font-weight: bold;
}
body.dark-mode a {
color: red;
}
/* High contrast mode */
body.high-contrast {
background-color: #fff;
color: #000;
}
body.high-contrast a {
color: #000;
}
/* Text-only mode */
body.text-only * {
background: none !important;
color: #000 !important;
font-size: 16px !important;
font-weight: normal !important;
text-decoration: none !important;
font-family: Arial, sans-serif !important;
}
body.text-only img {
display: none !important;
}
body.text-only *::before,
body.text-only *::after {
content: none !important;
}
.font-family-buttons button:not(:last-child) {
margin-bottom: 0.5rem;
}
.highlight-links {
background-color: yellow;
}
.highlighted-header {
text-decoration: underline;
}
.zoomed-element {
transform: scale(1.5);
transition: transform 0.3s ease-in-out;
}
:root {
--animation-speed: 1s;
}
.some-animation {
animation-duration: var(--animation-speed);
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.accessibility-menu {
top: auto;
bottom: 10%;
max-height: 500px;
overflow-y: auto;
width: auto;
}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
.accessibility-menu {
top: auto;
bottom: 10%;
max-height: 500px;
overflow-y: auto;
width: auto;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.accessibility-menu {
top: auto;
bottom: 10%;
max-height: 500px;
overflow-y: auto;
width: auto;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1215px) {
.accessibility-menu {
top: auto;
bottom: 10%;
max-height: 500px;
overflow-y: auto;
}
}
@media only screen and (min-width: 1216px) {
.accessibility-menu {
top: auto;
bottom: 10%;
max-height: 500px;
overflow-y: auto;
}
}
And this is the code of the button itself:
import React, { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import "../../../css/AccessibilityButton.css";
import AccessibilityMenu from "./AccessibilityMenu";
const AccessibilityButton = (props) => {
const [menuVisible, setMenuVisible] = useState(false);
const [menuStyle, setMenuStyle] = useState({});
const handleClick = () => {
setMenuVisible((prevVisible) => !prevVisible);
};
const handleKeyPress = (event) => {
if (event.key === "Enter") {
handleClick();
}
};
const toggleAnimations = () => {
document.body.classList.toggle("animation-active");
};
const toggleLinkHighlight = () => {
const links = document.querySelectorAll("a");
links.forEach((link) => {
link.classList.toggle("highlight-links");
});
};
useEffect(() => {
const buttonElement = document.querySelector(".accessibility-button");
if (buttonElement) {
const rect = buttonElement.getBoundingClientRect();
setMenuStyle({
position: "absolute",
top: `${rect.bottom}px`,
left: `${rect.left}px`,
});
}
}, []);
const toggleDarkMode = () => {
document.body.classList.toggle("dark-mode");
};
const toggleTextOnly = () => {
document.body.classList.toggle("text-only");
};
const changeColors = (bgColor, textColor) => {
document.body.style.backgroundColor = bgColor;
document.body.style.color = textColor;
};
return (
<>
<button
className="accessibility-button"
onClick={handleClick}
onKeyPress={handleKeyPress}
aria-label={props.ariaLabel}
tabIndex={0}
>
תפריט נגישות
</button>
{menuVisible &&
createPortal(
<AccessibilityMenu
style={menuStyle}
onToggleDarkMode={toggleDarkMode}
onToggleTextOnly={toggleTextOnly}
onChangeColors={changeColors}
onToggleAnimations={toggleAnimations}
onToggleLinkHighlight={toggleLinkHighlight}
/>,
document.body
)}
</>
);
};
export default AccessibilityButton;
And this is the code of the css of the button itslef:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accessibility-button {
position: absolute;
top: 60px;
right: 5px;
font-size: 16px;
padding: 8px 16px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
}
.accessibility-button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
@media only screen and (min-width: 1px) and (max-width: 480px) {
.accessibility-button {
position: absolute;
top: 60px;
right: 5px;
font-size: 16px;
padding: 4px 8px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
}
}
