Merge pull request #2221 from Sefaria/rtl-accessibility

Rtl accessibility
Sefaria · Jan 7, 2025 · ca4f055 · ca4f055
2 parents e84f7cd + a0727a0
commit ca4f055
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 12 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -13552,6 +13552,10 @@ span.ref-link-color-3 {color: blue}
   justify-content: center;
 }
 
+.show-source-translation-buttons input {
+  display: none;
+}
+
 .show-source-translation-buttons .button {
   margin: unset;
   display: flex;

diff --git a/static/js/FontSizeButton.jsx b/static/js/FontSizeButton.jsx
@@ -6,12 +6,20 @@ function FontSizeButtons() {
     const {setOption} = useContext(ReaderPanelContext);
     return (
         <div className="font-size-line">
-            <button onClick={()=>setOption('fontSize', 'smaller')} className="font-size-button preventClosing">
-                <img src="/static/icons/reduce_font.svg" alt="Reduce font size" />
+            <button
+                onClick={()=>setOption('fontSize', 'smaller')}
+                className="font-size-button preventClosing"
+                aria-label="Decrease font size"
+            >
+                <img src="/static/icons/reduce_font.svg" alt=""/>
             </button>
             <InterfaceText>Font Size</InterfaceText>
-            <button onClick={()=>setOption('fontSize', 'larger')} className="font-size-button preventClosing">
-                <img src="/static/icons/enlarge_font.svg" alt="Enlarge font size" />
+            <button
+                onClick={()=>setOption('fontSize', 'larger')}
+                className="font-size-button preventClosing"
+                aria-label="Decrease font size"
+            >
+                <img src="/static/icons/enlarge_font.svg" alt=""/>
             </button>
         </div>
     );

diff --git a/static/js/LayoutButtons.jsx b/static/js/LayoutButtons.jsx
@@ -1,6 +1,6 @@
 import {useContext} from "react";
 import {ReaderPanelContext} from "./context";
-import {layoutOptions} from "./constants";
+import {layoutOptions, layoutLabels} from "./constants";
 import {InterfaceText} from "./Misc";
 import PropTypes from "prop-types";
 
@@ -31,12 +31,16 @@ const LayoutButton = ({layoutOption, layoutState}) => {
     const {language, textsData, setOption, layout} = useContext(ReaderPanelContext);
     const path = getPath(layoutOption, layoutState, textsData);
     const optionName = (language === 'bilingual') ? 'biLayout' : 'layout';
+    const checked = layout === layoutOption;
     return (
-        <button
+        <input
             key={layoutOption}
-            className={`layout-button ${layout === layoutOption ? 'checked' : ''}`}
+            className={`layout-button ${checked ? 'checked' : ''}`}
             onClick={() => setOption(optionName, layoutOption)}
             style={{"--url": `url(${path})`}}
+            role="radio"
+            aria-label={layoutLabels[layoutOption]}
+            aria-checked={checked}
         />
     );
 };
@@ -49,7 +53,7 @@ const LayoutButtons = () => {
     const {language, textsData, panelMode} = useContext(ReaderPanelContext);
     const layoutState = calculateLayoutState(language, textsData, panelMode);
     return (
-        <div className="layout-button-line">
+        <div className="layout-button-line" role="radiogroup" aria-label="text layout toggle">
             <InterfaceText>Layout</InterfaceText>
             <div className="layout-options">
                 {layoutOptions[layoutState].map(option => <LayoutButton

diff --git a/static/js/ReaderDisplayOptionsMenu.jsx b/static/js/ReaderDisplayOptionsMenu.jsx
@@ -89,7 +89,7 @@ const ReaderDisplayOptionsMenu = () => {
     };
 
     return (
-        <div className="texts-properties-menu">
+        <div className="texts-properties-menu" role="dialog">
             {showLangaugeToggle() && <>
                 <SourceTranslationsButtons
                     showPrimary={showPrimary}

diff --git a/static/js/SourceTranslationsButtons.jsx b/static/js/SourceTranslationsButtons.jsx
@@ -12,13 +12,16 @@ function SourceTranslationsButtons({ showPrimary, showTranslation, setShowTexts
             <div
                 className={`button ${(isActive) ? "checked" : ""}`}
                 onClick={ () => setShowTexts(isPrimary, isTranslation) }
+                role="radio"
+                aria-checked={isActive}
             >
-                <InterfaceText>{text}</InterfaceText>
+                <input type='radio' id={text}/>
+                <label for={text}><InterfaceText>{text}</InterfaceText></label>
             </div>
         );
     }, [showPrimary, showTranslation]);
     return (
-      <div className="show-source-translation-buttons">
+      <div className="show-source-translation-buttons" role="radiogroup" aria-label="Source-translation toggle">
           {createButton(true, false, 'Source')}
           {createButton(false, true, 'Translation')}
           {!isSidePanel && createButton(true, true, 'Source with Translation')}

diff --git a/static/js/common/ToggleSwitch.jsx b/static/js/common/ToggleSwitch.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-function ToggleSwitch({name, disabled, onChange, isChecked}) {
+function ToggleSwitch({name, disabled, onChange, isChecked, ariaLabelledBy}) {
     return (
         <div className="toggle-switch-container">
           <div className="toggle-switch">
@@ -13,6 +13,9 @@ function ToggleSwitch({name, disabled, onChange, isChecked}) {
                 disabled={disabled}
                 onChange={onChange}
                 checked={isChecked && !disabled}
+                aria-checked={isChecked}
+                aria-labelledby={ariaLabelledBy}
+                role="switch"
             />
             <label className="toggle-switch-label" htmlFor={name}>
               <span className="toggle-switch-inner" />
@@ -27,5 +30,6 @@ ToggleSwitch.propTypes = {
     disabled: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
     isChecked: PropTypes.bool.isRequired,
+    ariaLabelledBy: PropTypes.string,
 };
 export default ToggleSwitch;
diff --git a/static/js/common/ToggleSwitchLine.jsx b/static/js/common/ToggleSwitchLine.jsx
@@ -13,6 +13,7 @@ function ToggleSwitchLine({name, onChange, isChecked, text, disabled=false}) {
                 disabled={disabled}
                 onChange={onChange}
                 isChecked={isChecked}
+                ariaLabelledBy={`${name}-label`}
             />
         </div>
     );

diff --git a/static/js/constants.js b/static/js/constants.js
@@ -4,3 +4,10 @@ export const layoutOptions = {
     'bi-ltr': ['stacked', 'heLeft'],
     'mixed': ['stacked', 'heLeft', 'heRight'],
 };
+export const layoutLabels = {
+    'continuous': 'Show Text as a paragram',
+    'segmented': 'Show Text segmented',
+    'stacked': 'Show Source & Translation Stacked',
+    'heRight': 'Show RTL Text Right of LTR Text',
+    'heLeft': 'Show RTL Text Left of LTR Text',
+}