first accessibility pass

ccnmtl · Aug 14, 2023 · 88961c6 · 88961c6
1 parent b91fdf0
commit 88961c6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 35 deletions.
diff --git a/src/assignments/assignment.tsx b/src/assignments/assignment.tsx
@@ -94,16 +94,16 @@ export const Assignment: React.FC<AssignmentProps>  = (
 
         <>
             <div className='col-md-9'>
-                <h2>Questions</h2>
+                <h3>Questions</h3>
                 {questions.map((question, index) => {
                     return (
                         <div key={index}>
                             <p>
                                 {index + 1}. {question}
                             </p>
-                            <h2>
+                            <h3>
                                 Answer
-                            </h2>
+                            </h3>
                             <Answer
                                 questionId={index}
                                 answers={answers}

diff --git a/src/graphForm.tsx b/src/graphForm.tsx
@@ -272,12 +272,13 @@ export const GraphForm: React.FC<GraphFormProps> = (
                     >
                         {genre1Field && (
                             <div className='mb-3'>
-                                <label htmlFor='genre1'
+                                <label htmlFor='first genre'
                                     className='form-label'>Genre 1</label>
-                                <select name='genre1' id='genre1'
+                                <select name='first genre' id='first genre'
                                     className='form-select'
-                                    defaultValue={'Select one'}
+                                    defaultValue={'Select One'}
                                     onChange={handleGenre1Select}
+                                    aria-required={'true'}
                                     required>
                                     <option value={''}>Select one</option>
                                     {genresText.map((genre, index) => {
@@ -292,12 +293,13 @@ export const GraphForm: React.FC<GraphFormProps> = (
                         )}
                         {genre2Field && (
                             <div className='mb-3'>
-                                <label htmlFor='genre2'
+                                <label htmlFor='second genre'
                                     className='form-label'>Genre 2</label>
-                                <select name='genre2' id='genre2'
+                                <select name='second genre' id='second genre'
                                     className='form-select'
-                                    defaultValue={'Select one'}
+                                    defaultValue={'Select One'}
                                     onChange={handleGenre2Select}
+                                    aria-required={'true'}
                                     required>
                                     <option value={''}>Select one</option>
                                     {genresText.map((genre, index) => {
@@ -318,6 +320,7 @@ export const GraphForm: React.FC<GraphFormProps> = (
                                     className='form-select'
                                     defaultValue={'Select one'}
                                     onChange={handleAudioFeatureSelect}
+                                    aria-required={'true'}
                                     required>
                                     <option value={''}>Select one</option>
                                     {audioFeatures.map((
@@ -342,6 +345,7 @@ export const GraphForm: React.FC<GraphFormProps> = (
                                     className='form-select'
                                     defaultValue={'Select one'}
                                     onChange={handleDataPointsSelect}
+                                    aria-required={'true'}
                                     required>
                                     <option value={''}>Select one</option>
                                     {dataPointOptions.map((points, index) => {
@@ -365,6 +369,7 @@ export const GraphForm: React.FC<GraphFormProps> = (
                                     className='form-input'
                                     defaultValue={initialSeed}
                                     onChange={handleSeed}
+                                    aria-required={'true'}
                                     required>
                                 </input>
                             </div>

diff --git a/src/graphs/histogram.tsx b/src/graphs/histogram.tsx
@@ -57,6 +57,7 @@ export const Histogram: React.FC<HistogramProps>  = (
     {color, data1, data2, genre1, genre2, audioFeature='tempo', n}
 ) => {
     const svgRef = useRef(null);
+    const whichHisto = n ? 'DistributionHistogram' : 'SampleDataHistogram';
 
     const [selection, setSelection] = useState<null | Selection<
         null,
@@ -125,14 +126,13 @@ export const Histogram: React.FC<HistogramProps>  = (
             selection.append('rect')
                 .attr('fill', GRAPH_BG)
                 .attr('height', height-MARGIN)
-                .attr('id', 'graph-background')
                 .attr('width', gWidth-MARGIN-Y_LABEL)
                 .attr('x', MARGIN + Y_LABEL)
                 .attr('y', MARGIN);
 
             // Construct graph bars
             selection.append('g')
-                .attr('id', 'genre1')
+                .attr('id', `genre1-${whichHisto}-${color}`)
                 .attr('fill', color)
                 .selectAll()
                 .data(bins1)
@@ -155,7 +155,7 @@ export const Histogram: React.FC<HistogramProps>  = (
             if (data2) {
                 const id2 = 'detail-2';
                 selection.append('g')
-                    .attr('id', 'genre2')
+                    .attr('id', `genre2-${whichHisto}`)
                     .attr('fill', SECONDARY)
                     .selectAll()
                     .data(bins2)
@@ -280,7 +280,7 @@ export const Histogram: React.FC<HistogramProps>  = (
     return (
         <div className='col-sm-12'>
             <svg
-                id='bins'
+                id={`${whichHisto}-${color}`}
                 ref={svgRef}
                 width='100%'
                 height='20rem'

diff --git a/src/graphs/sampleDataHistogram.tsx b/src/graphs/sampleDataHistogram.tsx